<template>
	<el-container>
		<el-header>
			<div class="right-panel">
				<el-select
					v-model="queryBelongDept"
					clearable
					style="width: 200px"
					placeholder="请选择部门"
				>
					<el-option
						v-for="item in deptData"
						:key="item.id"
						:label="item.name"
						:value="item.name"
					>
					</el-option>
				</el-select>
				<el-date-picker
					v-model="queryDate"
					type="month"
					placeholder="查询月期"
					value-format="YYYY-MM"
					style="width: 200px"
				>
				</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" style="height: 100%">
				<el-col :lg="12">
					<el-card shadow="never">
						<scEcharts
							:height="chartHeight"
							:option="option"
							id="chartHeight"
						></scEcharts>
					</el-card>
				</el-col>
				<el-col :lg="12">
					<el-card shadow="never" style="position: relative">
						<el-button
							@click="handleExport"
							class="tables"
							type="primary"
							>导出</el-button
						>
						<el-table
							:data="tableData"
							id="exportDiv"
							style="width: 100%"
							:height="chartHeight"
							:summary-method="getSummaries" 
							show-summary
						>
							<el-table-column type="index" width="50" />
							<el-table-column label="日期" prop="date" width="90">
								<template #default="scope">
									{{ scope.row.年 }}-{{ scope.row.月 }}
								</template>
							</el-table-column>
							<el-table-column label="操作人" prop="操作人" width="90" 
							:filters="userFilters"
							:filter-method="filterUser"
							filter-placement="bottom-end">
							</el-table-column>
							<el-table-column label="工段" prop="工段" width="80" 
							:filters="mgroupFilters"
							:filter-method="filterMgroup"
							filter-placement="bottom-end">
							</el-table-column>
							<el-table-column label="车间">
								{{ queryBelongDept }}
							</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>
							<el-table-column label="合格率" prop="合格率">
								<template #default="scope">
									{{ Math.round(scope.row.合格率) }}%
								</template>
							</el-table-column>
						</el-table>
					</el-card>
				</el-col>
			</el-row>
		</el-main>
	</el-container>
</template>

<script>
import scEcharts from "@/components/scEcharts";
export default {
	name: "chart",
	components: {
		scEcharts,
	},
	data() {
		return {
			queryBelongDept: "",
			queryDate: "",
			start_date: "",
			end_date: "",
			currentYear: "",
			currentMonth: "",
			deptData: [],
			tableData: [],
			dateFilters:[],
			userFilters:[],
			mgroupFilters:[],
			option: {
				title: {
					text: "人员统计",
					// subtext: '',
				},
				grid: {
					top: "80px",
				},
				tooltip: {
					trigger: "axis",
				},
				xAxis: {
					type: "value",
					position: "top",
					axisLine: {
						show: true,
					},
				},
				yAxis: {
					type: "category",
					data: [],
				},
				series: {
					data: [],
					type: "bar",
					barWidth: "15px",
				},
			},
			chartHeight: 0,
		};
	},
	mounted() {
		let date = new Date();
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let days = new Date(year, month, 0).getDate();
		this.currentYear = year;
		this.currentMonth = month;
		this.start_date = year + "-" + month + "-01";
		this.end_date =year + "-" + month + "-" + days;
		month = month < 10 ? "0" + month : month;
		this.queryDate = year + "-" + month;
		this.getDept();
		let mainHeight = document.getElementById("elMain").clientHeight;
		this.chartHeight = mainHeight - 40 + "px";
	},
	methods: {
		getDept() {
			let that = this;
			this.$API.system.dept.list.req({ page: 0, type: "dept" }).then((res) => {
				that.deptData = res;
				that.queryBelongDept = res[0].name;
				that.getData();
			});
		},
		queryTypeChange(value) {
			this.queryDate = "";
		},
		getData() {
			let that = this;
			that.userFilters = [];
			that.mgroupFilters = [];
			let userList=[],mgroupList=[];
			let obj = {
				query: {
					start_date: this.start_date,
					end_date: this.end_date,
					dept_name: this.queryBelongDept,
				},
			};
			that.$API.bi.dataset.exec.req("performance", obj).then((res) => {
				let data = res.data2.ds0;
				let seriesData = [],
					yAxisData = [];
				data.forEach((item) => {
					seriesData.push(item.合格数);
					yAxisData.push(item.操作人 + "∙" + item.工段);
					if(userList.indexOf(item.操作人)>-1){}else{
						userList.push(item.操作人);
						let obj2 = {};
						obj2.text = item.操作人;
						obj2.value = item.操作人;
						that.userFilters.push(obj2);
					}
					if(mgroupList.indexOf(item.工段)>-1){}else{
						mgroupList.push(item.工段);
						let obj3 = {};
						obj3.text = item.工段;
						obj3.value = item.工段;
						that.mgroupFilters.push(obj3);
					}
				});
				that.tableData = data;
				that.option.yAxis.data = yAxisData;
				that.option.series.data = seriesData;
			});
		},
		handleQuery() {
			if (this.queryDate !== "") {
				this.start_date = this.queryDate + "-01";
				let arr = this.queryDate.split("-");
				this.end_date =
					this.queryDate +
					"-" +
					new Date(arr[0], arr[1], 0).getDate();
			} else {
				this.start_date =
					this.currentYear + "-" + this.currentMonth + "-01";
				this.end_date =
					this.currentYear +
					"-" +
					this.currentMonth +
					"-" +
					new Date(this.currentYear, this.currentMonth, 0).getDate();
			}
			console.log("查询query", this.start_date, this.end_date);
			this.getData();
		},
		getSummaries({ columns, data }) {
			const sums = [];
			columns.forEach((column, index) => {
				if (index === 0) {
					sums[index] = "合计";
					return;
				}
				if (index == 5||index == 6||index == 7) {
					const values = data.map((item) =>
						Number(item[column.property])
					);
					if (!values.every((value) => Number.isNaN(value))) {
						sums[index] = values.reduce((prev, curr) => {
							const value = Number(curr); //Number转换为数值
							let sum = Number(
								Number(prev) + Number(curr)
							).toFixed(2); //toFixed(2)数据项保留两位小数
							if (!isNaN(value)) {
								return sum;
							} else {
								return prev;
							}
						}, 0);
					} 
				}
			});
			return sums;
		},
		filterUser(value, row) {
            return row.操作人 === value;
        },
		filterMgroup(value, row) {
            return row.工段 === value;
        },
		handleExport() {
			this.exportLoading = true;
			this.$XLSX("#exportDiv", "人员统计");
			this.exportLoading = false;
		},
	},
};
</script>

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