<template>
	<screenHeader :currentKey="currentKey">
		<div class="screen-body">
			<div class="map">
				<div class="print">
					<div class="print-title" @click="openDialog('MXQT')">MXQT</div>
					<img src="~@/assets/img/point.png" alt="">
					</img>
				</div>
				<div class="print">
					<div class="print-title" @click="openDialog('USPL')">USPL</div>
					<img src="~@/assets/img/point.png" alt="">
					</img>
				</div>
				<div class="print">
					<div class="print-title" @click="openDialog('BRSP')">BRSP</div>
					<img src="~@/assets/img/point.png" alt="">
					</img>
				</div>
				<div class="print">
					<img src="~@/assets/img/point.png" alt="">
					</img>
					<div class="print-title" @click="openDialog('ESLO')">ESLO</div>
				</div>
				<div class="print">
					<div class="print-title" @click="openDialog('FRPR')">FRPR</div>
					<img src="~@/assets/img/point.png" alt="">
					</img>
				</div>
				<div class="print">
					<div class="print-title" @click="openDialog('LUHQ')">LUHQ</div>
					<img src="~@/assets/img/point.png" alt="">
					</img>
				</div>
				<div class="print">
					<img src="~@/assets/img/point.png" alt="">
					</img>
					<div class="print-title1">

						<span @click="openDialog('CZCK')">CZCK</span>
						<span @click="openDialog('DEDH')">DEDH</span>
						<span @click="openDialog('DEGH')">DEGH</span>
						<span @click="openDialog('DEVW')">DEVW</span>
						<span @click="openDialog('DEBT')">DEBT</span>
						<span @click="openDialog('DERS')">DERS</span>
						<span @click="openDialog('DEIS')">DEIS</span>
					</div>
				</div>
				<div class="print">
					<img src="~@/assets/img/point.png" alt="">
					</img>
					<div class="print-title" @click="openDialog('SKDV')">SKDV</div>
				</div>
				<div class="print">
					<div class="print-title" @click="openDialog('CZCK')">CZCK</div>
					<img src="~@/assets/img/point.png" alt="">
					</img>
				</div>

				<div class="print">
					<div class="print-title" @click="openDialog('INMB')">1NMB</div>
					<img src="~@/assets/img/point.png" alt="">
					</img>
				</div>
				<div class="print">
					<div class="print-title" @click="openDialog('RUTT')">RUTT</div>
					<img src="~@/assets/img/point.png" alt="">
					</img>
				</div>
				<div class="print">
					<div class="print-title1">
						<!-- <span @click="openDialog('MXQT')">CNSY</span> -->
						<span @click="openDialog('CNIC')">CNIC</span>
						<span @click="openDialog('CNHC')">CNHC</span>
						<span @click="openDialog('CNJX')">CNJX</span>
						<span @click="openDialog('SGCI')">SGCI</span>
					</div>
					<img src="~@/assets/img/point.png" alt="">
					</img>
				</div>
				<div class="print">
					<img src="~@/assets/img/point.png" alt="">
					</img>
					<div class="print-title" @click="openDialog('HKIH')">HKIH</div>
				</div>
				<div class="print">
					<img src="~@/assets/img/point.png" alt="">
					</img>
					<div class="print-title" @click="openDialog('TCAP')">TCAP</div>
				</div>
				<div class="print">
					<img src="~@/assets/img/point.png" alt="">
					</img>
					<div class="print-title" @click="openDialog('CNSY')">CNSY</div>
				</div>
				<div class="print">
					<img src="~@/assets/img/point.png" alt="">
					</img>
					<div class="print-title" @click="openDialog('TRIB')">TRIB</div>
				</div>
			</div>
			<div class="dialog" v-if="dialogVisible">
				<div class="item">

					{{$i18n.locale === 'zh-CN'?'基础信息':'Basic information'}}
				</div>
				<div class="item">
					<div> {{$i18n.locale === 'zh-CN'?'中文名称':'Chinese name'}}</div>
					<div>{{dataDetails.name}}</div>
				</div>
				<div class="item">
					<div> {{$i18n.locale === 'zh-CN'?'英文名称':'English name'}}</div>
					<div>{{dataDetails.nameEn}}</div>
				</div>
				<div class="item disflex">
					<div> {{$i18n.locale === 'zh-CN'?'经营类型':'Type of operation'}}：</div>
					<div>
						{{ getDictName('jylx', dataDetails.businessType) }}
					</div>
				</div>
				<div class="item disflex">
					<div> {{$i18n.locale === 'zh-CN'?'负责人':'Person in charge'}}：</div>
					<div>{{dataDetails.liableUser}}</div>
				</div>
				<div class="item disflex">
					<div> {{$i18n.locale === 'zh-CN'?'注册国家':'Country of registration'}}：</div>
					<div>{{dataDetails.shortName}}</div>
				</div>
				<div class="item disflex">
					<div> {{$i18n.locale === 'zh-CN'?'成立时间':'Establishment time'}}：</div>
					<div>{{dataDetails.buildDate}}</div>
				</div>
				<div class="item disflex">
					<div> {{$i18n.locale === 'zh-CN'?'去年销售收入':"Last year's sales revenue"}}：</div>
					<div>
						{{dataDetails.lastYearSales}}
					</div>
				</div>
				<div class="item disflex">
					<div> {{$i18n.locale === 'zh-CN'?'去年利润收入':"Last year's profit income"}}：</div>
					<div>
						{{dataDetails.lastProfitsSales}}
					</div>
				</div>
				<div class="item disflex">
					<div class="details" @click="hanleDetails">
						{{$i18n.locale === 'zh-CN'?'查看企业详情':'View Company Details'}}</div>
				</div>
				<div class="icon" @click="shutDown"></div>
			</div>
			<div class="expansionIcon" v-if="!dialogVisible" @click="openIcon">

			</div>
		</div>
		<detailsDialog ref="detailsDialog"></detailsDialog>

	</screenHeader>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import * as echarts from 'echarts'
	import moment from "moment"
	import utils from '@/utils.js'
	import dictUtils from '@/components/dict/DictSelectUtils.js'
	import financialTheme from '@/api/bigScrenn/financialTheme.js'
	import investmentTheme from '@/api/bigScrenn/investmentTheme.js'
	import screenHeader from '@/views/BigScrenn/components/screenHeader.vue'
	import detailsDialog from '@/views/BigScrenn/comprehensiveTheme/components/detailsDialog.vue'
	import comprehensiveTheme from '@/api/bigScrenn/comprehensiveTheme.js'
	export default {
		components: {
			screenHeader,
			detailsDialog
		},
		data() {
			return {
				currentKey: 'comprehensiveTheme',
				dialogVisible: false,
				allList: [],
				zbList: [],
				dpzbList: [],
				newParams: {
					pageBean: {
						page: 1,
						pageSize: -1,
					},
					querys: []
				},
				dataDetails: {

				}
			}
		},
		created() {
			this.zbList = dictUtils.getDictItemsFromCache('zb_en')
			this.dpzbList = dictUtils.getDictItemsFromCache('dpzb')
			this.getAreaTree()
		},
		mounted() {

		},
		methods: {
			getDictName(code, value) {
				return utils.getDictName(code, value)
			},
			openDialog(val, name) {
				// this.$refs.detailsDialog.add(val)
				comprehensiveTheme.findByCode(val, res => {
					if (res.value) {
						this.dataDetails = res.value
						if (name != 'first') {
							this.dialogVisible = true
						}
					}
				})
			},
			shutDown() {
				this.dialogVisible = false
			},
			openIcon() {

				if (JSON.stringify(this.dataDetails) == "{}") {
					this.$message.warning('请选择企业')
				} else {
					this.dialogVisible = true
				}
			},
			hanleDetails() {
				if (JSON.stringify(this.dataDetails) == "{}") {} else {
					let poolCode = this.searchParentCodes(this.allList, this.dataDetails.code)
					window.localStorage.setItem("activeIndex", 'financialTheme');
					window.localStorage.setItem("enterpriseCode", [poolCode, this.dataDetails.code]);
					this.$router.push({
						name: 'financialTheme',
					})
				}

			},
			getAreaTree() {
				this.newParams.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.newParams, res => {
					if (res) {
						res.value.forEach(e => {
							this.dpzbList.forEach(s => {
								if (e.continent == s.name) {
									e.code = s.value
								}
							})
						})
						this.allList = res.value
						window.localStorage.setItem("enterpriseCode", [this.allList[0].code, this.allList[0].list[0].code]);

						console.log(this.allList);
						this.openDialog('MXQT', 'first')
					}
				})
			},
			searchParentCodes(data, code, result = []) {
				data.forEach((item) => {
					if (item.code === code) {
						return;
					}
					if (Array.isArray(item.list)) {
						item.list.forEach((child) => {
							if (child.code === code) {
								result.push(item.code);
								this.searchParentCodes(data, item.code, result);
							} else {
								this.searchParentCodes([child], code, result);
							}
						});
					}
				});
				return result;
			}
		}
	}
