<template>
	<div>
		<container2 title="质量问题">
			<bigScreenTabs slot="datePicker" v-model="index" :titleArr="['全年', '月度']"></bigScreenTabs>
			<div style="height: 100%; width: 100%" ref="chart" v-if="index == 0"></div>
			<div style="height: 100%; width: 100%" ref="chart1" v-else></div>
		</container2>
		<container2 title="质量检查分析" style="margin-top: 10px">
			<bigScreenTabs slot="datePicker" v-model="index2" :titleArr="['总厂', '部门']"></bigScreenTabs>
			<div style="height: 100%; width: 100%" ref="chart2" v-if="index2 == 0"></div>
			<div style="height: 100%; width: 100%" ref="chart22" v-else></div>
		</container2>
		<container2 title="质量案例/检查明细" style="margin-top: 10px">
			<bigScreenTabs slot="datePicker" v-model="index3" :titleArr="['案例', '明细']"></bigScreenTabs>
			<el-row style="padding: 15px 30px" v-if="index3 == 0">
				<el-col :span="24" style="margin-bottom: 1px">
					<el-row style="font-size: 14px; height: 42px; line-height: 42px; background: rgba(0, 255, 255, 0.3)">
						<el-col style="text-align: center" :span="4">序号</el-col>
						<el-col style="text-align: center" :span="8">部门</el-col>
						<el-col style="text-align: center" :span="12">作业内容</el-col>
					</el-row>
				</el-col>
				<vue-seamless-scroll
					:data="scrollList"
					class="warp-scroll"
					ref="seamlessScroll"
					:class-option="{
						singleHeight: 43,
					}"
				>
					<ul class="item">
						<li v-for="item in scrollList" :key="item.id">
							<el-row style="font-size: 14px">
								<el-col style="text-align: center" :span="4">{{ item.id }}</el-col>
								<el-col style="text-align: center" :span="8">{{ item.className }}</el-col>
								<el-col style="text-align: center" :title="item.faultRevelation" :span="12">{{ item.faultRevelation }}</el-col>
							</el-row>
						</li>
					</ul>
				</vue-seamless-scroll>
			</el-row>
			<el-row style="padding: 15px 30px" v-if="index3 == 1">
				<!-- <el-col :span="24" style="margin-bottom: 1px">
					<el-row style="font-size: 14px; height: 42px; line-height: 42px; background: rgba(0, 255, 255, 0.3)">
						<el-col style="text-align: center" :span="4">序号</el-col>
						<el-col style="text-align: center" :span="8">部门</el-col>
						<el-col style="text-align: center" :span="12">作业内容(明细)</el-col>
					</el-row>
				</el-col>
				<vue-seamless-scroll
					:data="listData"
					class="warp-scroll"
					:class-option="{
						singleHeight: 43,
					}"
				>
					<ul class="item">
						<li v-for="item in scrollList" :key="item.id">
							<el-row style="font-size: 14px">
								<el-col style="text-align: center" :span="4">{{ item.id }}</el-col>
								<el-col style="text-align: center" :span="8">{{ item.name }}</el-col>
								<el-col style="text-align: center" :span="12">{{ item.txt }}</el-col>
							</el-row>
						</li>
					</ul>
				</vue-seamless-scroll> -->
			</el-row>
		</container2>
	</div>
</template>

