<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px" style="margin-bottom:-15px" >
			<!-- <el-form-item label="检验类型">
				 <el-select v-model="queryParams.checkType" filterable placeholder="请选择检验类型">
					<el-option
					v-for="item in jianyanType"
					:key="item.factoryCode"
					:label="item.factoryName"
					:value="item.factoryCode">
					</el-option>
				</el-select>
			</el-form-item> -->
			<el-form-item label="统计维度">
				 <el-select v-model="queryParams.ymdms" filterable placeholder="请选择检验节点" @change="change(queryParams.ymdms)">
					<el-option
					v-for="item in jianyanNode"
					:key="item.ymdType"
					:label="item.ymdTypeName"
					:value="item.ymdType">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item v-show="queryParams.ymdms=='yyyy'" label="检验时间">
				<el-date-picker				
				v-model="queryParams.incomeTimeStr"
				style="width: 230px"
				type="year"
				value-format="yyyy"
				placeholder="选择检验时间">
				</el-date-picker>
			</el-form-item>
			<el-form-item v-show="queryParams.ymdms=='mm'" label="检验时间">
				<el-date-picker v-model="queryParams.incomeTimeStr" size="small" style="width: 230px" value-format="yyyy-MM"
				type="month" placeholder="选择检验时间" />
			</el-form-item>
			<el-form-item v-show="queryParams.ymdms=='dd'" label="检验时间">
				<el-date-picker v-model="queryParams.incomeTimeStr" size="small" style="width: 230px" type="date" value-format="yyyy-MM-dd" placeholder="选择检验时间"
				/>
			</el-form-item>
			
			
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
				<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出明细</el-button>
			</el-form-item>
		</el-row>
		</el-form>

		<div class="top-table">
			<el-tabs v-model="activeName" @tab-click="handleClick" style="height:1000px;overflow-y: auro;">
				<el-tab-pane label="不良率统计" name="first" >
					<div class="top-one-tab">
						<div class="title">来料不良率</div>
						<div id="echartssl" style="width:1200px;height:450px;"></div>
					</div>
					<div class="top-left-table">
						<div class="title">来料数据统计</div>
						<el-table :data="tableTbody" height="440" :loading="loading" ref="tables">
							<el-table-column label="时间" align="center" prop="timeCol" min-width="100" fixed="left" />
							<el-table-column label="抽样数" align="center" prop="sampleQuality" min-width="100" fixed/>
							<el-table-column label="缺陷不良" align="center"  min-width="100">
								<template v-for="(column, index) in tableThead">
									<el-table-column align="center"  :prop="'col'+index" :key="index" :label="column"/>
								</template>
							</el-table-column>
							<el-table-column label="不良率" align="center" prop="noOkRate" min-width="100" fixed="right">
								<template slot-scope="scope">
									<span>{{scope.row.noOkRate}}%</span>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</el-tab-pane>
				<el-tab-pane label="不良数统计" name="second">
					<div class="top-one-tab">
						<div class="title">不良排列图</div>
						<div id="echartTsl" style="width:1200px;height:500px;"></div>
					</div>
					<div class="top-right-table">
						<div class="left-table">
							<div class="title">来料</div>
							<el-table :data="tableBlfx" height="400">
								<el-table-column label="时间" align="center" prop="dataType" min-width="100" />
								<el-table-column label="抽样数" align="center" prop="noOkQuality" min-width="100"/>
								<el-table-column label="不良率" align="center" prop="noOkNumRate" min-width="100">
									<template slot-scope="scope">
										<span>{{scope.row.noOkNumRate}}%</span>
									</template>
								</el-table-column>
							</el-table>
						</div>
						<div class="right-echarts">
							<div class="title">不良比例</div>
							<div id="echartsThl" style="width:600px;height:450px;"></div>
						</div>
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>
	</div>
</template>

<script>
import { getIncomeTableList,getTableHzTitleTh,getTableHzDataSC,getTableHzNoOkData,getDictData} from "@/api/quality/qcTable";
import moment from 'moment';
import * as echarts from "echarts";

