<template>
	<el-container>
		<el-header>
			<div class="right-panel">
				<el-select v-model="queryType" clearable @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>
			<el-card shadow="never" style="margin-bottom: 8px;">
				<el-row :gutter="15">
					<el-col :lg="8">
						<el-card shadow="never">
							<scEcharts height="300px" :option="option1"></scEcharts>
						</el-card>
					</el-col>
					<el-col :lg="16">
						<el-card shadow="never" style="position: relative;">
							<el-button @click="handleExport('ZJ')" class="tables" type="primary">导出</el-button>
							<el-table :data="tableData" id="exportDivZJ" :height="300">
								<el-table-column type="index" width="50" />
								<el-table-column label="批次号" prop="date">
								</el-table-column>
								<el-table-column label="规格" prop="name">
								</el-table-column>
								<el-table-column label="型号" prop="name">
								</el-table-column>
								<el-table-column label="合格数" prop="count_ok">
								</el-table-column>
								<el-table-column label="不合格原因及数量" align="center">
									<el-table-column label="炸纹" prop="count_n_zw">
									</el-table-column>
									<el-table-column label="条纹" prop="count_n_tw">
									</el-table-column>
									<el-table-column label="气泡" prop="count_n_qp">
									</el-table-column>
									<el-table-column label="弯曲" prop="count_n_wq">
									</el-table-column>
									<el-table-column label="其他" prop="count_n_qt">
									</el-table-column>
									<el-table-column label="合计" prop="count_n_qt">
									</el-table-column>
								</el-table-column>
							</el-table>
						</el-card>
					</el-col>
				</el-row>
			</el-card>
			<el-card shadow="never" style="margin-bottom: 8px;">
				<el-row :gutter="15">
					<el-col :lg="8">
						<el-card shadow="never">
							<scEcharts height="300px" :option="option2"></scEcharts>
						</el-card>
					</el-col>
					<el-col :lg="16">
						<el-card shadow="never" style="position: relative;">
							<el-button @click="handleExport('ZB')" class="tables" type="primary">导出</el-button>
							<el-table :data="tableData" id="exportDivZB" :height="300">
								<el-table-column type="index" width="50" />
								<el-table-column label="日期" prop="date">
								</el-table-column>
								<el-table-column label="规格" prop="name">
								</el-table-column>
								<el-table-column label="型号" prop="name">
								</el-table-column>
								<el-table-column label="合格数" prop="count_ok">
								</el-table-column>
								<el-table-column label="不合格原因及数量" align="center">
									<el-table-column label="椭圆/弯曲" prop="count_n_wq">
									</el-table-column>
									<el-table-column label="条纹" prop="count_n_tw">
									</el-table-column>
									<el-table-column label="断裂" prop="count_n_dl">
									</el-table-column>
									<el-table-column label="偏壁" prop="count_n_pb">
									</el-table-column>
									<el-table-column label="大小头" prop="count_n_dxt">
									</el-table-column>
									<el-table-column label="结石" prop="count_n_js">
									</el-table-column>
									<el-table-column label="气线" prop="count_n_qx">
									</el-table-column>
									<el-table-column label="合计" prop="count_n_qt">
									</el-table-column>
								</el-table-column>
							</el-table>
						</el-card>
					</el-col>
				</el-row>
			</el-card>
		</el-main>
	</el-container>
</template>

