<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" id="elCol">
				<el-col :lg="8">
					<el-card shadow="never">
						<scEcharts height="300px" :option="option1"></scEcharts>
					</el-card>
				</el-col>
				<el-col :lg="8">
					<el-card shadow="never">
						<scEcharts height="300px" :option="option2"></scEcharts>
					</el-card>
				</el-col>
				<el-col :lg="8">
					<el-card shadow="never">
						<scEcharts height="300px" :option="option3"></scEcharts>
					</el-card>
				</el-col>
			</el-row>
			<el-row :gutter="10">
				<el-col :lg="8">
					<el-card shadow="never" style="position: relative">
						<el-button
							@click="handleExport('7')"
							class="tables"
							type="primary"
							>导出</el-button
						>
						<el-table
							:data="tableData1"
							id="exportDiv7"
							:height="tableHeight"
						>
							<el-table-column type="index" width="50" />
							<el-table-column
								label="任务编号"
								prop="number"
								min-width="100px"
							>
							</el-table-column>
							<el-table-column label="计划数" prop="count">
							</el-table-column>
							<el-table-column label="完成数" prop="count_ok">
							</el-table-column>
							<el-table-column label="完成率" prop="rate">
							</el-table-column>
						</el-table>
					</el-card>
				</el-col>
				<el-col :lg="8">
					<el-card shadow="never" style="position: relative">
						<el-button
							@click="handleExport('10')"
							class="tables"
							type="primary"
							>导出</el-button
						>
						<el-table
							:data="tableData2"
							id="exportDiv10"
							:height="tableHeight"
						>
							<el-table-column type="index" width="50" />
							<el-table-column
								label="任务编号"
								prop="number"
								min-width="100px"
							>
							</el-table-column>
							<el-table-column label="计划数" prop="count">
							</el-table-column>
							<el-table-column label="完成数" prop="count_ok">
							</el-table-column>
							<el-table-column label="完成率" prop="rate">
							</el-table-column>
						</el-table>
					</el-card>
				</el-col>
				<el-col :lg="8">
					<el-card shadow="never" style="position: relative">
						<el-button
							@click="handleExport('6')"
							class="tables"
							type="primary"
							>导出</el-button
						>
						<el-table
							:data="tableData3"
							id="exportDiv6"
							:height="tableHeight"
						>
							<el-table-column type="index" width="50" />
							<el-table-column
								label="任务编号"
								prop="number"
								min-width="100px"
							>
							</el-table-column>
							<el-table-column label="计划数" prop="count">
							</el-table-column>
							<el-table-column label="完成数" prop="count_ok">
							</el-table-column>
							<el-table-column label="完成率" prop="rate">
							</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: ["月", "年"],
			option1: {
				title: {
					text: "7车间完成率",
				},
				tooltip: {
					trigger: "item",
				},
				legend: {
					top: "3",
					right: "3%",
				},
				color: ["rgb(64,158,255)", "orange"],
				series: {
					name: "7车间完成率",
					type: "pie",
					radius: ["40%", "70%"],
					center: ["50%", "60%"],
					label: {
						show: true,
						position: "outside",
						formatter: "{b} : {c} ({d}%)",
					},
					data: [
						{ value: 0, name: "已完成" },
						{ value: 0, name: "未完成" },
					],
				},
			},
			option2: {
				title: {
					text: "10车间完成率",
					// subtext: '',
				},
				tooltip: {
					trigger: "item",
				},
				legend: {
					top: "3",
					right: "3%",
				},
				color: ["rgb(64,158,255)", "orange"],
				series: {
					name: "10车间完成率",
					type: "pie",
					radius: ["40%", "70%"],
					center: ["50%", "60%"],
					label: {
						show: true,
						position: "outside",
						formatter: "{b} : {c} ({d}%)",
					},
					data: [
						{ value: 0, name: "已完成" },
						{ value: 0, name: "未完成" },
					],
				},
			},
			option3: {
				title: {
					text: "6车间完成率",
				},
				tooltip: {
					trigger: "item",
				},
				legend: {
					top: "3",
					right: "3%",
				},
				color: ["rgb(64,158,255)", "orange"],
				series: {
					name: "6车间完成率",
					type: "pie",
					radius: ["40%", "70%"],
					center: ["50%", "60%"],
					label: {
						show: true,
						position: "outside",
						formatter: "{b} : {c} ({d}%)",
					},
					// labelLayout: {
					// 	verticalAlign: "bottom",
					// 	// dy: 10,
					// 	align: "left",
					// 	dx: -10,
					// },
					// labelLine: {
					// 	// length: 10,
					// 	// length2: 30,
					// 	lineStyle: {
					// 		color: 'rgb(64,158,255)',
					// 		type: "dashed",
					// 	},
					// },
					data: [
						{ value: 0, name: "已完成" },
						{ value: 0, name: "未完成" },
					],
				},
			},
			tableData1: [],
			tableData2: [],
			tableData3: [],
		};
	},
	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();
		this.currentYear = year;
		this.currentMonth = month > 9 ? month : "0" + month;
		this.start_date = year + "-" + month + "-01";
		this.end_date =
			year + "-" + month + "-" + new Date(year, month, 0).getDate();
		let month1 = month > 9 ? month : "0" + month;
		this.queryDate = year + "-" + month1;
		let height = document.getElementById("elMain").clientHeight - 40;
		let chartheight = document.getElementById("elCol").clientHeight;
		that.tableHeight = height - chartheight;
		this.getData6();
		this.getData7();
		this.getData10();
	},
	methods: {
		queryTypeChange() {
			this.queryDate = "";
		},
		getData7() {
			let that = this;
			that.tableData1 = [];
			that.option1.series.data[0].value = 0;
			that.option1.series.data[1].value = 0;
			let obj = {};
			obj.page = 0;
			obj.mgroup__belong_dept__name = "7车间";
			obj.start_date__gte = this.start_date;
			obj.end_date__lte = this.end_date;
			that.$API.pm.utask.list.req(obj).then((res) => {
				console.log("utask:", res);
				let data = [];
				let count_ok1 = 0;
				let count_notok1 = 0;
				if (res.length > 0) {
					res.forEach((item) => {
						let obj = item;
						obj.rate =
							Math.round((item.count_ok / item.count) * 100) +
							"%";
						if (item.count_ok >= item.count) {
							count_ok1++;
						} else {
							count_notok1++;
						}
						data.push(obj);
					});
					that.tableData1 = data;
					that.option1.series.data[0].value = count_ok1;
				}
				this.option1.series.data[0].value = count_ok1;
				this.option1.series.data[1].value = count_notok1;
			});
		},
		async getData10() {
			let that = this;
			that.tableData2 = [];
			that.option2.series.data[0].value = 0;
			that.option2.series.data[1].value = 0;
			let obj = {};
			obj.page = 0;
			obj.mgroup__belong_dept__name = "10车间";
			obj.start_date__gte = this.start_date;
			obj.end_date__lte = this.end_date;
			await that.$API.pm.utask.list.req(obj).then((res) => {
				console.log("utask:", res);
				let data = [];
				let count_ok2 = 0;
				let count_notok2 = 0;
				if (res.length > 0) {
					res.forEach((item) => {
						let obj = item;
						obj.rate =
							Math.round((item.count_ok / item.count) * 100) +
							"%";
						if (item.count_ok >= item.count) {
							count_ok2++;
						} else {
							count_notok2++;
						}
						data.push(obj);
					});
					that.tableData2 = data;
					that.option2.series.data[0].value = count_ok2;
					that.option2.series.data[1].value = count_notok2;
				}
			});
		},
		async getData6() {
			let that = this;
			that.tableData3 = [];
			that.option3.series.data[0].value = 0;
			that.option3.series.data[1].value = 0;
			let obj = {};
			obj.page = 0;
			obj.mtask_utask__mgroup__belong_dept__name = "6车间";
			obj.start_date__gte = this.start_date;
			obj.end_date__lte = this.end_date;
			await that.$API.pm.utask.list.req(obj).then((res) => {
				console.log("utask:", res);
				let data = [];
				let count_ok3 = 0;
				let count_notok3 = 0;
				if (res.length > 0) {
					res.forEach((item) => {
						let obj = item;
						obj.rate =
							Math.round((item.count_ok / item.count) * 100) +
							"%";
						if (item.count_ok >= item.count) {
							count_ok3++;
						} else {
							count_notok3++;
						}
						data.push(obj);
					});
					that.tableData3 = data;
					that.option3.series.data[0].value = count_ok3;
					that.option3.series.data[1].value = count_notok3;
				}
			});
		},
		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();
			this.getData7();
			this.getData10();
		},
		handleExport(val) {
			this.exportLoading = true;
			let id = "#exportDiv" + val;
			let name = val + "车间完成率";
			this.$XLSX(id, name);
			this.exportLoading = false;
		},
	},
};
</script>

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