export default {
	name: "LlAnalysisReport",
	components: {},
	data() {
		return {
			// 遮罩层
			loading: false,
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 生产rfid流程表格数据
			incomeList: [],
			// 弹出层标题
			title: "",
			// 是否显示弹出层
			open: false,
			activeName:'',
			 // 新增-物料选中listtag
            selectMaterielListtag:[],
			dateRange:[],
			// 查询参数
			queryParams: {
				checkType:'checkTypeLL',
				ymdms: 'dd',
				incomeTimeStr: moment().format('YYYY-MM-DD'),
				
			},
			// 表单参数
			form: {},
			// 表单校验
			rules: {
				workorderId: [
					{ required: true, message: "工单ID不能为空", trigger: "blur" }
				],
				rfid: [
					{ required: true, message: "rfid号不能为空", trigger: "blur" }
				],
			},
			jianyanType:[
				{
					factoryCode:'checkTypeLL',
					factoryName:''
				}
			],
			jianyanNode:[
				// {
				// 	dictNo:'yyyy',
				// 	dictValue:'年'
				// },
				// {
				// 	dictNo:'mm',
				// 	dictValue:'月'
				// },
				// {
				// 	dictNo:'dd',
				// 	dictValue:'日'
				// },
			],
			tableThead:[
				
			],
			tableTbody:[],
			tableBlfx:[],
			echartsData:[],
			dateNode:'dd',
		};
	},
	mounted(){
		// this.$nextTick(()=>{
			this.getDictData()
			this.getThead()
			this.getTbody()
			this.getBlfx()
		// })
		
		// this.getEchartsThl()
	

	},
	created() {
		this.activeName='first'
	},
	methods: {

		handleClick(){
			this.$nextTick(()=>{
				this.$refs.tables.doLayout()//对table进行重新布局
			})
		},
		async getThead(){
			let res=await getTableHzTitleTh({checkType:'checkTypeLL'})
			console.log('resTh',res)
			this.tableThead=res.columns1
			
		},
		async getTbody(){
			this.loading=true
			let res=await getTableHzDataSC(this.queryParams)
			console.log('resData',res)
			this.$nextTick(()=>{
				this.$refs.tables.doLayout()//对table进行重新布局
			})
			let xData=[]
			let yData=[]
			this.tableTbody=res
			res.map((item,index)=>{
				xData.push(item.timeCol),
				yData.push(item.noOkRate)
				
			})
			console.log('tableTbody',this.tableTbody)
			this.loading=false
			this.getEchartsl(xData,yData)
		},
		async getBlfx(){
			let xdata=[]
			let ydata=[]
			let peiData=[]
			let res=await getTableHzNoOkData(this.queryParams)
			console.log('res不良分析',res)
			res.map((item,index)=>{
				var pDat={}
				pDat.name=item.dataType
				pDat.value=item.noOkQuality
				xdata.push(item.dataType)
				ydata.push(item.noOkQuality)
				peiData.push(pDat)
			})
			this.tableBlfx=res
			console.log('table',this.tableBlfx)
			this.getEchartsTl(xdata,ydata)
			this.getEchartsThl(peiData)

		},
		change(e){
			console.log('e',e)
			this.dateNode=e,
			this.queryParams.incomeTimeStr=null
		},
		 getDictData() {
            const _this = this;
            getDictData(
                {
                    dictType: 'static_dims',
                }
            ).then((response) => {
                if (response) {
                    console.log('response',response)
                    _this.jianyanNode = response
					_this.queryParams.ymdms=_this.jianyanNode[2].ymdType
                }
            });
        },
		getEchartsl(xData,yData){
			var _this=this
			var chartDoml = document.getElementById('echartssl');
			var myChartl = echarts.init(chartDoml);
			var optionl;
			optionl = {
				grid: {
                    y: '5%',
					x:'1%',
                    y2: '6%',
                    x2: '1%',
					width:'96%',
                    containLabel: true
                },
				xAxis: {
					type: 'category',
					name:_this.dateNode=='dd'?'时':_this.dateNode=='mm'?'日':'月',
					splitLine: {
						show: true  //分隔线，默认数值轴显示，类目轴不显示
					},
					axisTick:{
						show:false,
						inside:true,
					},
					axisLabel:{
						rotate: _this.queryParams.ymdms=='mm'?50:0,
						fontSize:11
					},
					
					data: xData
				},
				yAxis: {
					type: 'value',
					show:true,
					// boundaryGap:true,
					axisLine:{
						// show:true,
					},
					axisLabel:{
						formatter:'{value}%'
					}
				},
				series: [
					{   
						name:'成品包装不良率%',
						data: yData,
						type: 'line',
						symbol: "circle",
						symbolSize: 5,
						label:{
							show:true,
							fontSize:11
						},
						lineStyle: {
							color: "rgba(12, 115, 242, 1)"
						},
						areaStyle:{
							normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                    offset: 0,
                                    color: "#fff" // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: "rgba(12, 115, 242, 1)" // 100% 处的颜色
                                }], false)
                        	},
						}
					}
				]
				};

				optionl && myChartl.setOption(optionl);	
		},
		getEchartsTl(xdata,ydata){
			var chartDoml = document.getElementById('echartTsl');
			var myChart2l = echarts.init(chartDoml);
			var option2l;
			option2l = {
				grid: {
                    y: '10%',
					x:'1%',
                    y2: '6%',
                    x2: '2%',
					width:'95%',
                    containLabel: true
                },
				xAxis: {
					type: 'category',
					axisTick:{
						show:false,
						inside:true,
					},
					
					data: xdata
				},
				yAxis: {
					type: 'value',
					show:true,
					axisLine:{
					},
				},
				series: [
					{   
						name:'成品包装不良率%',
						data: ydata,
						type: 'bar',
						label:{
							show:true,
							position: "top",
						},
						lineStyle: {
							color: "rgba(12, 115, 242, 1)"
						},
						barWidth: 30,
						itemStyle:{
							normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                    offset: 0,
                                    color: "#fff" // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: "rgba(12, 115, 242, 1)" // 100% 处的颜色
                                }], false)
                        	},
						}
					}
				]
				};

				option2l && myChart2l.setOption(option2l);	
		},
		getEchartsThl(peiData){
			console.log('peiData',peiData)
			var chartDomTl = document.getElementById('echartsThl');
			var myChart3l = echarts.init(chartDomTl);
			var option3l;
			option3l = {
				//  title: {
				// 	text: 'Referer of a Website',
				// 	left: 'center'
				// },
				tooltip: {
					trigger: 'item'
				},
				legend: {
					orient: 'vertical',
					left: 'left'
				},
				series: [
					{
						name: '不良数',
						type: 'pie',
						radius: '50%',
						minAngle: 30,
						data: peiData,
						emphasis: {
							itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						},
						label: {
							normal: {
								position: 'inside',
								formatter: '{d}%',

								textStyle: {
									color: '#fff',
									fontWeight: 'bold',
									fontSize: 10
								}
							}
						},
					}
				]
			}
			option3l && myChart3l.setOption(option3l);	
		},
		// 表单重置
		reset() {
			this.form = {
				recordId: null,
				workorderId: null,
				rfid: null,
				factoryCode: null,
				machineCode: null,
				nowProcessId: null,
				nextProcessId: null,
				orderNum: null,
				inTime: null,
				outTime: null,
				status: null,
				remark: null,
				attr1: null,
				attr2: null,
				attr3: null,
				attr4: null,
				createBy: null,
				createTime: null,
				updateBy: null,
				updateTime: null,
        shiftId: null
			};
			this.resetForm("form");
		},
		/** 搜索按钮操作 */
		handleQuery() {
			console.log('queryForm',this.queryParams)
			this.getThead()
			this.getTbody()
			this.getBlfx()
			
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.queryParams.ymdms=null
			this.queryParams.incomeTimeStr=null
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map(item => item.recordId)
			this.single = selection.length!==1
			this.multiple = !selection.length
		},
		/** 导出按钮操作 */
		handleExport() {
			this.download('quality/staticTable/exportIncomeDetail', {
				...this.queryParams
			}, `incomeNoOkList_${new Date().getTime()}.xlsx`)
		},
	}
};
</script>
<style lang="scss" scoped>
.top-table{
	//display: flex;
	//justify-content: space-between;
	width: 1280px;
	height: 1000px;
	.top-one-tab{
		.title{
			font-size: 14px;
			color:#606266;
			padding: 5px 0px;
			font-weight: 600;
		}
	}
	.top-left-table{
		width: 100%;
		height: 470px;
		.title{
			font-size: 14px;
			color:#606266;
			padding: 5px 0px;
			font-weight: 600;
		}
	}	
	.top-right-table{
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 100%;
		.left-table{
			width: 48%;
			.title{
				font-size: 14px;
				color:#606266;
				padding: 5px 0px;
				font-weight: 600;
			}
		}
		.right-echarts{
			width: 48%;
			.title{
				font-size: 14px;
				color:#606266;
				padding: 5px 0px;
				font-weight: 600;
			}
		}
		
	}
}
.bottom-echart{
	display: flex;
	justify-content: space-between;
	width: 1450px;
	height: 240px;
	padding-top: 15px;
	.left-echart{
		width: 48%;
		height: 100%;
		.title{
			font-size: 14px;
			color:#606266;
			padding: 5px 0px;
			font-weight: 600;
		}
	}
	.right-echart{
		width: 48%;
		height: 100%;
		.title{
			font-size: 14px;
			color:#606266;
			padding: 5px 0px;
			font-weight: 600;
		}
	}
}
.tagbox {
  display: flex;
  /* overflow: scroll; */
  position: relative;
  width: 80%;
  padding-left: 26px;
  margin-bottom: 15px;
  .tagboxlabel{
    width: 100px;
    text-align: right;
    vertical-align: middle;
    font-size: 14px;
    color: black;
    line-height: 40px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-right: 12px;
  }
  .tag {
    width: 720px;
    border: 1px #DCDFE6 solid;
    height: 60px;
    padding: 5px 15px;
    overflow-y: scroll;
    .tagitem{
      margin-left: 5px;
    }
  }
  .button1{
    width: 37px;
    height: 37px;
    position: absolute;
        right: -39px;
    top: 2px;

  }
}
</style>