<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'?'运营主题':'Operation Theme'}}</span>
				</div>
			</div>
			<div v-if="tabActive==1">
				<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>
				&nbsp;
				<el-date-picker popper-class="screen-date-picker" v-model="yearValue" type="year" value-format="yyyy"
					@change="firmSerach()" placeholder="选择年" style="width: 110px;">
				</el-date-picker>
			</div>

		</div>
		<div class="tab">
			<div v-for="(item,index) in tabList" :class="tabActive==index?'item-active':'item'"
				@click="clickTab(index)">
				{{ $i18n.locale === 'zh-CN'?item.name:item.nameEn}}
			</div>
		</div>
		<div class="divider">
		</div>
		<!-- 宏观 -->
		<macroData ref="macroData" v-if="tabActive==0"></macroData>
		<!-- 运行 -->
		<runningPlate ref="runningPlate" v-if="tabActive==1"></runningPlate>
		<!-- 销售 -->
		<salesSection ref="salesSection" v-if="tabActive==2"></salesSection>

	</screenHeader>
</template>

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

	export default {
		components: {
			screenHeader,
			echartsTitle,
			macroData,
			runningPlate,
			salesSection
		},
		data() {
			return {
				currentKey: 'operationTheme',
				hierarchy: 1, //页面层级
				tabActive: 0,
				echartsList: [], //所有echarts数据
				tabList: [{
						name: "宏观数据",
						nameEn:'Macro data',
						value: 0
					},
					{
						name: "运行板块",
						nameEn:'Operating plate',
						value: 1
					},
					{
						name: "销售板块",
						nameEn:'Sales section',
						value: 2
					},
				],
				dataList: [],
				staLatList: [{
						name: '实际值',
						value: 1
					},
					{
						name: '预算值',
						value: 2
					}
				],
				leftList: [], //左边echarts
				rightList: [], //右边echarts
				leftData: [], //左边
				rightData: [], //右边
				rateData: {},
				options: [{
					value: '选项1',
					label: '1'
				}],
				value: '',
				options1: [{
					value: '选项1',
					label: '2'
				}],
				value1: '',
				params: {
					pageBean: {
						page: 1,
						pageSize: -1,
					},
					querys: []
				},
				allList: [],
				zbList: [],
				poolCode: '',
				yearValue: '',
				dpzbList: [],
				propsData: {
					children: 'list',
					label: 'code',
					value: 'code',
					expandTrigger: 'hover'
				},
			}
		},
		created() {
			this.dpzbList = dictUtils.getDictItemsFromCache('dpzb')
			this.yearValue=moment().format('YYYY')
			window.localStorage.setItem('yearValue',this.yearValue)
			this.getAreaTree()
			window.localStorage.setItem('activeIndex', this.currentKey);
			window.localStorage.setItem("pageName", '运营主题');
			if (window.localStorage.getItem('tabActive')) {
				this.tabActive = window.localStorage.getItem('tabActive')
			} else {
				this.tabActive = 0
			}
		},
		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]
						}
					}
				})
			},
			clickTab(val) {
				window.localStorage.setItem('tabActive', val)
				this.tabActive = val
			},
			firmSerach() {
				let arr = JSON.parse(JSON.stringify(this.poolCode))
				window.localStorage.setItem('enterpriseCode',arr)
				window.localStorage.setItem('yearValue',this.yearValue)
				this.$refs.runningPlate.getData();
			},
		}
	}
</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;
		}
	}

	.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;
				cursor: pointer;
				background: url('~@/assets/img/breadcrumb.png') center / 100% 100% no-repeat;
				transform: skew(-25deg);

				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;
				color: #FFFFFF;
				cursor: pointer;
				background: url('~@/assets/img/breadcrumb-active.png') center / 100% 100% no-repeat;
				transform: skew(-25deg);

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

	}

	.tab {
		width: 550px;
		height: 45px;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		background: url('~@/assets/img/operation-tab-bg.png') center / 100% 100% no-repeat;

		.item {
			width: 201px;
			height: 44px;
			line-height: 44px;
			background: url('~@/assets/img/operation-tab.png') center / 100% 100% no-repeat;
			color: #fff;
			font-size: 16px;
			text-align: center;

		}

		.item-active {
			width: 201px;
			height: 44px;
			line-height: 44px;
			// background: linear-gradient(180deg, rgba(230, 129, 83, 1) 0%, rgba(74, 47, 31, 1) 100%);
			background: url('~@/assets/img/operation-tab-active.png') center / 100% 100% no-repeat;
			color: #fff;
			font-size: 16px;
			text-align: center;
		}
	}

	.divider {
		width: 100%;
		height: 1px;
		background: #5C83C6;
		margin-bottom: 10px;
	}


	//下拉框
	/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: #0F3662;
		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;
	}

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

	}

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

	/deep/.el-breadcrumb__item:last-child .el-breadcrumb__inner,
	.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover,
	.el-breadcrumb__item:last-child .el-breadcrumb__inner a,
	.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover {
		color: #0DB2F4;
	}
</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>