<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>
				<el-button
					@click="handleExport"
					type="primary"
					>导出</el-button
				>
			</div>
		</el-header>
		<el-main id="elMain">
			<el-row :gutter="10">
				<el-col >
					<el-card shadow="never">
						<scEcharts id="bachart1" :option="option"></scEcharts>
					</el-card>
				</el-col>
				<el-col>
					<el-card shadow="never" style="position: relative">
						<el-table
							:data="tableData"
							:height="tableHeight"
							id="exportDiv"
						>
							<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="领用数">
							</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>{{(scope.row.合格率).toFixed(2)}}%</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: {
				color: ["rgb(64,158,255)", "rgb(54,206,158)", "rgb(254,110,106)", "rgb(250,200,88)"],
				title: {
					text: "生产数量",
				},
				grid: {
					top: "80px",
				},
				tooltip: {
					trigger: "axis",
				},
				xAxis: {
					type: "category",
					data: ['外协白片抛','扫边A','黑化','退火','减薄A','减薄B','平磨','精雕','外协出司检','外协一次抛','磨抛一次抛','外扫','扫边B','倒角','成品抛','一次超洗','尺寸检验','二次超洗','外观检验','三次超洗'],
				},
				yAxis: [
					{
						type: 'value',
						name: '数量',
						axisLine: {
							lineStyle: {
								color: '#fff',
							}
						},
						axisLabel: {
							fontSize: 10,
							color: '#fff',
						},
					},
					{
						type: "value",
						name: "合格率",
						position: "right",
						alignTicks: true,
						offset: 0,
						axisLine: {
							lineStyle: {
								fontSize: 8,
								color: "rgb(250,200,88)",
							},
						},
						axisLabel: {
							formatter: "{value}",
						},
					}
				],
				series: [
					{
						name:'生产数',
						type: "bar",
						yAxisIndex: 0,
						barWidth: "15px",
						label:{
							show: true,
							position: "top",
							formatter: "{c}",
							color: "rgb(64,158,255)",
						},
						itemStyle: {
							borderRadius: [5, 5, 1, 1],
						},
						data:[],
					},
					{
						name:'合格数',
						type: "bar",
						yAxisIndex: 0,
						barWidth: "15px",
						label:{
							show: true,
							position: "right",
							formatter: "{c}",
							color: "rgb(54,206,158)",
						},
						itemStyle: {
							borderRadius: [5, 5, 1, 1],
						},
						data:[],
					},
					{
						name:'不合格数',
						type: "bar",
						yAxisIndex: 0,
						barWidth: "15px",
						label:{
							show: true,
							position: "right",
							formatter: "{c}",
							color: "rgb(254,110,106)",
						},
						itemStyle: {
							borderRadius: [5, 5, 1, 1],
						},
						data:[],
					},
					{
						name:'合格率',
						type: "line",
						yAxisIndex: 1,
						label:{
							show: true,
							position: "top",
							formatter: "{c}",
							color: "rgb(250,200,88)",
						},
						data:[],
					},
				],
			},
			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 - 60;
		that.tableHeight = height/3*2;
		document.getElementById('bachart1').style.height = height/3 + 'px';
		that.getData();
	},
	methods: {
		queryTypeChange(value) {
			console.log(value);
			this.queryDate = "";
		},
		getData() {
			let that = this;
			that.nameFilters = [];
			that.mgroupFilters = [];
			let obj = {
				query: {
					start_date: that.start_date,
					end_date: that.end_date,
					mgroup_name: "",
				},
				raise_exception: true,
			};
			let xAxisData = [];
			that.$API.bi.dataset.exec.req("mlog_okrate", obj).then((res) => {
				let data = res.data2.ds0;
				that.tableData = data;
				data.forEach((item) => {
					let indexs = xAxisData.indexOf(item.工段); //判断是否已存在
					if (indexs> -1) {} else {
						indexs = xAxisData.length;
						xAxisData.push(item.工段);
						that.option.series[0].data[indexs] = item.生产数;
						that.option.series[1].data[indexs] = item.合格数;
						that.option.series[2].data[indexs] = item.不合格数;
						that.option.series[3].data[indexs] = item.合格率.toFixed(2);
					}
				});
				console.log('that.option',that.option);
				console.log('xAxisData',xAxisData);
				that.xAxisData = xAxisData;
				that.option.xAxis.data = xAxisData;
			});
		},
		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.getData();
		},
		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>
