<template>
	<el-container>
		<el-header>
			<div class="right-panel">
				<el-select v-model="queryType" @change="queryTypeChange">
					<el-option
						v-for="item in typeOptions"
						:key="item"
						:label="item"
						:value="item"
					>
					</el-option>
				</el-select>
				<el-date-picker
					v-if="queryType == '月'"
					v-model="queryDate"
					type="month"
					placeholder="查询月期"
					value-format="YYYY-MM"
				>
				</el-date-picker>
				<el-date-picker
					v-if="queryType == '年'"
					v-model="queryDate"
					type="year"
					placeholder="查询年份"
					value-format="YYYY"
				>
				</el-date-picker>
				<el-button
					type="primary"
					icon="el-icon-search"
					@click="handleQuery"
				></el-button>
			</div>
		</el-header>
		<el-main id="elMain">
			<el-row :gutter="15">
				<el-col :lg="12">
					<el-card shadow="never" style="margin-bottom: 8px">
						<el-header>
							<div class="right-panel">
								<h2>产品交付统计</h2>
								<xtSelect
									:apiObj="apiObjMaterial"
									:params = "paramsMaterial"
									v-model="materialSale"
									v-model:label="materialName"
									v-model:obj="materialItem"
									@change="materialSaleChange"
								>
									<el-table-column type="index" width="50" />
									<el-table-column label="名称" prop="name"></el-table-column>
									<el-table-column label="规格" prop="specification"></el-table-column>
									<el-table-column label="型号" prop="model"></el-table-column>
									<el-table-column label="库存" prop="count"></el-table-column>
								</xtSelect>
								<!-- <el-select
									v-model="materialSale"
									clearable
									@change="materialSaleChange"
								>
									<el-option
										v-for="item in inmData"
										:key="item.id"
										:label="item.material_.name"
										:value="item.id"
									>
									</el-option>
								</el-select> -->
							</div>
						</el-header>
						<el-row>
							<el-col>
								<div
									id="bachart1"
									style="width: 100%; height: 300px"
								></div>
							</el-col>
							<el-card
								shadow="never"
								style="
									width: 100%;
									position: relative;
									margin-top: 20px;
								"
							>
								<el-button
									@click="handleExport('1')"
									class="tables"
									type="primary"
									>导出</el-button
								>
								<el-table
									:data="tableData1"
									id="exportDiv1"
									:height="tableHeight"
								>
									<el-table-column type="index" width="50" />
									<el-table-column
										label="年份"
										prop="年"
										width="80"
									/>
									<el-table-column
										v-if="queryType == '月'"
										width="50"
										label="周"
										prop="周"
									/>
									<el-table-column
										v-else
										width="50"
										label="月份"
										prop="月"
									/>
									<el-table-column label="名称" prop="物料名">
									</el-table-column>
									<el-table-column label="规格" prop="规格">
									</el-table-column>
									<el-table-column label="型号" prop="型号">
									</el-table-column>
									<el-table-column label="数量" prop="count">
									</el-table-column>
								</el-table>
							</el-card>
						</el-row>
					</el-card>
				</el-col>
				<el-col :lg="12">
					<el-card shadow="never" style="margin-bottom: 8px">
						<el-container>
							<el-header>
								<div class="right-panel">
									<h2>交付统计总表</h2>
								</div>
							</el-header>
							<el-main style="width: 100%; position: relative">
								<el-button
									@click="handleExport('2')"
									class="tables"
									type="primary"
									>导出</el-button
								>

								<scTable
									:data="tableData2"
									id="exportDiv2"
									:height="rightHeight"
									hideDo
									hidePagination
								>
									<el-table-column type="index" width="50" />
									<el-table-column
										label="年份"
										prop="年"
										width="80"
									/>
									<el-table-column
										v-if="queryType == '月'"
										width="50"
										label="周"
										prop="周"
									/>
									<el-table-column
										v-else
										width="50"
										label="月份"
										prop="月"
									/>
									<el-table-column label="名称" prop="物料名">
									</el-table-column>
									<el-table-column label="规格" prop="规格">
									</el-table-column>
									<el-table-column label="型号" prop="型号">
									</el-table-column>
									<el-table-column label="数量" prop="数量">
									</el-table-column>
								</scTable>
							</el-main>
						</el-container>
					</el-card>
				</el-col>
			</el-row>
		</el-main>
	</el-container>
