<template>
	<screenHeader :currentKey="currentKey">
		<div class="breadcrumb">
			<div class="left">
				{{ $i18n.locale === 'zh-CN'?'当前位置':'Current position'}}：
				<div class="crumb-item-active">
					<span> {{ $i18n.locale === 'zh-CN'?'人资主题':'Human Resource Theme'}}</span>
				</div>
			</div>
			<el-cascader popper-class="cascader" :options="allList" v-model="poolCode" :props='propsData'
				placeholder="请选择企业" @change="getData(1)" :show-all-levels="false">
				<template slot-scope="{ node, data }">
					<span v-if="data.id"> {{ data.code }} </span>
					<span v-else>{{ data.continent }}</span>
				</template>
			</el-cascader>
		</div>
		<div class="screen-body">
			<div class="screen-body-col col-side">
				<div class="side-echarts" v-for="(e,ex) in echartsList.slice(0,3)">
					<echartsTitle :orderData="e" :hierarchy="2">{{ $i18n.locale === 'zh-CN'?e.targetName:e.targetNameEn}}({{e.targetUnit}})</echartsTitle>
					<div :id="'pieChart'+ex" class="full" refs=""></div>
				</div>
			</div>
			<div class="screen-body-col col-side">
				<div class="side-echarts" v-for="(e,ex) in echartsList.slice(3)">
					<echartsTitle :orderData="e" :hierarchy="2">{{ $i18n.locale === 'zh-CN'?e.targetName:e.targetNameEn}}({{e.targetUnit}})</echartsTitle>
					<div :id="'pieChart'+(3+ex)" class="full" refs=""></div>
				</div>
			</div>
			<echartsDialog ref="echartsDialog"></echartsDialog>
		</div>
	</screenHeader>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import * as echarts from 'echarts'
	import dictUtils from '@/components/dict/DictSelectUtils.js'
	import humanResourceTheme from '@/api/bigScrenn/humanResourceTheme.js'
	import screenHeader from '@/views/BigScrenn/components/screenHeader.vue'
	import echartsTitle from '@/views/BigScrenn/humanResourceTheme/components/echartsTitle.vue'
	import echartsDialog from '@/views/BigScrenn/humanResourceTheme/components/echartsDialog.vue'
	import financialTheme from '@/api/bigScrenn/financialTheme.js'
	export default {
		components: {
			screenHeader,
			echartsTitle,
			echartsDialog
		},
		data() {
			return {
				currentKey: 'humanResourceTheme',
				hierarchy: 1, //页面层级
				tabActive: 0,
				echartsList: [], //所有echarts数据
				tabList: [{
						name: "宏观数据",
						value: 0
					},
					{
						name: "运行板块",
						value: 1
					},
					{
						name: "销售板块",
						value: 2
					},
				],
				dataList: [],
				staLatList: [{
						name: '实际值',
						value: 1
					},
					{
						name: '预算值',
						value: 2
					}
				],
				leftList: [], //左边echarts
				rightList: [], //右边echarts
				centerList: [],
				leftData: [], //左边
				rightData: [], //右边
				rateData: {},
				options: [{
					value: '选项1',
					label: '1'
				}],
				value: '',
				options1: [{
					value: '选项1',
					label: '2'
				}],
				value1: '',
				allList: [],
				poolCode: '',
				propsData: {
					children: 'list',
					label: 'code',
					value: 'code',
					expandTrigger: 'hover'
				},
				params: {
					pageBean: {
						page: 1,
						pageSize: -1,
					},
					querys: []
				},
				zbList: [],
				dpzbList: [],
			}
		},
		created() {

			window.localStorage.setItem('activeIndex', this.currentKey);
			window.localStorage.setItem("pageName", '人资主题');
			this.zbList = dictUtils.getDictItemsFromCache('zb_en')
			this.dpzbList = dictUtils.getDictItemsFromCache('dpzb')
			this.getAreaTree()
		},
		mounted() {

		},
		methods: {
			//获取企业
			getAreaTree() {
				this.params.querys[{
					group: "main",
					operation: "EQUAL",
					parentGroup: "",
					property: "pool_type_",
					relation: "AND",
					value: 1
				}, {
					group: "main",
					operation: "EQUAL",
					parentGroup: "",
					property: "run_status_",
					relation: "AND",
					value: 1
				}]
				financialTheme.getAreaTree(this.params, res => {
					if (res) {
						res.value.forEach(e => {
							this.dpzbList.forEach(s => {
								if (e.continent == s.name) {
									e.code = s.value
								}
							})
						})
						this.allList = res.value
						let enterpriseCode = window.localStorage.getItem('enterpriseCode')
						if (enterpriseCode) {
							this.poolCode = enterpriseCode.split(',')
						} else {
							this.poolCode = [res.value[0].code, res.value[0].list[0].code]
						}
						this.getData()
					}
				})
			},
			arraySort(property) {
				return function(a, b) {
					var value1 = a[property]
					var value2 = b[property]
					return value1 - value2
				}
			},
			getData() {
				this.dataList = []
				this.echartsList = []
				this.leftList = []
				this.rightList = []
				let params = {
					enterpriseCode: ''
				}
				params.enterpriseCode = this.poolCode[1]
				window.localStorage.setItem("enterpriseCode", this.poolCode);
				humanResourceTheme.oneLevelData(params, res => {
					if (res.value.length > 0) {
						res.value.forEach(e => {

							this.echartsList.push(e)
						})
					}
					this.$nextTick(() => {
						this.echartsList.forEach((c, cx) => {
							this.dateEcharts(c, cx)
						})
					})
				})
			},

			//更多企业
			handleMore(val) {
				this.$refs.echartsDialog.add(val, 1)
			},
			dateEcharts(c, cx) {

				let chartDom = echarts.getInstanceByDom(document.getElementById(
					`pieChart${cx}`)); //有的话就获取已有echarts实例的DOM节点。
				if (chartDom == null) { // 如果不存在，就进行初始化。
					chartDom = echarts.init(document.getElementById(`pieChart${cx}`));
				}
				// let chartDom = echarts.init(document.getElementById(`pieChart${cx}`))
				let arr = []
				let xLabel = [];
				c.resultData.forEach(r => {
					xLabel.push(r.year)
				})
				let staLat = c.staLat.split('、')
				staLat.forEach(t => {
					let datalist = []
					c.resultData.forEach(s => {
						datalist.push(s.json[t])
					})
					arr.push({
						name: t,
						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
					}, )
				})

				let option = {
					backgroundColor: '',
					tooltip: {
						trigger: 'axis',

					},
					legend: {
						show: true,
						textStyle: {
							color: '#fff',
							fontSize: 14,
							padding: [0, 8, 0, 8]
						}
					},
					grid: {
						top: '15%',
						left: '10%',
						right: '5%',
						bottom: '15%',
					},
					xAxis: [{
						type: 'category',

						axisLabel: {
							textStyle: {
								color: '#FFFFFF',
								fontSize: 12,
							},
						},
						splitLine: {
							show: false,
							lineStyle: {
								color: '#233653',
							},
						},
						axisTick: {
							show: false,
						},
						data: xLabel,
					}, ],
					yAxis: [{
						// name: c.targetUnit,
						nameTextStyle: {
							color: "#fff",
							fontSize: 12,
							padding: [0, 60, 0, 0]
						},
						type: 'value',
						splitLine: {
							show: true,
							lineStyle: {
								color: '#1160a0',
								type: 'dashed'
							},
						},
						axisLabel: {
							interval: 0, //标签设置为全部显示
							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];
								// let unit = '';
								// var k = 10000,
								// 	sizes = ['', '万', '亿', '万亿'],
								// 	i;
								// if (params < k) {
								// 	params = params;
								// } else {
								// 	i = Math.floor(Math.log(params) / Math.log(k));
								// 	params = ((params / Math.pow(k, i))).toFixed(0);
								// 	unit = sizes[i];
								// }
								// return params + unit;


							},
							textStyle: {
								color: '#fff',
								fontSize: 14
							}
						},
						axisTick: {
							show: false,
						},
						triggerEvent: true

					}, ],
					series: arr
				}
				option && chartDom.setOption(option)

			},

		}
	}
