<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">
							<el-table :data="tableData">
								<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="name">
								</el-table-column>
								<el-table-column label="合格判定" prop="count_ok">
								</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="option1"></scEcharts>
						</el-card>
					</el-col>
					<el-col :lg="16">
						<el-card shadow="never">
							<el-table :data="tableData">
								<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="name">
								</el-table-column>
								<el-table-column label="合格判定" prop="count_ok">
								</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="option3"></scEcharts>
						</el-card>
					</el-col>
					<el-col :lg="16">
						<el-card shadow="never">
							<el-table :data="tableData">
								<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="name">
								</el-table-column>
								<el-table-column label="合格判定" prop="count_ok">
								</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: 10, name: '合格数'},
								{value: 1, name: '不合格数'},
							]
						}
					]
				},
				option2: {
					title: {
						text: '预制管',
						// subtext: '',
					},
					tooltip: {
						trigger: 'item'
					},
					series: [
						{
							name: '预制管',
							type: 'pie',
							radius: ['40%', '70%'],
							center: ['50%', '60%'],
							label: false,
							data: [
								{value: 10, name: '合格数'},
								{value: 1, name: '不合格数'},
							]
						}
					]
				},
				option3: {
					title: {
						text: 'AVG',
						// subtext: '',
					},
					tooltip: {
						trigger: 'item'
					},
					series: [
						{
							name: 'AVG',
							type: 'pie',
							radius: ['40%', '70%'],
							center: ['50%', '60%'],
							label: false,
							data: [
								{value: 10, name: '合格数'},
								{value: 1, 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.getData6();
			this.getData7();
			this.getData10();
		},
		methods:{
			queryTypeChange(value){
				console.log(value)
				this.queryDate = '';
				if(value=='月'){
					this.xAxisData = ['第一周','第二周','第三周','第四周'];
				}else{
					this.xAxisData = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
				}
				this.option.xAxis.data = this.xAxisData;
				this.option2.xAxis.data = this.xAxisData;
				this.option3.xAxis.data = this.xAxisData;
				this.option4.xAxis.data = this.xAxisData;
			},
			getData6(){
				let that = this;
				let exec = that.queryType=='月'?'lineWeek':'lineMonth';
				let obj = {
					query: { start_date: this.start_date, end_date: this.end_date, dept_name: "6车间" },
				};
				that.$API.bi.dataset.exec.req(exec, obj).then((doInRes) => {
					console.log('6生产车间统计:',doInRes);
					debugger;
				});
			},
			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((doInRes) => {
					console.log('7生产车间统计:',doInRes);
					debugger;
				});
			},
			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((doInRes) => {
					console.log('10生产车间统计:',doInRes);
					debugger;
				});
			},
			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';
					}
				}
				debugger;
				console.log(this.query)
				this.getData6();
				this.getData7();
				this.getData10();
			},
		},
	}
</script>

<style>
</style>
