<template>
	<div>
		<scEcharts height="300px" :option="option" style="margin-top: 10px;"></scEcharts>
		<el-table :data="tableData" class="exportTables">
			<el-table-column type="index" width="50" />
			<el-table-column label="工段" prop="工段">
			</el-table-column>
			<el-table-column
				label="物料名"
				prop="物料名"
				min-width="100"
			>
			</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>
	</div>
</template>

<script>
import scEcharts from "@/components/scEcharts";
export default {
	name: "all_sc_gx",
	components: {
		scEcharts,
	},
	props: {
	    queryType:{
			type: String,
			default: "月"
		},
		queryDate:{
		    type: String,
			default: ""
		},
		start_date:{
			 type: String,
			default: ""
		},
		end_date:{
			 type: String,
			default: ""
		},
	},
	data() {
		return {
			currentYear: "",
			currentMonth: "",
			typeOptions: ["月", "年"],
			option: {
				title: {
					text: "6车间工序合格数统计",
					left: "center",
				},
				grid: {
					top: "80px",
				},
				tooltip: {
					trigger: "axis",
				},
				legend: {
					top: "10%",
                    icon: "stack",
					right:'10%',
				},
				xAxis: {
					type: "category",
					data: [],
				},
				yAxis: {
					type: "value",
				},
				series: [],
			},
			processData: [],
			xAxisData: [],
			tableData: [],
		};
	},
	mounted() {
		let that = this;
		that.$nextTick(() => {
		    that.getData6();
		})
	},
	methods: {
		getData6() {
			let that = this;
			let obj = {
				query: {
					start_date: that.start_date,
					end_date: that.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.工段);
					}
					if (nameData.indexOf(item.物料名) > -1) {
					} else {
						nameData.push(item.物料名);
						let obj = {
							name:'',
							type: "bar",
							label:{
								show: true,
								position: "top",
								formatter: "{c}"
							},
							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;
			});
		},
	},
};
</script>