<script>
	import scEcharts from '@/components/scEcharts';
	export default {
		name: 'chart',
		components: {
			scEcharts
		},
		data() {
			return {
				queryType:'月',
				queryDate:'',
				start_date:'',
				end_date:'',
				currentYear:'',
				currentMonth:'',
				typeOptions:['月','年'],
				option1: {
					title: {
						text: '预制棒',
						// subtext: '',
					},
					tooltip: {
						trigger: 'item'
					},
					series: {
						name: '预制棒',
						type: 'pie',
						radius: ['40%', '70%'],
						center: ['50%', '60%'],
						label: false,
						data: [
							{ value: 0, name: '炸纹' },
							{ value: 0, name: '条纹' },
							{ value: 0, name: '气泡' },
							{ value: 0, name: '弯曲' },
							{ value: 0, name: '其他' },
							{ value: 0, name: '合格' },
						]
					}
				},
				option2: {
					title: {
						text: '预制管',
						// subtext: '',
					},
					tooltip: {
						trigger: 'item'
					},
					series: {
						name: '预制管',
						type: 'pie',
						radius: ['40%', '70%'],
						center: ['50%', '60%'],
						label: false,
						data: [
							{ value: 0, name: '椭圆弯曲' },
							{ value: 0, name: '大小头' },
							{ value: 0, name: '偏壁' },
							{ value: 0, name: '结石' },
							{ value: 0, name: '气线' },
							{ value: 0, name: '合格' },
						]
					}
				}
			}
		},
		mounted(){
			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;
			this.start_date =year+'-'+month+'-01';
			this.end_date = year+'-'+month+'-'+new Date(year, month, 0).getDate();
			this.queryDate = year+'-'+month;
			this.getData7();
			this.getData10();
		},
		methods:{
			queryTypeChange(value){
				console.log(value)
				this.queryDate = '';
				if(value=='月'){
					this.xAxisData = ['第一周','第二周','第三周','第四周'];
				}else{
					this.xAxisData = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
				}
				this.option1.xAxis.data = this.xAxisData;
				this.option2.xAxis.data = this.xAxisData;
			},
			//预制棒检验统计
			getData7(){
				let that = this;
				let obj = {
					query: { start_date: this.start_date, end_date: this.end_date, dept_name: "7车间" },
				};
				let exec = that.queryType=='月'?'lineWeek':'lineMonth';
				that.$API.bi.dataset.exec.req(exec, obj).then((res) => {
					console.log('7生产车间统计:', res);
					if (res.data2.ds0 && res.data2.ds0.length > 0) {
						let item = res.data2.ds0[0];
						that.yesterdayObjet = item;
						that.option1.series.data[0].value = item.炸纹;
						that.option1.series.data[1].value = item.条纹;
						that.option1.series.data[2].value = item.气泡;
						that.option1.series.data[3].value = item.弯曲;
						that.option1.series.data[4].value = item.其他;
						that.option1.series.data[5].value = item.合格数;
					} else { 
						that.option1.series.data[0].value = 0;
						that.option1.series.data[1].value = 0;
						that.option1.series.data[2].value = 0;
						that.option1.series.data[3].value = 0;
						that.option1.series.data[4].value = 0;
						that.option1.series.data[5].value = 0;
					}
				});
			},
			//预制管检验统计
			getData10(){
				let that = this;
				let obj = {
					query: { start_date: this.start_date, end_date: this.end_date, dept_name: "10·车间" },
				};
				let exec = that.queryType=='月'?'lineWeek':'lineMonth';
				that.$API.bi.dataset.exec.req(exec, obj).then((res) => {
					console.log('10生产车间统计:',res);
					if (res.data2.ds0 && res.data2.ds0.length > 0) {
						let item = res.data2.ds0[0];
						that.yesterdayObjet = item;
						that.option2.series.data[0].value = item.弯曲;
						that.option2.series.data[1].value = item.大小头;
						that.option2.series.data[2].value = item.偏壁;
						that.option2.series.data[3].value = item.结石;
						that.option2.series.data[4].value = item.气线;
						that.option2.series.data[5].value = item.合格数;
					} else { 
						that.option2.series.data[0].value = 0;
						that.option2.series.data[1].value = 0;
						that.option2.series.data[2].value = 0;
						that.option2.series.data[3].value = 0;
						that.option2.series.data[4].value = 0;
						that.option2.series.data[5].value = 0;
					}
				});
			},
			handleQuery(){
				if(this.queryDate!==''){
					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.getData7();
				this.getData10();
			},
			handleExport(val) {
				this.exportLoading = true;
				let id = '#exportDiv' + val;
				let name = val == 'ZJ' ? '预制棒检验统计' : '预制管检验统计';
				this.$XLSX(id, name);
				this.exportLoading = false;
			},
		},
	}
</script>

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