<script>
import rocketTit from '../components/rocketTit/index.vue'
import container2 from './components/container2/index.vue'
import bigScreenTabs from '../components/bigScreenTabs/index.vue'
import progressBar from '@/views/bigScreen/components/progress/index.vue'
import colorList from '@/utils/colorPalette'
import { blueColorList, greenColorList, yelloColorList } from '@/utils/gradualColor'
import vueSeamlessScroll from 'vue-seamless-scroll'
// import {Liquid} from '@antv/g2plot';
// import resize from '../../dashboard/mixins/resize'
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
export default {
	// mixins: [resize],
	name: 'left1',
	components: {
		rocketTit,
		container2,
		bigScreenTabs,
		progressBar,
		vueSeamlessScroll,
	},
	data() {
		return {
			index: 0,
			index2: 0,
			index3: 0,
			colorList,
			chart: null,
			chart1: null,
			chart2: null,
			chart22: null,

			listData: [1, 2, 3, 4, 5, 6, 7, 8],
			scrollList: [],
		}
	},
	mounted() {
		this.$nextTick(() => {
			this.initChart()
			this.initLine()
			this.getData()
		})
	},
	watch: {
		index(newVal, oldVal) {
			if (newVal == 0) {
				this.chart1.dispose()
				this.chart1 = null
				this.$nextTick(() => {
					this.initChart()
				})
			} else {
				this.chart.dispose()
				this.chart = null
				this.$nextTick(() => {
					this.initChart1()
				})
			}
		},
		index2(newVal, oldVal) {
			if (newVal == 0) {
				this.chart22.dispose()
				this.chart22 = null
				this.$nextTick(() => {
					this.initLine()
				})
			} else {
				this.chart2.dispose()
				this.chart2 = null
				this.$nextTick(() => {
					this.initChart22()
				})
			}
		},
	},
	beforeDestroy() {},
	methods: {
		// 获取滚动列表数据
		getData() {
			this.request({
				url: '/hx/qualityAssurance/getHxQualityCasePic',
				method: 'get',
			}).then(({ data }) => {
				this.scrollList = data
				this.$refs.seamlessScroll.reset()
			})
		},
		// 右上切换前
		initChart() {
			this.request({
				url: '/hx/qualityAssurance/getQualityProblem',
				method: 'get',
				params: {
					type: '1',
				},
			}).then(({ data }) => {
				this.chart = echarts.init(this.$refs.chart)
				this.setOptions(data.list)
			})
		},
		setOptions(resData) {
			resData.map((item, index) => {
				item.value.map(i => {
					i.value = i.TOTAL
				})
			})
			this.chart.setOption({
				tooltip: {
					trigger: 'item',
				},
				legend: {
					top: '5%',
					right: '5%',
					orient: 'vertical',
					y: 'center',
					// left: 'right',
					textStyle: {
						color: '#fff', //legend字体颜色
					},
				},
				series: [
					{
						name: resData[0].dimension,
						type: 'pie',
						center: ['35%', '50%'],
						radius: ['60%', '80%'],
						avoidLabelOverlap: false,
						label: {
							show: false,
							position: 'center',
						},
						emphasis: {
							label: {
								show: false,
								fontSize: '40',
								fontWeight: 'bold',
							},
						},
						labelLine: {
							show: false,
						},
						data: resData[0].value,
						// [
						// 	{ value: 1048, name: '型号1' },
						// 	{ value: 735, name: '型号2' },
						// 	{ value: 580, name: '型号3' },
						// 	{ value: 484, name: '型号4' },
						// 	{ value: 301, name: '型号5' },
						// ],
						color: blueColorList,
					},
					{
						name: resData[1].dimension,
						type: 'pie',
						radius: ['35%', '55%'],
						center: ['35%', '50%'],
						avoidLabelOverlap: false,
						label: {
							show: false,
							position: 'center',
						},
						emphasis: {
							label: {
								show: false,
								fontSize: '40',
								fontWeight: 'bold',
							},
						},
						labelLine: {
							show: false,
						},
						data: resData[1].value,
						// [
						// 	{ value: 1048, name: '类别1' },
						// 	{ value: 735, name: '类别2' },
						// 	{ value: 580, name: '类别3' },
						// 	{ value: 484, name: '类别4' },
						// 	{ value: 300, name: '类别5' },
						// ],
						color: greenColorList,
					},
					{
						name: resData[2].dimension,
						type: 'pie',
						radius: ['10%', '30%'],
						center: ['35%', '50%'],
						avoidLabelOverlap: false,
						label: {
							show: false,
							position: 'center',
						},
						emphasis: {
							label: {
								show: false,
								fontSize: '40',
								fontWeight: 'bold',
							},
						},
						labelLine: {
							show: false,
						},
						data: resData[2].value,
						// [
						// 	{ value: 1048, name: '部门1' },
						// 	{ value: 735, name: '部门2' },
						// 	{ value: 580, name: '部门3' },
						// 	{ value: 484, name: '部门4' },
						// 	{ value: 300, name: '部门5' },
						// ],
						color: yelloColorList,
					},
				],
			})
		},
		// 右上切换后
		initChart1() {
			this.request({
				url: '/hx/qualityAssurance/getQualityProblem',
				method: 'get',
				params: {
					type: '2',
				},
			}).then(({ data }) => {
				this.chart1 = echarts.init(this.$refs.chart1)
				this.setOptions1(data)
			})
		},
		setOptions1(resData) {
			let titData = resData.allName
			delete resData.allName
			let titList = []
			let valList = []
			for (let index = 0; index < titData.length; index++) {
				valList.push([])
			}
			let newData = {}
			for (let i = 0; i < resData.list.length; i++) {
				const item = resData.list[i]
				for (const key in item) {
					newData[key] = item[key]
				}
			}
			for (const key in newData) {
				if (Object.hasOwnProperty.call(newData, key)) {
					const item = newData[key]
					titList.push(key)
					for (let i = 0; i < item.length; i++) {
						const ele = item[i]
						let index = titData.findIndex(e => e == ele.name)
						valList[index][titList.length - 1] = ele.COMPLETED
					}
				}
			}

			this.chart1.setOption({
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow',
					},
				},
				legend: {
					data: titData,
					textStyle: {
						color: '#fff', //legend字体颜色
					},
				},
				grid: {
					left: 20,
					right: 20,
					top: 30,
					bottom: 50,
					containLabel: true,
				},
				dataZoom: {
					type: 'slider',
					start: 0,
					end: this.dataZoomEnd(titList.length, 5),
					textStyle: {
						color: '#fff',
					},
				},
				color: colorList,
				xAxis: [
					{
						type: 'category',
						data: titList,
						axisLine: {
							lineStyle: {
								color: 'rgb(255, 255, 255)',
							},
						},
					},
				],
				yAxis: [
					{
						name: '个',
						splitLine: {
							show: true,
							//  改变轴线颜色
							lineStyle: {
								// 使用深浅的间隔色
								color: ['rgba(255, 255, 255,.5)'],
							},
						},
						axisLabel: {
							formatter: '{value}',
						},
						axisLine: {
							lineStyle: {
								color: 'rgb(255, 255, 255)',
							},
						},
					},
					{
						type: 'value',
					},
				],
				series: [
					...valList.map((e, index) => {
						return {
							name: titData[index],
							type: 'bar',
							stack: 'Ad',
							emphasis: {
								focus: 'series',
							},
							barWidth: 30,
							data: e,
						}
					}),
				],
			})
		},

		initLine() {
			this.request({
				url: '/hx/qualityAssurance/getHxQualityInspect',
				method: 'get',
				params: {
					type: '1',
				},
			}).then(({ data }) => {
				this.chart2 = echarts.init(this.$refs.chart2)
				this.setOptions2(data.factory)
			})
		},
		setOptions2(resData) {
			let month = []
			let cate = [] // 率
			let completed = [] // 完成
			for (let i = 0; i < resData.length; i++) {
				const item = resData[i]
				month.push(item.month)
				cate.push(item.CATE)
				completed.push(item.COMPLETED)
			}
			this.chart2.setOption({
				tooltip: {
					trigger: 'axis',
					// formatter: '{a1}<br/>{b1}：{c1}',
				},
				legend: {
					data: ['数量', '完成率'],
					textStyle: {
						color: '#fff',
					},
				},
				grid: {
					left: '3%',
					right: '6%',
					bottom: '3%',
					containLabel: true,
				},
				xAxis: [
					{
						type: 'category',
						data: month,
						axisPointer: {
							type: 'shadow',
						},
						axisLine: {
							lineStyle: {
								color: 'rgb(255, 255, 255)',
							},
						},
					},
				],
				yAxis: [
					{
						type: 'value',
						name: '个',
						min: 0,
						// max: 250,
						// interval: 50,
						axisLabel: {
							formatter: '{value}',
						},
						splitLine: {
							show: false, //不显示网格线
						},
						splitArea: {
							show: false, //不显示网格区域
						},
						axisLine: {
							lineStyle: {
								color: 'rgb(255, 255, 255)',
							},
						},
					},
					{
						type: 'value',
						min: 0,
						max: 100,
						// interval: 5,
						axisLabel: {
							formatter: '{value} %',
						},
						splitLine: {
							show: false, //不显示网格线
						},
						splitArea: {
							show: false, //不显示网格区域
						},
						axisLine: {
							lineStyle: {
								color: 'rgb(255, 255, 255)',
							},
						},
					},
				],
				grid: {
					containLabel: true,
					width: '99%',
					left: 0,
					top: 50,
					bottom: 50,
				},
				dataZoom: {
					type: 'slider',
					start: 0,
					end: this.dataZoomEnd(month.length, 5),
					textStyle: {
						color: '#fff',
					},
				},
				series: [
					{
						name: '数量',
						type: 'bar',
						barWidth: 20,
						data: completed,
						itemStyle: {
							color: {
								type: 'linear', // 线性渐变
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{
										offset: 0,
										color: '#F49220', // 0%处的颜色为红色
									},
									{
										offset: 1,
										color: '#F6D97E', // 100%处的颜色为蓝
									},
								],
							},
						},
					},
					{
						name: '完成率',
						type: 'line',
						yAxisIndex: 1,
						smooth: false,
						data: cate,
						itemStyle: {
							color: '#55C5A2',
						},
						symbol: 'none',
					},
				],
				// yAxis: {
				//   type: 'value',
				//   splitLine: {
				//     show: false//不显示网格线
				//   },
				//   splitArea: {
				//     show: false//不显示网格区域
				//   },
				//   axisLine: {
				//     lineStyle: {
				//       color: 'rgb(255, 255, 255)'
				//     },
				//   }
				// },
				// series: [
				//   {
				//     name: '利润',
				//     type: 'bar',
				//     data: [
				//       2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
				//     ]
				//   },
				//   {
				//     name: '数量',
				//     type: 'bar',
				//     data: [
				//       2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
				//     ]
				//   },
				//   {
				//     name: '完成率',
				//     type: 'line',
				//     yAxisIndex: 1,
				//     data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
				//   }

				// ]
			})
		},
		initChart22() {
			this.request({
				url: '/hx/qualityAssurance/getHxQualityInspect',
				method: 'get',
				params: {
					type: '2',
				},
			}).then(({ data }) => {
				this.chart22 = echarts.init(this.$refs.chart22)
				this.setOptions22(data.dept)
			})
		},
		setOptions22(resData) {
			console.log(resData)
			let deptName = []
			let cate = [] // 率
			let completed = [] // 完成
			let total = [] // 总
			for (let i = 0; i < resData.length; i++) {
				const item = resData[i]
				deptName.push(item.dept_name)
				cate.push(item.CATE)
				completed.push(item.COMPLETED)
				total.push(item.TOTAL)
			}
			this.chart22.setOption({
				tooltip: {
					trigger: 'axis',
					// formatter: '{a1}<br/>{b1}：{c1}',
				},
				// legend: {
				// 	// data: ['收入', '实际', '目标'],
				// 	textStyle: {
				// 		color: '#fff', //legend字体颜色
				// 	},
				// 	// selectedMode: false,
				// },
				grid: {
					containLabel: true,
					left: 20,
					right: 10,
					top: 30,
					bottom: 50,
				},
				xAxis: {
					data: deptName,
					axisLine: {
						lineStyle: {
							color: 'rgb(255, 255, 255)',
						},
					},
				},
				dataZoom: {
					type: 'slider',
					start: 0,
					end: this.dataZoomEnd(deptName.length, 5),
					textStyle: {
						color: '#fff',
					},
				},
				color: ['#ccc', 'red'],
				yAxis: [
					{
						name: '个',
						splitLine: {
							show: true,
							//  改变轴线颜色
							lineStyle: {
								// 使用深浅的间隔色
								color: ['rgba(255, 255, 255,.5)'],
							},
						},
						axisLabel: {
							formatter: '{value}',
						},
						axisLine: {
							lineStyle: {
								color: 'rgb(255, 255, 255)',
							},
						},
					},
					{
						type: 'value',
						min: 0,
						max: 100,
						interval: 20,
						axisLabel: {
							formatter: '{value} %',
						},
						splitLine: {
							show: false, //不显示网格线
						},
						splitArea: {
							show: false, //不显示网格区域
						},
						axisLine: {
							lineStyle: {
								color: 'rgb(255, 255, 255)',
							},
						},
					},
				],
				series: [
					{
						name: '收入',
						type: 'bar',
						z: '-1',
						barGap: '-75%',
						barWidth: 30,
						itemStyle: {
							color: 'rgba(85, 197, 162, .3)',
						},
						data: total,
					},
					{
						name: '实际',
						type: 'bar',
						barWidth: 15,
						position: [0, 0],
						itemStyle: {
							color: 'rgba(90, 216, 166, 0.85)',
						},
						data: completed,
						itemStyle: {
							color: {
								type: 'linear', // 线性渐变
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{
										offset: 0,
										color: '#F49220', // 0%处的颜色为红色
									},
									{
										offset: 1,
										color: '#F6D97E', // 100%处的颜色为蓝
									},
								],
							},
						},
					},
					{
						name: '目标',
						type: 'scatter',
						symbol: 'rect',
						symbolSize: [30, 4],
						symbolOffset: [3, 0],
						position: [0, 0],
						itemStyle: {
							color: '#F6D97E',
						},
						yAxisIndex: 1,
						data: cate,
					},
				],
			})
		},
	},
}
</script>