</template>

<script>
import * as echarts from "echarts";
import T from "@/components/scEcharts/echarts-theme-T.js";
echarts.registerTheme("T", T);
function deepCopy(obj) {
	return JSON.parse(JSON.stringify(obj));
}
export default {
	name: "chart",
	data() {
		return {
			queryType: "月",
			queryDate: "",
			start_date: "",
			end_date: "",
			currentYear: "",
			currentMonth: "",
			materialName: "",
			xAxisOrigin: [],
			xAxisData: [],
			typeOptions: ["月", "年"],
			basicOption: {
				backgroundColor: "transparent",
				title: {
					text: "",
				},
				grid: {
					top: "80px",
				},
				tooltip: {
					trigger: "axis",
				},
				xAxis: {
					type: "category",
					data: [],
				},
				yAxis: {
					type: "value",
				},
				lenged: [],
				series: [
					{
						data: [0, 0, 0, 0, 0, 0, 0],
						stack: "Ad",
						type: "bar",
						barWidth: "15px",
					},
				],
			},
			materialSale: "",
			saleOption: [],
			tableHeight: 0,
			rightHeight: 0,
			tableData1: [],
			tableData2: [],
			firstWeekNum: 1,
			endWeekNum: 4,
			monthList: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
			materialItem:{},
			paramsMaterial:{type__in : "10"},
			apiObjMaterial:this.$API.mtm.material.list,
		};
	},
	mounted() {
		let that = this;
		let date = new Date();
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let days = new Date(year, month, 0).getDate();
		that.currentYear = year;
		that.currentMonth = month;
		that.firstWeekNum = that.getWeekOfYear(year,month,1);
		that.endWeekNum = that.getWeekOfYear(year,month,days);
		month = month < 10 ? "0" + month : month;
		that.start_date = year + "-" + month + "-01";
		that.end_date =year + "-" + month + "-" + days;
		that.queryDate = year + "-" + month;
		let duration = that.endWeekNum - that.firstWeekNum + 1;
		for (let i = 1; i <= duration; i++) {
			that.xAxisOrigin.push("第" + i + "周");
		}
		that.xAxisData = that.xAxisOrigin;
		let height = document.getElementById("elMain").clientHeight;
		let chartheight = document.getElementById("bachart1").clientHeight;
		that.tableHeight = height - 140 - chartheight;
		that.rightHeight = height - 115;
		that.getTable();
		that.setChart("bachart1", that.basicOption);
		// this.getSaleOption();
	},
	methods: {
		setChart(name, option = null) {
			// 根据name 渲染数据, option需填写，否则option为模拟数据
			var myChart = echarts.getInstanceByDom(document.getElementById(name));
			if (myChart != null) {
				myChart.dispose(); // 销毁之前的实例
			}
			myChart = echarts.init(document.getElementById(name), "T");
			if (option == null) {
				option = Object.assign({}, this.basicOption);
			}
			setTimeout(() => {
				try {
					myChart.setOption(option);
				} catch (error) {}
			}, 500);
		},
		queryTypeChange(value) {
			console.log(value);
			this.queryDate = "";
		},
		getWeekOfYear(a,b,c) {
			var date1 = new Date(a, parseInt(b) - 1, c), //当前日期  
            date2 = new Date(a, 0, 1), //当年第一天  
            // d是当前日期是今年第多少天  
            d = Math.round((date1.valueOf() - date2.valueOf()) / 86400000);
            // d + 当前年的第一天的周差距的和在除以7就是本年第几周  
            return Math.ceil((d + (date2.getDay() + 1 - 1)) / 7);
		},
		materialSaleChange() {
			this.getSaleData();
		},
		//交付物料选项
		getSaleOption() {
			let that = this;
			let obj = {};
			obj.page = 0;
			obj.type__in = "10";
			that.$API.mtm.material.list.req(obj).then((res) => {
				that.saleOption = res;
			});
		},
		//交付物料
		getSaleData() {
			let that = this;
			let exec = that.queryType == "月" ? "saleOutWeek" : "saleOutMonth";
			let obj = {
				query: {
					start_date: that.start_date,
					end_date: that.end_date,
					mio_type: "sale_out",
					material_id: that.materialSale,
				},
			};
			that.$API.bi.dataset.exec.req(exec, obj).then((res) => {
				if (res.data2.ds0&&res.data2.ds0.length>0) {
					that.tableData1 = res.data2.ds0;
					that.setChartData(res.data2.ds0);
				}else{
					let option = deepCopy(that.basicOption);
					option.xAxis.data = that.xAxisData;
					that.setChart("bachart1",option);
				}
			});
		},
		getTable() {
			let that = this;
			let obj = {
				query: {
					start_date: that.start_date,
					end_date: that.end_date,
					mio_type: "sale_out",
				},
			};
			let exec = that.queryType == "月" ? "saleOutWeek" : "saleOutMonth";
			that.$API.bi.dataset.exec.req(exec, obj).then((res) => {
				that.tableData2 = [];
				if (res.data2.ds0) {
					let data = res.data2.ds0;
					that.tableData1 = data;
					that.tableData2 = data;
					that.setChartData(data);
				}
			});
		},
		handleQuery() {
			let that = this;
			if (this.queryType == "月") {
				if (this.queryDate !== "" && this.queryDate !== null) {
					let arr = that.queryDate.split("-");
                    let year = arr[0];
                    let month = arr[1];
                    let days = new Date(year, month, 0).getDate();
					that.start_date = that.queryDate + "-01";
					that.end_date =that.queryDate +"-" +days;
					that.firstWeekNum = that.getWeekOfYear(year,month,1);
					that.endWeekNum = that.getWeekOfYear(year,month,days);
					let duration = that.endWeekNum - that.firstWeekNum + 1;
					let xAxisData = [];
					for (let i = 1; i <= duration; i++) {
						xAxisData.push("第" + i + "周");
					}
					that.xAxisData = xAxisData;
				} else {
					that.start_date =that.currentYear + "-" + that.currentMonth + "-01";
					that.end_date =that.currentYear +"-" +that.currentMonth +"-" +new Date(that.currentYear,that.currentMonth,0).getDate();
					that.firstWeekNum = that.getWeekOfYear(that.currentYear,that.currentMonth,1);
					that.xAxisData = that.xAxisOrigin;
				}
			} else {
				if (that.queryDate !== "" && that.queryDate !== null) {
					that.start_date = that.queryDate + "-01-01";
					that.end_date = that.queryDate + "-12-31";
				} else {
					that.start_date = that.currentYear + "-01-01";
					that.end_date = that.currentYear + "-12-31";
				}
				that.xAxisData = that.monthList;
			}
			that.getTable();
			if (that.materialSale !== "" && that.materialSale !== null) {
				that.getSaleData();
			}
		},
		setChartData(data){
			let that = this;
			let option = deepCopy(that.basicOption);
			option.xAxis.data = that.xAxisData;
			option.series=[];
			let materials = [],seriesData = [];
			data.forEach((item) => {
				if(materials.indexOf(item.物料名) == -1){
					materials.push(item.物料名);
				}
			})
			materials.forEach((item) => {
				let obj = {};
				obj.name = item;
				obj.type = "bar";
				obj.stack = "Ad";
				obj.barWidth = "15px";
				obj.data = [0,0,0,0,0,0,0,0,0,0,0,0];
				seriesData.push(obj);
			})
			data.forEach((item) => {
				let index = 0;let indexY = 0;
				if (that.queryType == "月") {
					index = item.周 - that.firstWeekNum;
				} else {
					index = item.月 - 1;
				}
				indexY  = materials.indexOf(item.物料名);
				seriesData[indexY].data[index] = item.数量;
			});
			option.series = seriesData;
			that.setChart("bachart1", option);
		},
		handleExport(val) {
			this.exportLoading = true;
			let id = "#exportDiv" + val;
			let name = val == "1" ? "交付统计" : "交付统计总表";
			this.$XLSX(id, name);
			this.exportLoading = false;
		},
	},
};
</script>

<style scoped>
.tables {
	position: absolute;
	top: 4px;
	right: 6px;
	z-index: 10;
}
</style>
