<template>
	<div>
		<el-dialog :visible="visible" :before-close="handleClose" :close-on-click-modal="false" top="30vh">
			<!-- <echartsTitle>{{params.targetName}}</echartsTitle> -->
			<div class="header">
				{{params.targetName}}
			</div>
			<div class="search">
				<el-date-picker v-model="paramData.year" type="year" value-format="yyyy" placeholder="选择年"
					@change="getData()" style="width: 120px;">
				</el-date-picker>
			</div>
			<div id="dialogChart" class="full"></div>
		</el-dialog>
	</div>
</template>

<script>
	import * as echarts from 'echarts'
	import {
		mapState
	} from 'vuex'
	import moment from "moment"
	import financialTheme from '@/api/bigScrenn/financialTheme.js'
	import echartsTitle from '@/views/BigScrenn/components/echartsTitle.vue'
	export default {
		name: 'echartsDialog',
		components: {
			echartsTitle
		},
		data() {
			return {
				visible: false,
				title: '',
				dateEchart: null,
				staLatList: [{
						name: '实际值',
						value: 1
					},
					{
						name: '预算值',
						value: 2
					}
				],
				params: {

				},
				paramData: {
					year: '',
					targetId: ''
				},
				dataList: []
			}
		},
		created() {},
		mounted() {
			this.$root.$on('resize', () => {
				this.resize(500)
			})
		},
		methods: {
			add(val) {
				this.params = val
				this.visible = true
				this.paramData.targetId = val.targetId
				this.paramData.year = moment().format('YYYY')
				this.getData()
			},
			getData() {
				financialTheme.enterpriseData(this.paramData, res => {
					if (res.value) {
						this.dataList = res.value
						this.$nextTick(() => {
							this.dateEcharts()
						})
					}

				})
			},
			handleClose() {
				this.visible = false
			},
			dateEcharts() {
				let chartDom = document.getElementById('dialogChart')
				this.dateEchart = echarts.init(chartDom)
				let arr = []
				let xLabel = [];
				this.dataList.forEach(r => {
					xLabel.push(r.enterpriseCode)
				})
				if (this.params.staLat.split(',').length > 1) {
					this.staLatList.forEach(s => {
						this.params.staLat.split(',').forEach(t => {
							if (s.value == t) {
								let datalist = []
								if (t == 1) {
									this.dataList.forEach(r => {
										datalist.push(r.actual)
									})
								} else if (t == 2) {
									this.dataList.forEach(r => {
										datalist.push(r.budget)
									})
								}
								arr.push({
									name: s.name,
									type: 'line',
									symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
									smooth: true,
									lineStyle: {
										normal: {
											width: 3,
											// color: '#518EF5', // 线条颜色
										},
									},
									itemStyle: {
										normal: {
											// color: '#518EF5', //拐点颜色
											// borderColor: '#fff600',//拐点边框颜色
											// borderWidth: 13//拐点边框大小
											label: {
												show: false, //开启显示
												color: '#fff',
												position: 'top', //在上方显示
												formatter: function(res) {
													if (res.value) {
														return res.value
													} else {
														return 0
													}
												},
											},
										},

									},
									symbolSize: 8, //设定实心点的大小
									data: datalist
									// c.resultData.forEach(r => {
									// 	if (t == 1) {
									// 		console.log(r);
									// 		return [...r.actual]
									// 	} else {
									// 		// arrData.push()
									// 		return [...r.budget]
									// 	}
									// }),
								}, )
							}
						})
					})
				} else {
					this.staLatList.forEach(s => {
						let data1list = []
						if (this.params.staLat == 1) {
							this.dataList.forEach(r => {
								data1list.push(r.actual)
							})
						} else if (this.params.staLat == 2) {
							this.dataList.forEach(r => {
								data1list.push(r.budget)
							})
						}
						if (s.value == this.params.staLat) {
							arr.push({
								name: s.name,
								type: 'line',
								symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
								smooth: true,
								lineStyle: {
									normal: {
										width: 3,
										// color: '#518EF5', // 线条颜色
									},
								},
								itemStyle: {
									normal: {
										// color: '#518EF5', //拐点颜色
										// borderColor: '#fff600',//拐点边框颜色
										// borderWidth: 13//拐点边框大小
										label: {
											show: false, //开启显示
											color: '#fff',
											position: 'top', //在上方显示
											formatter: function(res) {
												if (res.value) {
													return res.value
												} else {
													return 0
												}
											},
										},
									},

								},
								symbolSize: 8, //设定实心点的大小
								data: data1list
							}, )
						}
					})
				}
				console.log(arr);
				let option = {
					backgroundColor: '',
					tooltip: {
						trigger: 'axis',

					},
					legend: {
						show: true,
						textStyle: {
							color: '#fff',
							fontSize: 14,
							padding: [0, 8, 0, 8]
						}
					},
					grid: {
						top: '12%',
						left: '10%',
						right: '3%',
						bottom: '15%',
					},
					xAxis: [{
						type: 'category',
						axisLabel: {
							textStyle: {
								color: '#FFFFFF',
								fontSize: 12,
							},
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: '#233653',
							},
						},
						axisTick: {
							show: false,
						},
						data: xLabel,
					}, ],
					yAxis: [{
						name: this.params.targetUnit,
						nameTextStyle: {
							color: "#fff",
							fontSize: 12,
							padding: [0, 60, 0, 0]
						},
						type: 'value',
						splitLine: {
							show: false,
							lineStyle: {
								color: '#1160a0',
								type: 'dashed'
							},
						},

						axisLabel: {
							show: true,
							formatter: function(params) {
								const units = ['', '万', '百万', '亿', '万亿'];
									let unitIndex = 0;
									if (params < 0) {
										params = Math.abs(params)
										while (params >= 10000 && unitIndex < units.length - 1) {
											params /= 10000;
											unitIndex++;
										}
										params = (0 - params)

									} else {
										while (params >= 10000 && unitIndex < units.length - 1) {
											params /= 10000;
											unitIndex++;
										}

									}
									const formattedNumber = params

									return formattedNumber + units[unitIndex];

							},
							textStyle: {
								color: '#fff',
								fontSize: 14
							}
						},
						axisTick: {
							show: false,
						},
					}, ],
					series: arr
				}
				option && this.dateEchart.setOption(option)
			},
			resize(delay) {
				setTimeout(() => {
					this.dateEchart.resize()
				}, delay || 0)
			},
		}
	}
