<template>
	<div>
		<scEcharts height="300px" :option="option1" style="margin-top: 10px;"></scEcharts>
		<el-table :data="tableData1" class="exportTables">
			<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>
		<scEcharts height="300px" :option="option2" style="margin-top: 10px;"></scEcharts>
		<el-table :data="tableData2" class="exportTables">
			<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>
		<scEcharts height="300px" :option="option3" style="margin-top: 10px;"></scEcharts>
		<el-table :data="tableData3" class="exportTables">
			<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>
	</div>
</template>
<script>
import scEcharts from "@/components/scEcharts";
export default {
	name: "chart",
	components: {
		scEcharts,
	},
	props: {
	    queryType:{
			type: String,
			default: "月"
		},
		queryDate:{
		    type: String,
			default: ""
		},
		start_date:{
			 type: String,
			default: ""
		},
		end_date:{
			 type: String,
			default: ""
		},
	},
	data() {
		return {
			tableHeight: 0,
			currentYear: "",
			currentMonth: "",
			typeOptions: ["月", "年"],
			option1: {
				title: {
					text: "7车间任务完成进度",
                    left: 'center',
				},
				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车间任务完成进度",
                    left: 'center',
				},
				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车间任务完成进度",
                    left: 'center',
				},
				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}%)",
					},
					data: [
						{ value: 0, name: "已完成" },
						{ value: 0, name: "未完成" },
					],
				},
			},
			tableData1: [],
			tableData2: [],
			tableData3: [],
		};
	},
	mounted() {
		this.$nextTick(() => {
		    this.getData6();
			this.getData7();
			this.getData10();
		})
		
	},
	methods: {
		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 = that.start_date;
			obj.end_date__lte = that.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 = that.start_date;
			obj.end_date__lte = that.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 = that.start_date;
			obj.end_date__lte = that.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;
				}
			});
		},
	},
};
</script>

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