<!-- 一级下转页面 -->
<template>
	<screenHeader :currentKey="currentKey">
		<div class="breadcrumb">
			<div class="left">
				{{ $i18n.locale === 'zh-CN'?'当前位置':'Current position'}}：
				<div class="crumb-item" @click="balckTwo()">
					<span> {{ $i18n.locale === 'zh-CN'?'资金主题':'Fund Theme'}}</span>
				</div>
				<div class="crumb-item-active">
					<span>
						{{this.$route.params.name}}
					</span>
				</div>
			</div>
			<!-- <el-cascader popper-class="cascader" :options="allList" v-model="poolCode" :props='propsData'
				placeholder="请选择企业" style="width: 250px;" @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="sreach">
				<!-- 企业 -->
				<el-cascader popper-class="cascader" :options="allList" v-model="poolCode" :props='propsData'
					placeholder="请选择企业" @change="firmSerach()" :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 class="search-week">
					{{$i18n.locale === 'zh-CN'?'实际周':'Practical week'}}
					<el-date-picker popper-class="screen-date-picker" v-model="currentWeek" type="week"
						format="yyyy 第 WW 周" placeholder="选择开始周" style="margin-right: 10px;" @change="geSntWeek()">
					</el-date-picker>
					{{$i18n.locale === 'zh-CN'?'计划周':'Planning week'}}:
					<el-date-picker popper-class="screen-date-picker" v-model="startWeek" type="week"
						format="yyyy 第 WW 周" placeholder="选择开始周" @change="geSntWeek()">
					</el-date-picker> 至
					<el-date-picker popper-class="screen-date-picker" v-model="endWeek" type="week" format="yyyy 第 WW 周"
						placeholder="选择结束周" @change="geSntWeek()">
					</el-date-picker>
				</div>
			</div>
			<div class="page-echarts">
				<div id="otherEcharts" class="full2" refs=""></div>
			</div>
		</div>


	</screenHeader>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import moment from "moment"
	import * as echarts from 'echarts'
	import dictUtils from '@/components/dict/DictSelectUtils.js'
	import fundTheme from '@/api/bigScrenn/fundTheme.js'
	import screenHeader from '@/views/BigScrenn/components/screenHeader.vue'


	import humanResourceTheme from '@/api/bigScrenn/humanResourceTheme.js'
	import financialTheme from '@/api/bigScrenn/financialTheme.js'
	export default {
		components: {
			screenHeader
		},
		data() {
			return {
				currentKey: 'fundTheme',
				hierarchy: 2, //页面层级
				allList: [],
				zbList: [],
				poolCode: '',
				propsData: {
					children: 'list',
					label: 'code',
					value: 'code',
					expandTrigger: 'hover'
				},
				params: {
					pageBean: {
						page: 1,
						pageSize: -1,
					},
					querys: []
				},
				zbList: [],
				type: '',
				currentWeek: '', //当前周
				startWeek: '',
				endWeek: '',
				poolData: {
					week: '',
					year: '',
					planWeeks: [],
					enterpriseCode: ''
				}, //资金池公司银行实时余额
			}
		},
		created() {
			this.zbList = dictUtils.getDictItemsFromCache('zb_en')
			this.type = this.$route.params.type
			this.startWeek = window.localStorage.getItem('startWeek')
			this.endWeek = window.localStorage.getItem('endWeek')
			this.currentWeek = window.localStorage.getItem('currentWeek')
			this.geSntWeek()
			this.getAreaTree()
		},
		mounted() {
			// this.()
			this.$root.$on('resize', () => {
				this.resize(500)
			})
		},

		watch: {},

		computed: {},
		methods: {
			balckTwo() {
				this.$router.push({
					name: 'fundTheme',
				})
			},
			//获取企业树
			getAreaTree() {
				console.log(this.type);
				let poolType = this.type == 0 ? 0 : this.type == 1 ? 1 : this.type == 2 ? 2 : ''
				let params = JSON.parse(JSON.stringify(this.params))
				params.querys = [{
					group: "main",
					operation: "EQUAL",
					parentGroup: "",
					property: "type_",
					relation: "AND",
					value: 1
				}, {
					group: "main",
					operation: "EQUAL",
					parentGroup: "",
					property: "pool_type_",
					relation: "AND",
					value: poolType
				}, {
					group: "main",
					operation: "EQUAL",
					parentGroup: "",
					property: "run_status_",
					relation: "AND",
					value: 1
				}]
				fundTheme.getAreaTree(params, res => {
					if (res) {
						res.value.forEach(e => {
							this.zbList.forEach(s => {
								if (e.continent == s.name) {
									e.code = s.value
								}
							})
						})

						this.allList = res.value
						this.poolCode = [res.value[0].code, res.value[0].list[0].code]
						// this.getData()
						switch (this.type) {
							case 0:
								this.getGroupData()
								break;
							case 1:
								this.getPoolData()
								break;
							case 2:
								this.getPlanData()
								break;
							case 3:
								this.getChinaCompanyData()
								break;


						}
					}
				})
			},
			firmSerach() {
				console.log(this.poolCode);
				let arr = JSON.parse(JSON.stringify(this.poolCode))
				this.params.enterpriseCode = arr.pop()
				this.geSntWeek()
			},
			geSntWeek() {
				let startWeek = ''
				let endWeek = ''
				if (this.startWeek) {
					this.poolData.startYear = moment(this.startWeek).utcOffset(480).format("YYYY")
					startWeek = moment(this.startWeek).utcOffset(480).format("W")
				}
				if (this.endWeek) {
					this.poolData.endYear = moment(this.endWeek).utcOffset(480).format("YYYY")
					endWeek = moment(this.endWeek).utcOffset(480).format("W")
				}
				if (this.currentWeek) {
					this.poolData.year = moment(this.endWeek).utcOffset(480).format("YYYY")
					this.poolData.week = moment(this.currentWeek).utcOffset(480).format("W")
				}
				if (startWeek && endWeek) {
					if (this.poolData.startYear == this.poolData.endYear) {
						let arr = []
						for (let i = 0; i < endWeek - startWeek + 1; i++) {
							arr.push(endWeek - i)
						}
						this.poolData.planWeeks = arr.sort()
					}
				} else {
					if (this.poolData.endYear - this.poolData.startYear > 0) {
						let weekNum = Math.ceil(Math.abs(this.endWeek - this.startWeek) / 1000 / 60 / 60 / 24 / 7)
						weekNum
					}
				}
				switch (this.type) {
					case 0:
						this.getGroupData()
						break;
					case 1:
						this.getPoolData()
						break;
					case 2:
						this.getPlanData()
						break;
					case 3:
						this.getChinaCompanyData()
						break;
				}
			},
			//资金池公司银行实时余额
			getPoolData() {
				let params = JSON.parse(JSON.stringify(this.poolData))
				params.enterpriseCode = this.poolCode[1]
				fundTheme.poolPlanData(params, res => {
					if (res.value) {
						this.$nextTick(() => {
							this.getData(res.value.length > 0 ? res.value : [])
						})
					}

				})
			},
			//企业银行实时余额
			getPlanData() {
				let params = JSON.parse(JSON.stringify(this.poolData))
				params.enterpriseCode = this.poolCode[1]
				fundTheme.companyPlanData(params, res => {
					if (res.value) {
						this.$nextTick(() => {
							this.getData(res.value.length > 0 ? res.value : [])
						})
					}

				})
			},
			//集团银行实时余额
			getGroupData() {
				let params = JSON.parse(JSON.stringify(this.poolData))
				params.enterpriseCode = this.poolCode[1]
				fundTheme.groupPlanData(params, res => {
					if (res.value) {
						this.$nextTick(() => {
							this.getData(res.value.length > 0 ? res.value : [])
						})
					}
				})
			},
			//中国区公司银行实时余额
			getChinaCompanyData() {
				let params = JSON.parse(JSON.stringify(this.poolData))
				params.enterpriseCode = this.poolCode[1]
				fundTheme.chinaCompanyData(params, res => {
					if (res.value) {
						this.$nextTick(() => {
							this.getData(res.value.length > 0 ? res.value : [])
						})
					}
				})
			},

			getData(val) {
				let chartDom = echarts.init(document.getElementById('otherEcharts'))
				let xLabel = []
				let actual = []
				let budget = []
				let warnValue = []
				val.forEach(e => {
					xLabel.push(e.week + (this.$i18n.locale === 'zh-CN' ? '周' : ' Week'))
					actual.push(e.actual)
					budget.push(e.budget)
					warnValue.push(e.warnValue)
				})
				let arr = []
				if (this.type == 2 || this.type == 3) {
					arr = [{
						name: this.$i18n.locale === 'zh-CN' ? '实际余额' : 'Actual balance',
						type: 'line',
						symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
						smooth: true,
						lineStyle: {
							normal: {
								width: 3,
								// color: '#518EF5', // 线条颜色
							},
						},
						itemStyle: {
							normal: {

								label: {
									show: false, //开启显示
									color: '#fff',
									position: 'top', //在上方显示
									formatter: function(res) {
										if (res.value) {
											return res.value
										} else {
											return 0
										}
									},
								},
							},

						},
						symbolSize: 8, //设定实心点的大小
						data: actual
					}, {
						name: this.$i18n.locale === 'zh-CN' ? '计划余额' : 'Planned balance',
						type: 'line',
						symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
						smooth: true,
						lineStyle: {
							normal: {
								width: 3,
								// color: '#518EF5', // 线条颜色
							},
						},
						itemStyle: {
							normal: {

								label: {
									show: false, //开启显示
									color: '#fff',
									position: 'top', //在上方显示
									formatter: function(res) {
										if (res.value) {
											return res.value
										} else {
											return 0
										}
									},
								},
							},

						},
						symbolSize: 8, //设定实心点的大小
						data: budget
					}]
				} else {
					arr = [{
						name: this.$i18n.locale === 'zh-CN' ? '实际余额' : 'Actual balance',
						type: 'line',
						symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
						smooth: true,
						lineStyle: {
							normal: {
								width: 3,
								// color: '#518EF5', // 线条颜色
							},
						},
						itemStyle: {
							normal: {

								label: {
									show: false, //开启显示
									color: '#fff',
									position: 'top', //在上方显示
									formatter: function(res) {
										if (res.value) {
											return res.value
										} else {
											return 0
										}
									},
								},
							},

						},
						symbolSize: 8, //设定实心点的大小
						data: actual
					}, {
						name: this.$i18n.locale === 'zh-CN' ? '计划余额' : 'Planned balance',
						type: 'line',
						symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
						smooth: true,
						lineStyle: {
							normal: {
								width: 3,
								// color: '#518EF5', // 线条颜色
							},
						},
						itemStyle: {
							normal: {

								label: {
									show: false, //开启显示
									color: '#fff',
									position: 'top', //在上方显示
									formatter: function(res) {
										if (res.value) {
											return res.value
										} else {
											return 0
										}
									},
								},
							},

						},
						symbolSize: 8, //设定实心点的大小
						data: budget
					}, {
						name: this.$i18n.locale === 'zh-CN' ? '阈值' : 'Threshold value',
						type: 'line',
						symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
						smooth: true,
						lineStyle: {
							normal: {
								width: 3,
							},
						},
						itemStyle: {
							normal: {

								label: {
									show: false, //开启显示
									color: '#fff',
									position: 'top', //在上方显示
									formatter: function(res) {
										if (res.value) {
											return res.value
										} else {
											return 0
										}
									},
								},
							},

						},
						symbolSize: 8, //设定实心点的大小
						data: warnValue
					}]
				}
				let option = {
					backgroundColor: '',
					tooltip: {
						trigger: 'axis',

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

						axisLabel: {
							textStyle: {
								color: '#FFFFFF',
								fontSize: 12,
							},
						},
						splitLine: {
							show: false,
							lineStyle: {
								color: '#233653',
							},
						},
						axisTick: {
							show: false,
						},
						data: xLabel,
					}, ],
					yAxis: [{
						name: '千欧',
						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];
							},
							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);
	}

	/deep/::-webkit-scrollbar {
		width: 0 !important;
	}

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

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

	.full3 {
		margin-top: 40px;
		height: calc(100% - 72px);
	}



	.screen-body {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 100%;
		height: calc(100% - 45px);
		box-sizing: border-box;
		padding: 0 20px;
		position: relative;

		.sreach {
			display: flex;
			justify-content: space-between;

			.search-week {
				font-family: YouSheBiaoTiHei;
				font-weight: 400;
				color: #FFFFFF;
				padding-left: 50px;
				box-sizing: border-box;
				line-height: 34px;
				height: 40px;
				text-align: right;
				font-size: 16px;
			}
		}

		.page-echarts {
			width: 100%;
			height: calc(100% - 50px);
			background-color: #091d3d;
			border: 1px solid #10408c;
		}


	}

	.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;
			}
		}
	}


	.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);
				}
			}
		}

	}

	/deep/ .el-input__inner {
		color: #fff;
		background-color: transparent !important;
		border-color: #80ffff;
		border: 1px solid #0F3662;
		height: 30px;
		padding: 0;
		text-align: center;
	}

	/deep/ .el-range-editor {
		color: #fff;
	}

	/deep/.el-range-separator {
		color: #fff;
	}

	/deep/.el-range-input {
		color: #fff !important;
		background-color: transparent !important;
	}

	/deep/.el-range-editor .el-range__icon {
		display: none;

	}

	/deep/.el-input__icon {
		line-height: 30px;
	}

	.el-range__icon {
		display: none;

	}

	.cascader {

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

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

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

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

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

		//鼠标经过下拉框
		.el-select-dropdown__item.hover,
		.el-select-dropdown__item:hover {
			color: #00D3E9 !important;
			background-color: #0F3360 !important;
		}
	}
</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>