<style lang="scss" scoped>
.warp-scroll {
	height: 172px;
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
	ul {
		list-style: none;
		padding: 0;
		margin: 0 auto;
		li,
		a {
			display: block;
			display: flex;
			justify-content: space-between;
			font-size: 15px;
		}
		li {
			display: block;
			height: 42px;
			line-height: 42px;
			background: linear-gradient(270deg, rgba(30, 43, 99, 0) 0%, #1e2b63 100%);
			// opacity: 0.6;
			// box-shadow: 0px 1px 0px 0px rgba(139, 177, 237, 0.5);
			margin-bottom: 1px;
			img {
				vertical-align: sub;
				margin-right: 5px;
			}
		}
	}
}
.wrap {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
	.box {
		padding: 0 0 5px 15px;
		display: flex;
		align-items: center;
		.num {
			font-size: 24px;
			font-weight: 600;
			margin: 0 10px;
		}
	}
}

.content1 {
	// height: 200px;
	height: 100%;

	.chart1 {
		margin: 0 auto;
		width: 100%;
		height: 192px;
		background: transparent;
	}
}

.num {
	font-size: 30px;
	font-family: Roboto-BlackItalic, Roboto;
	font-weight: normal;
	color: #91d5fe;
	vertical-align: sub;
	//   margin-right: 3px;
}

.content2 {
	padding: 20px;
	flex: 1;
	height: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	.chart2 {
		height: 100%;
	}

	.tit {
		font-size: 16px;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #ffffff;
		line-height: 22px;
		position: relative;
		padding-left: 15px;
	}
	.tit::after {
		content: '';
		display: block;
		position: absolute;
		top: 3px;
		left: 0px;
		width: 4px;
		height: 16px;
		background: #00ffff;
	}
}
</style>