</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% - 50px);
	}

	.screen-body {
		width: 100%;
		height: 100%;
		padding: 0 5px;
		position: relative;
		box-sizing: border-box;
		background: url('~@/assets/img/synthesize-bg.jpg') center / 100% 100% no-repeat;

		.expansionIcon {
			position: absolute;
			left: 0;
			top: 225px;
			width: 16px;
			cursor: pointer;
			height: 98px;
			background: url('~@/assets/img/expansion.png') center / 100% 100% no-repeat;
		}

		.dialog {
			position: absolute;
			top: 5%;
			left: 0;
			width: 337px;
			height: 85%;
			padding: 14px 26px;
			box-sizing: border-box;
			background: url('~@/assets/img/big-dialog-bg.png') center / 100% 100% no-repeat;

			.item {
				padding: 15px 18px;
				box-sizing: border-box;
				color: #FFFFFF;
				font-size: 14px;
				font-family: Adobe Heiti Std;
				font-weight: normal;
				color: #FFFFFF;
				line-height: 27px;
				background: url('~@/assets/img/dialog-bg1.png') center / 100% 100% no-repeat;

			}

			.details {
				width: 100%;
				text-align: center;
				cursor: pointer;
			}

			.details:hover {
				color: #00D3E9;
				cursor: pointer;
			}

			.disflex {
				display: flex;
				// line-height: 14px;
				flex-wrap: wrap;
			}

			.item:nth-child(1) {
				font-size: 18px;
				font-family: Microsoft YaHei;
				font-weight: 400;
				text-align: center;
				height: 64px;
			}

			.icon {
				position: absolute;
				right: -14px;
				top: 180px;
				width: 16px;
				cursor: pointer;
				height: 98px;
				background: url('~@/assets/img/contraction.png') center / 100% 100% no-repeat;
			}
		}

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

			img {
				width: 42px;
				height: 45px;
			}

			.print {
				text-align: center;
			}

			.print-title {
				width: 80px;
				height: 20px;
				font-size: 16px;
				line-height: 20px;
				color: #fff;
				background: rgba(0, 0, 0, 0.8);
				border-radius: 5px;
				border: 1px solid #fff;
				margin-bottom: 5px;
				cursor: pointer;
			}

			.print-title:hover {
				color: #00fff6;
				border: 1px solid #00fff6;
			}

			.print-title1 {
				width: 80px;
				font-size: 16px !important;
				line-height: 20px;
				color: #fff;
				background: rgba(0, 0, 0, 0.8);
				border-radius: 5px;
				border: 1px solid #fff;
				margin-bottom: 5px;

				span {
					cursor: pointer;
					height: 20px;
					display: block;
					font-size: 16px !important;
				}

				span:hover {
					color: #00fff6;
				}
			}

			.print-title1:hover {
				border: 1px solid #00fff6;
			}

			.print:nth-child(1) {
				position: absolute;
				left: 18.3%;
				top: 43%;
			}

			.print:nth-child(2) {
				position: absolute;
				left: 19.5%;
				top: 36%;
			}

			.print:nth-child(3) {
				position: absolute;
				left: 29.5%;
				top: 57%;
			}

			.print:nth-child(4) {
				position: absolute;
				// display: flex;
				left: 43.3%;
				top: 35.5%;
			}

			.print:nth-child(5) {
				position: absolute;
				display: flex;
				left: 41.8%;
				top: 33%;
			}

			.print:nth-child(6) {
				position: absolute;
				// display: flex;
				left: 46%;
				top: 27%;
			}

			.print:nth-child(7) {
				position: absolute;
				left: 47.5%;
				top: 33%;
			}

			.print:nth-child(8) {
				position: absolute;
				display: flex;
				left: 50%;
				top: 32.5%;
			}

			.print:nth-child(9) {
				position: absolute;
				left: 49%;
				top: 26%;
			}

			.print:nth-child(10) {
				position: absolute;
				left: 64.5%;
				top: 42%;
			}

			.print:nth-child(11) {
				position: absolute;
				left: 69%;
				top: 16%;
			}

			.print:nth-child(12) {
				position: absolute;
				left: 71%;
				top: 34%;
			}

			.print:nth-child(13) {
				position: absolute;
				left: 73.5%;
				top: 45.3%;
			}

			.print:nth-child(14) {
				position: absolute;
				display: flex;
				left: 76%;
				top: 42.3%;
			}

			.print:nth-child(15) {
				position: absolute;
				display: flex;
				left: 75.6%;
				top: 38%;
			}

			.print:nth-child(16) {
				position: absolute;
				display: flex;
				left: 54.6%;
				top: 36.5%;
			}
		}
	}

	//输入框

	/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;
	}
</style>