<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"
					style="width: 100%"
				>
				</el-date-picker>
				<el-date-picker
					v-if="queryType == '年'"
					v-model="queryDate"
					type="year"
					placeholder="查询年份"
					value-format="YYYY"
					style="width: 100%"
				>
				</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="10">
				<el-col :lg="12">
					<el-card shadow="never">
						<scEcharts id="bachart1" height="300px" :option="option"></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"
							:height="tableHeight"
							id="exportDiv"
							:summary-method="getSummaries" 
							show-summary
						>
							<el-table-column type="index" width="50" />
							<el-table-column label="工段" prop="工段" 
								:filters="mgroupFilters"
								:filter-method="filterMgroup"
								filter-placement="bottom-end">
							</el-table-column>
							<el-table-column label="物料名" prop="物料名" min-width="100" 
								:filters="nameFilters"
								:filter-method="filterName"
								filter-placement="bottom-end">
							</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="不合格数">
							</el-table-column>
							<el-table-column label="完成进度" prop="完成进度">
								<template #default="scope">
									<span v-if="scope.row.完成进度&&scope.row.完成进度>0">{{(scope.row.完成进度).toFixed(2)}}%</span>
									<span v-else>{{scope.row.完成进度}}</span>
								</template>
							</el-table-column>
							<el-table-column label="合格率" prop="合格率">
								<template #default="scope">
									<span v-if="scope.row.合格率&&scope.row.合格率>0">{{(scope.row.合格率).toFixed(2)}}%</span>
									<span v-else>{{scope.row.合格率}}</span>
								</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 {
			tableHeight: 0,
			queryType: "月",
			queryDate: "",
			start_date: "",
			end_date: "",
			currentYear: "",
			currentMonth: "",
			typeOptions: ["月", "年"],
			option: {
				title: {
					text: "生产数量",
				},
				grid: {
					top: "80px",
				},
				tooltip: {
					trigger: "axis",
				},
				xAxis: {
					type: "category",
					data: [],
				},
				yAxis: {
					type: "value",
				},
				series: [],
			},
			nameFilters: [],
			mgroupFilters: [],
			processData: [],
			xAxisData: [],
			tableData: [],
		};
	},
	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;
		month = month > 9 ? month : "0" + month;
		that.start_date = year + "-" + month + "-01";
		that.end_date =year + "-" + month + "-" + days;
		that.queryDate = year + "-" + month;
		let height = document.getElementById("elMain").clientHeight - 40;
		that.tableHeight = height;
		document.getElementById('bachart1').style.height = height + 'px';
		that.getData6();
	},
	methods: {
		queryTypeChange(value) {
			console.log(value);
			this.queryDate = "";
		},
		getData6() {
			let that = this;
			that.nameFilters = [];
			that.mgroupFilters = [];
			let obj = {
				query: {
					start_date: this.start_date,
					end_date: this.end_date,
					dept_name: "6车间",
					select_cols_material: "",
					group_bys_material: "",
					order_bys_material: "",
					is_count_utask: -1,
					select_cols_mgroup: ", mgroup.name AS 工段",
					group_bys_mgroup: ", mgroup.name",
					order_bys_mgroup:",工段"
				},
				raise_exception: true,
			};
			if (that.queryType == "月") {
				obj.query.select_cols_date =
					",EXTRACT ( MONTH FROM mlog.handle_date ) AS 月";
				obj.query.group_bys_date =
					",EXTRACT ( MONTH FROM mlog.handle_date )";
				obj.query.order_bys_date = ", 月";
			}
			let xAxisData = [],nameData=[],seriesData=[];
			that.$API.bi.dataset.exec.req("lineWeek", obj).then((res) => {
				let data = res.data2.ds0;
				that.tableData = data;
				data.forEach((item) => {
					if (xAxisData.indexOf(item.工段) > -1) {
					} else {
						xAxisData.push(item.工段);
						let obj = {};
						obj.text = item.工段;
						obj.value = item.工段;
						that.mgroupFilters.push(obj);
					}
					if (nameData.indexOf(item.物料名) > -1) {
					} else {
						let obj0 = {};
						obj0.text = item.物料名;
						obj0.value = item.物料名;
						that.nameFilters.push(obj0);
						nameData.push(item.物料名);
						let obj = {
							name:'',
							type: "bar",
							label:{
								show: true,
								position: "top",
								formatter: "{c}",
								color: "rgb(64,158,255)",
							},
							barWidth: "15px",
							data:[0, 0, 0, 0, 0, 0, 0, 0],
						};
						obj.name=item.物料名,
						seriesData.push(obj);
					}
					let index = xAxisData.indexOf(item.工段);
					let indexY = nameData.indexOf(item.物料名);
					seriesData[indexY].data[index] += item.合格数;
				});
				that.xAxisData = xAxisData;
				that.option.xAxis.data = that.xAxisData;
				that.option.series = seriesData;
			});
		},
		handleQuery() {
			if (this.queryDate !== "" && this.queryDate !== null) {
				if (this.queryType == "月") {
					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.queryDate + "-01-01";
					this.end_date = this.queryDate + "-12-31";
				}
			} else {
				if (this.queryType == "月") {
					this.start_date =
						this.currentYear + "-" + this.currentMonth + "-01";
					this.end_date =
						this.currentYear +
						"-" +
						this.currentMonth +
						"-" +
						new Date(
							this.currentYear,
							this.currentMonth,
							0
						).getDate();
				} else {
					this.start_date = this.currentYear + "-01-01";
					this.end_date = this.currentYear + "-12-31";
				}
			}
			this.getData6();
		},
		getSummaries({ columns, data }) {
			const sums = [];
			columns.forEach((column, index) => {
				if (index === 0) {
					sums[index] = "合计";
					return;
				}
				if (index == 3||index == 4||index == 5||index == 6) {
					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;
		},
		filterName(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: 6px;
	left: 4px;
	z-index: 10;
}
</style>