</script>

<style lang="scss" scoped>
	* {
		padding: 0;
		margin: 0;
	}

	.full {
		height: calc(321px - 80px);
	}

	/deep/ .el-dialog {
		width: 1031px;
		min-height: 312px;
		background: url('~@/assets/img/dialog-bg.png') center / 100% 100% no-repeat;
		background-color: rgba(0, 0, 0, 0.8);
	}

	/deep/ .el-dialog__header {
		padding: 0;
		margin: 0;
		height: 0;
	}

	/deep/ .el-dialog__body {
		padding: 0;
		height: 312px;
	}

	.header {
		width: 100%;
		height: 35px;
		background: url('~@/assets/img/dialog-header-bg.png') center / 100% 100% no-repeat;
		font-size: 22px;
		font-family: Alimama ShuHeiTi;
		font-weight: bold;
		font-style: italic;
		color: #F6F9FE;
		padding-left: 30px;
		box-sizing: border-box;
		text-shadow: 0px 2px 8px rgba(5, 28, 55, 0.42);

	}

	.search {
		text-align: right;
		padding-right: 100px;
		box-sizing: border-box;
	}
	/deep/ .el-dialog__headerbtn {
		background: url("~@/assets/img/dialog-shut.png");
		background-size: cover;
		height: 20px;
		width: 20px;
	
		i {
			display: none; // 在这里隐藏弹窗默认的关闭图标
		}
	}
</style>