</script>

<style lang="scss" scoped>
	@font-face {
		font-family: 'YouSheBiaoTiHei';
		src: url(~@/assets/fonts/YouSheBiaoTiHei-2.ttf);
	}

	@keyframes rotateImage {
		from {
			transform: rotate(0deg)
		}

		to {
			transform: rotate(360deg)
		}
	}

	@keyframes breath {
		from {
			opacity: 0.1;
		}

		50% {
			opacity: 1;
		}

		to {
			opacity: 0.1;
		}
	}

	@-webkit-keyframes breath {
		from {
			opacity: 0.1;
		}

		50% {
			opacity: 1;
		}

		to {
			opacity: 0.1;
		}
	}

	.full {
		margin-top: 10px;
		height: calc(100% - 42px);
	}

	.tab {
		width: 550px;
		height: 56px;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-evenly;

		.item {
			width: 134px;
			height: 40px;
			line-height: 40px;
			border-radius: 10px;
			background: linear-gradient(180deg, rgba(27, 154, 182, 1) 0%, rgba(18, 89, 132, 1) 100%);

			color: #fff;
			font-size: 16px;
			text-align: center;

		}

		.item-active {
			width: 134px;
			height: 40px;
			line-height: 40px;
			border-radius: 10px;
			background: linear-gradient(180deg, rgba(230, 129, 83, 1) 0%, rgba(74, 47, 31, 1) 100%);
			color: #fff;
			font-size: 16px;
			text-align: center;
		}
	}

	.breadcrumb {
		width: 100%;
		height: 45px;
		font-size: 12px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		line-height: 30px;
		padding: 0 20px;
		box-sizing: border-box;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;

		// border: 1px solid #fff;
		.left {
			height: 30px;
			display: flex;
			align-items: center;

			.crumb-item {
				height: 22px;
				line-height: 22px;
				padding: 0 20px;
				box-sizing: border-box;
				font-size: 12px;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #ADC9E9;
				margin-left: 5px;
				transform: skew(-25deg);
				cursor: pointer;
				background: url('~@/assets/img/breadcrumb.png') center / 100% 100% no-repeat;

				span {
					display: inline-block;
					transform: skew(25deg);
				}
			}

			.crumb-item:hover {
				height: 22px;
				line-height: 22px;
				padding: 0 20px;
				box-sizing: border-box;
				font-size: 12px;
				font-family: Microsoft YaHei;
				font-weight: 400;
				margin-left: 5px;
				color: #FFFFFF;
				cursor: pointer;
				background: url('~@/assets/img/breadcrumb-active.png') center / 100% 100% no-repeat;
			}

			.crumb-item-active {
				height: 22px;
				line-height: 22px;
				padding: 0 20px;
				box-sizing: border-box;
				font-size: 12px;
				font-family: Microsoft YaHei;
				font-weight: 400;
				margin-left: 5px;
				transform: skew(-25deg);
				color: #FFFFFF;
				cursor: pointer;
				background: url('~@/assets/img/breadcrumb-active.png') center / 100% 100% no-repeat;

				span {
					display: inline-block;
					transform: skew(25deg);
				}
			}
		}


	}

	.screen-body {
		width: 100%;
		height: calc(100% - 45px);
		padding: 0 5px;
		box-sizing: border-box;

		.screen-body-col {
			width: 100%;
		}

		.col-side {
			width: 100%;
			height: 50%;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;

			.side-echarts {
				position: relative;
				width: 33%;
				height: 100%;
				// background: url('~@/assets/img/echarts-bg.png') center / 100% 100% no-repeat;

			}

			.side-echarts1 {
				position: relative;
				width: 49%;
				height: 100%;
				// background: url('~@/assets/img/bg-2.png') center / 100% 100% no-repeat;
			}

			.more {
				position: absolute;
				align: right;
				top: 23px;
				right: 10px;
				width: 113px;
				height: 31px;
				cursor: pointer;
				line-height: 30px;
				text-align: center;
				font-size: 14px;
				font-family: Microsoft YaHei;
				font-weight: 300;
				color: #FFFFFF;
				background: url('~@/assets/img/more.png') center / 100% 100% no-repeat;
			}

			.more2 {
				position: absolute;
				align: right;
				top: 36px;
				right: 10px;
				width: 113px;
				height: 31px;
				line-height: 30px;
				text-align: center;
				font-size: 14px;
				font-family: Microsoft YaHei;
				font-weight: 300;
				color: #FFFFFF;
				background: url('~@/assets/img/more.png') center / 100% 100% no-repeat;
			}

			.active {
				color: #CCCCCC;
			}

			.side-echart2 {
				position: relative;
				background: url('~@/assets/img/echarts-bg2.png') center / 100% 100% no-repeat;

				.title2 {
					font-family: YouSheBiaoTiHei;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 38px;
					position: relative;
					display: flex;

					div:nth-child(1) {
						font-size: 22px !important;
						width: 150px;
						position: absolute;
						left: 60px;
						text-align: center;
					}

					div:nth-child(2) {
						font-size: 22px !important;
						position: absolute;
						width: 110px;
						right: 100px;
						text-align: center;
					}
				}
			}
		}

	}

	.axis-tip {
		display: none;
		position: absolute;
		padding: 5px 5px;
		font-size: 12px;
		line-height: 18px;
		color: #575757;
		background: #ffffff;
		box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
		border-radius: 4px;
	}

	.title-icon {
		width: 42px;
		height: 42px;
		position: absolute;
		right: 0;
		top: 0;
		cursor: pointer;
		background: url('~@/assets/img/titlle-icon.png') center / 100% 100% no-repeat;

		.more {
			top: 40px;
			left: -40px;
			width: 81px;
			height: 44px;
			background: #1E75B9;
			opacity: 0.61;
			border-radius: 5px;
			display: none;
		}

		.moreActive {
			font-size: 14px;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #fff;
			text-align: center;
			position: absolute;
			top: 40px;
			padding: 10px;
			box-sizing: border-box;
			left: -40px;
			width: 81px;
			height: 44px;
			background: rgba(29, 112, 178, 0.42);
			// opacity: 0.61;
			border-radius: 5px;

			span:hover {
				color: aqua;
			}
		}


	}

	//下拉框
	/deep/.el-select-dropdown {
		border: none;
		background-color: rgba(1, 28, 82, 0.8);
	}

	//输入框
	/deep/ .el-input {
		height: 35px !important;
	}

	/deep/ .el-input__inner {
		height: 35px !important;
		color: #eee;
		border-color: #00fff6;
		background-color: rgba(1, 28, 82, 0.8);
	}

	//聚焦时的样式
	.el-select .el-input.is-focus .el-input__inner {
		border-color: #0B61AA;
		background-color: rgba(1, 28, 82, 0.8);
		color: #00D3E9;
	}

	//下拉框选中
	.el-select-dropdown__item {
		color: #eee;
	}

	//鼠标经过下拉框
	.el-select-dropdown__item.hover,
	.el-select-dropdown__item:hover {
		color: #00D3E9;
		background-color: #0F3360;
	}
</style>
<style>
	.cascader .el-cascader-panel {
		background-color: #0F3360;
		border: none !important;
	}

	.cascader .el-cascader-menu {
		color: #fff !important;
		border: none !important;
	}

	.cascader .el-scrollbar__wrap {
		overflow: hidden
	}

	.el-popper[x-placement^="bottom"] {
		border: 1px solid #0B61AA;
	}

	.cascader .el-cascader-menu .el-cascader-node:hover {
		background-color: #0B61AA;
	}
</style>
