<template>
	<div class="root" style="width:100%;height:100vh;background-color: #000102;">
		<div id="mainContain" class="mainContain" ref="dataScreenRef">
			<div class="bigScreenBox">
				<div class="whzl-header">
					<h1>
						<router-link :to="{name:'index'}">
							<div class="app-loading__logo" style="right: auto">
								<img src="/img/logo.png">{{ indexBackMsg }}
							</div>
						</router-link>
						黑龙江智慧粮仓云平台
						<div><span>{{ time.substr(11, 8) }}<br/>{{ time.substr(0, 11) }}</span></div>
					</h1>
				</div>
				<div class="main-page homePage">
					<div class="homePage-left">
						<ul class="homePage-left-number">
							<li>
								<img src="/src/assets/images/mapPage/leftIcon1.png" alt=""/>
								<div>
									<p>贷款额</p>
									<p>
										<countTo :end='loanSum' :autoPlay="true" decimals="2" :duration='2000'/>
										<em>元</em></p>
								</div>
							</li>
							<li>
								<img src="/src/assets/images/mapPage/leftIcon1.png" alt=""/>
								<div>
									<p>质押量</p>
									<p>
										<countTo :end='mortgageCount' :autoPlay="true" decimals="2" :duration='2000'/>
										<em>万吨</em></p>
								</div>
							</li>
							<li>
								<img src="/src/assets/images/mapPage/leftIcon1.png" alt=""/>
								<div>
									<p>利息</p>
									<p>
										<countTo :end='loanInterest' :autoPlay="true" decimals="2" :duration='2000'/>
										<em>元</em></p>
								</div>
							</li>
						</ul>
						<div class="leftTabBar">
							<span :class="{'active':ledtTab=='1'}" @click="changeTable('1')">主流价格</span>
							<span :class="{'active':ledtTab=='2'}" @click="changeTable('2')">地区交易额</span>
							<span :class="{'active':ledtTab=='3'}" @click="changeTable('3')">期货信息</span>
						</div>
						<div class="leftTab">
							<iTable :list="list" :header="header" style="width: 100%;height: 100%;" v-if="ledtTab=='1'"></iTable>
							<iTable3 :list="list3" :header="header3" style="width: 100%;height: 100%;" v-if="ledtTab=='2'"></iTable3>
							<MapFutures :list="mapZoneFutures" style="width: 100%;height: 100%;" v-if="ledtTab=='3'"></MapFutures>
						</div>
					</div>
					<div class="homePage-center">
						<div class="mapBox" style="display:flex;flex:1">
							<lxmap></lxmap>
						</div>
						<div class="centerBottom">
							<ul>
								<li @click="centerDialogFun('项目离线')" class="redFont">
									<countTo :end='projectCount' :autoPlay="true" :duration='2000'/>
									<p>项目离线</p></li>
								<li @click="centerDialogFun('出库入库')">
									<countTo :end='chuRuKuCount' :autoPlay="true" :duration='2000'/>
									<p>出库入库</p></li>
								<li @click="centerDialogFun('风险预警')" class="redFont">
									<countTo :end='loanCount1' :autoPlay="true" :duration='2000'/>
									<p>风险预警</p></li>
								<li @click="centerDialogFun('设备离线')" class="redFont">
									<countTo :end='deviceCount' :autoPlay="true" :duration='2000'/>
									<p>设备离线</p></li>
								<li @click="centerDialogFun('飞行监管')">
									<countTo :end='flyerCount' :autoPlay="true" :duration='2000'/>
									<p>飞行监管</p></li>
							</ul>
						</div>
					</div>
					<div class="homePage-right">
						<!-- 右侧顶部数字部分 -->
						<div class="homePage-right-number">
							<ul>
								<li @click="rightDialogFun('车辆审批')">
									<div><img src="@/assets/images/mapPage/rightIcon1.png" alt=""/></div>
									<div>
										<p>车辆审批</p>
										<countTo :end='truckBookCount' :autoPlay="true" :duration='2000'/>
									</div>
								</li>
								<li @click="rightDialogFun('扦样确认')">
									<div><img src="@/assets/images/mapPage/rightIcon2.png" alt=""/></div>
									<div>
										<p>扦样确认</p>
										<countTo :end='samplingCount' :autoPlay="true" :duration='2000'/>
									</div>
								</li>
								<li @click="rightDialogFun('还款申请')">
									<div><img src="@/assets/images/mapPage/rightIcon3.png" alt=""/></div>
									<div>
										<p>还款申请</p>
										<countTo :end='repayCount' :autoPlay="true" :duration='2000'/>
									</div>
								</li>
								<li @click="rightDialogFun('放款申请')">
									<div><img src="@/assets/images/mapPage/rightIcon4.png" alt=""/></div>
									<div>
										<p>放款申请</p>
										<countTo :end='loanCount' :autoPlay="true" :duration='2000'/>
									</div>
								</li>
								<li @click="rightDialogFun('人工补单')">
									<div><img src="@/assets/images/mapPage/rightIcon5.png" alt=""/></div>
									<div>
										<p>人工补单</p>
										<countTo :end='plugCount' :autoPlay="true" :duration='2000'/>
									</div>
								</li>
								<li @click="rightDialogFun('门锁预约')">
									<div><img src="@/assets/images/mapPage/rightIcon6.png" alt=""/></div>
									<div>
										<p>门锁预约</p>
										<countTo :end='lockCount' :autoPlay="true" :duration='2000'/>
									</div>
								</li>
							</ul>
						</div>
						<!-- 右侧底部表格数据 -->
						<div class="homePage-right-table">
							<div class="title"><span>待处理汇总</span></div>
							<div class="rightTab">
								<iTable2 :list="list2" :header="header2" v-if="list2.length>0"></iTable2>
							</div>
						</div>
					</div>
				</div>

				<!-- 底部弹窗  v-if="centerDialog"-->
				<div class="centerDialog" v-if="centerDialog">
					<div class="title">{{ centerDialogTitle }}<img src="@/assets/images/mapPage/close.png" alt="" @click="centerDialogClose"></div>
					<div class="tableData">
						<iTable4 :list="list4" style="width: 100%;height: 100%;"></iTable4>
					</div>
				</div>

				<!-- 右侧弹窗 -->
				<!-- <div class="rightDialog" v-if="rightDialog">
					<div><img src="@/assets/images/mapPage/icon1.png" alt="">预约申请信息</div>
					<p>黑A68666 水稻 湿粮 水份:0.1; 霉变:0.4;容重:0.2;不完善粒:0.3;</p>
					<span>2023-11-17 13:42:08</span>
				</div> -->
				<div class="centerDialog" v-if="rightDialog">
					<div class="title">{{ rightDialogTitle }}<img src="@/assets/images/mapPage/close.png" alt="" @click="rightDialogClose"></div>
					<div class="tableData">
						<iTable5 :list="list5" style="width: 100%;height: 100%;"></iTable5>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup name="depotMapPage">
import sysConfig from "@/config";
import depotMapPageApi from '@/api/biz/depotMapPageApi'
// import {CountUp} from 'countup.js'
//@ts-ignore
import moment from 'moment'
import iTable from './iTable.vue'
import iTable3 from './iTable3.vue'
import iTable2 from './iTable2.vue'
import iTable4 from './iTable4.vue'
import iTable5 from './iTable5.vue'
import MapFutures from './mapFutures.vue'

import lxmap from './hljmap.vue'
import countTo from '../../../components/vue-count-to/vue-countTo.vue'
//点击首页按钮回到首页
import {useRouter} from 'vue-router'
import {ref, onMounted, onBeforeUnmount} from 'vue'

//获取路由器对象
let $router = useRouter()
// 左侧表格数据切换
let ledtTab = ref(1)
const changeTable = (type) => {
	ledtTab.value = type
}
//存储当前时间
let time = ref(moment().format('YYYY.MM.DD HH:mm:ss'))
let timer = ref(0)

let indexBackMsg = ref('👈点击返回首页')
//获取数据大屏展示内容盒子的DOM元素
let dataScreenRef = ref()
onMounted(() => {
	setInterval(() => {
		indexBackMsg.value = ''
		time.value = moment().format('YYYY.MM.DD HH:mm:ss')
	}, 1000)
	// 初始化时为外层盒子加上缩放属性，防止刷新界面时就已经缩放
	if (dataScreenRef.value) {
		dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`
		dataScreenRef.value.style.width = `1920px`
		dataScreenRef.value.style.height = `1080px`
	}
	/**  其他代码 */
	// 为浏览器绑定事件
	window.addEventListener('resize', resize)
})

onBeforeUnmount(() => {
	clearInterval(timer.value)
})

let loanSum = ref(null)
let mortgageCount = ref(null)
let loanInterest = ref(null)

let chuRuKuCount = ref(null)
let loanCount1 = ref(null)
let deviceCount = ref(null)
let flyerCount = ref(null)
let projectCount = ref(null)

let truckBookCount = ref(null)
let samplingCount = ref(null)
let repayCount = ref(null)
let loanCount = ref(null)
let plugCount = ref(null)
let lockCount = ref(null)

let list = ref([])
let header = [{title: '地区', flex: 1}, {title: '粮食种类', flex: 1}, {title: '价格', flex: 1}]

let list3 = ref([])
let header3 = [{title: '地区', flex: 1}, {title: '贷款额(元)', flex: 1}, {title: '质押量(吨)', flex: 1}, {title: '利息(元)', flex: 1}]

let list2 = ref([])
let header2 = [{title: '粮库', flex: 2}, {title: '分类', flex: 0.7}, {title: '数量', flex: 0.7}, {title: '时间', flex: 2}]
//期货信息列表
let mapZoneFutures = ref([])
onMounted(() => {
	//左上
	const onloadTo = () => {
		//左上
		depotMapPageApi.orderSum().then((data) => {
			loanSum.value = data.loanSum
			mortgageCount.value = data.mortgageCount
			loanInterest.value = data.loanInterest
		})
		//左下表格-主流地价格_列表
		depotMapPageApi.mainZonePrice().then((data) => {
			/*while (data.length < 30) {
				data = data.concat(data)
			}*/
			list.value = data
		})
		//左下表格-交易地区
		depotMapPageApi.mapZoneSum().then((data) => {
			list3.value = data
		})
		//左下表格-期货信息
		depotMapPageApi.mapZoneFutures().then((data) => {
			mapZoneFutures.value = data
		})
		//中下
		depotMapPageApi.waitProcessSum().then((data) => {
			chuRuKuCount.value = data.chuRuKuCount
			loanCount1.value = data.loanCount
			deviceCount.value = data.deviceCount
			flyerCount.value = data.flyerCount
			projectCount.value = data.projectCount
		})
		//右上
		depotMapPageApi.waitApprovalSum().then((data) => {
			truckBookCount.value = data.truckBookCount
			samplingCount.value = data.samplingCount
			repayCount.value = data.repayCount
			loanCount.value = data.loanCount
			plugCount.value = data.plugCount
			lockCount.value = data.lockCount
		})
		//右下表格
		depotMapPageApi.waitApprovalGroup().then((data) => {
			list2.value = data
		})
	}
	onloadTo()
	setInterval(() => {
		onloadTo()
	}, 300000)
})

let centerDialogTitle = ref('报警信息')
const centerDialog = ref(false)
let list4 = ref([])
const centerDialogFun = (alarmType) => {
	centerDialog.value = true
	centerDialogTitle.value = alarmType
	depotMapPageApi.waitProcessList({'alarmType': alarmType}).then((data) => {
		list4.value = data
	})
}
const centerDialogClose = (alarmType) => {
	centerDialog.value = false
}

let rightDialogTitle = ref('报警信息')
const rightDialog = ref(false)
let list5 = ref([])
const rightDialogFun = (alarmType) => {
	rightDialog.value = true
	rightDialogTitle.value = alarmType
	depotMapPageApi.waitApprovalList({'titleName': alarmType}).then((data) => {
		list5.value = data
	})
}
const rightDialogClose = (alarmType) => {
	rightDialog.value = false
}

onUnmounted(() => {

})

//定义大屏缩放比例
function getScale(w = 1920, h = 1080) {
	const ww = window.innerWidth / w
	const wh = window.innerHeight / h
	//return ww < wh ? ww : wh  //返回这里会留白
	return ww + ',' + wh   //返回这里则不留白
}

// 监听浏览器 resize 事件
const resize = () => {
	if (dataScreenRef.value) {
		dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`
		// dataScreenRef.value.style.width = `1920px`
		// dataScreenRef.value.style.height = `1080px`
	}
	/**  其他代码 */
}
</script>

<style lang="less" scoped>
@font-face {
	font-family: 'TsangerYuYangT';
	src: url('@/assets/font/TsangerYuYangT-W05.ttf');
}

@font-face {
	font-family: 'DINPro';
	src: url('@/assets/font/DINPro-Medium.otf');
}

@font-face {
	font-family: 'SourceHanSansCN';
	src: url('@/assets/font/SourceHanSansCN-Regular.otf');
}

@font-face {
	font-family: 'SourceHanSansCNBold';
	src: url('@/assets/font/SourceHanSansCN-Bold.otf');
}

#mainContain {
	display: flex;
	position: fixed;
	width: 1920px;
	height: 1080px;
	left: 50%;
	top: 50%;
	transform-origin: left top;
	overflow: hidden;
	flex-direction: column;
	margin: 0 auto;
	transition-duration: 0s;
	margin: 0 auto;
	// background: #010512;
	/* display: none; */
	background: #010512 url(/src/assets/images/mapPage/homeBg.png) no-repeat left top;
	background-size: 100% 100%;
	font-family: SourceHanSansCN;

	.bigScreenBox {
		height: 100%;
		background: url(/src/assets/images/mapPage/homebox.png) no-repeat left top;
		background-size: 100% 100%;

		.whzl-header {
			position: relative;
			width: 1920px;
			/* 必须设置*/
			height: 74px;
			line-height: 74px;
			padding: 0 18px;
			transform-origin: unset;
			transform: unset;
			margin-bottom: unset;

			h1 {
				position: relative;
				font-size: 36px;
				font-family: TsangerYuYangT;
				font-weight: normal;
				font-style: italic;
				color: #fcfffe;
				line-height: 60px;
				text-align: center;
				letter-spacing: 3px;
				// background: linear-gradient(184deg, #FFFFFF 0%, #C6D1E5 100%);
				// -webkit-background-clip: text;
				// -webkit-text-fill-color: transparent;
				background-image: linear-gradient(184deg, #FFFFFF, #C6D1E5);
				color: transparent;
				-webkit-background-clip: text;

				div {
					position: absolute;
					top: 0;
					right: 20px;
					font-size: 18px;
					font-family: DINPro;
					color: #aad4ff;
					padding-top: 5px;
					z-index: 1;

					span {
						display: inline-block;
						width: 180px;
						line-height: 20px;
						text-align: right;
					}
				}
			}
		}

		.homePage {
			padding: 20px 55px 96px 55px;
			box-sizing: border-box;
		}

		.main-page,
		.main-page .main-bg {
			width: 100%;
			height: 100%;
			display: flex;
			flex: 1;
			position: relative;
			/* overflow: hidden; */

			.homePage-left {
				width: 400px;
				display: flex;
				flex-direction: column;
				padding-bottom: 50px;

				.homePage-left-number {
					li {
						margin-bottom: 20px;
						height: 77px;
						list-style-type: none;
						display: flex;
						align-content: center;
						font-size: 16px;
						font-family: Source Han Sans CN;
						// border: 1px solid;
						border-image: linear-gradient(88deg, #3d9cc7, #194171) 10 10;
						background: linear-gradient(86deg, #2766b3 0%, rgba(14, 27, 59, 0.2) 100%);
						border-radius: 39px;

						img {
							width: 77px;
							height: 77px;
							margin-right: 40px;
						}

						div {
							display: flex;
							flex-direction: column;
							align-content: center;
							padding-top: 12px;

							p {
								margin-bottom: 0;
								padding: 0;
								line-height: 28px;

								span {
									font-size: 24px;
									font-family: DINPro;
									font-weight: bold;
									color: #ffffff;
									background: linear-gradient(4deg, #ffffff 0%, #a9e3ff 100%);
									-webkit-background-clip: text;
									-webkit-text-fill-color: transparent;
								}

								em {
									margin-left: 4px;
									color: #fff;
									font-style: normal;
								}
							}

							p:first-child {
								font-size: 18px;
								color: #ffffff;
								text-shadow: 0px 4px 6px rgba(12, 42, 73, 0.86);
							}
						}
					}
				}

				.leftTabBar {
					span {
						display: inline-block;
						width: 120px;
						height: 30px;
						font-size: 18px;
						color: #FFFFFF;
						text-align: center;
						text-shadow: 0px 4px 6px rgba(12, 42, 73, 0.86);
						border-radius: 4px;
						overflow: hidden;
						margin-left: 10px;
						// border: 1px solid;
						box-shadow: 0 0 1px 1px rgba(61, 156, 199, .4) inset;
						border-image: linear-gradient(88deg, #3D9CC7, #194171) 10 10;
						background: linear-gradient(-7deg, rgba(39, 102, 179, 0.3) 0%, rgba(14, 27, 59, 0) 100%);

					}

					.active {
						font-weight: 800;
						font-style: italic;
						font-family: SourceHanSansCNBold;
						background: linear-gradient(-7deg, #2766B3 0%, rgba(14, 27, 59, 0) 100%);
					}
				}

				.leftTab {
					flex: 1;
					overflow: hidden;
				}
			}

			.homePage-center {
				flex: 1;
				display: flex;
				flex-direction: column;
				overflow: hidden;

				.mapBox {
					flex: 1;

					#centerMap {
						width: 100%;
						height: 100%;
						background: red;
					}
				}

				.centerBottom {
					// padding-bottom: 40px;
					ul {
						display: grid;
						grid-template-columns: repeat(5, 1fr);
						//grid-gap: 16px 20px;
						li {
							padding-bottom: 32px;
							text-align: center;
							font-size: 12px;
							color: #FFFFFF;
							background: url(@/assets/images/mapPage/centerIcon1.png) no-repeat center bottom;

							span {
								line-height: 46px;
								font-size: 36px;
								font-family: DINPro;
								font-weight: 500;
								color: #1CD3FF;
								text-shadow: 0px 0px 5px #1CD3FF;
							}
						}

						.redFont {
							span {
								color: #FF0000 !important;
								text-shadow: 0px 0px 5px #FF0000 !important;
							}
						}
					}
				}
			}

			.homePage-right {
				display: flex;
				flex-direction: column;
				width: 400px;
				margin-bottom: 50px;
				overflow: hidden;

				.homePage-right-number {
					ul {
						display: grid;
						grid-template-columns: repeat(2, 1fr);
						grid-gap: 16px 20px;

						li {
							width: 190px;
							height: 104px;
							display: flex;
							align-items: center;
							background: url(@/assets/images/mapPage/rightTopBg.png) no-repeat center;
							background-size: 100% 100%;

							div:first-child {
								width: 75px;
								margin: 0 5px;
							}

							div:last-child {
								font-size: 20px;
								color: #eff0f1;

								p {
									height: 26px;
									margin-bottom: 0;
									margin-top: 5px;
								}

								span {
									font-size: 29px;
									font-family: DINPro;
									font-weight: bold;
									color: #2fc1ff;
								}
							}
						}
					}
				}

				.homePage-right-table {
					flex: 1;
					display: flex;
					flex-direction: column;

					.title {
						text-indent: 46px;
						font-weight: 800;
						font-size: 20px;
						font-style: italic;
						color: #ffffff;
						padding-bottom: 3px;
						background: url(@/assets/images/mapPage/titleImg.png) no-repeat left bottom;
						background-size: 100% auto;

						span {
							font-family: SourceHanSansCNBold;
							background-image: linear-gradient(to right, #a9e3ff, #ffffff);
							color: transparent;
							-webkit-background-clip: text;
							// text-shadow: 0px 4px 6px rgba(12, 42, 73, 0.86);
							// background: linear-gradient(4deg, #ffffff 0%, #a9e3ff 100%);
							// -webkit-background-clip: text;
							// -webkit-text-fill-color: transparent;
						}
					}

					.rightTab {
						flex: 1;
						overflow: hidden;
						margin-top: 20px;
					}
				}
			}
		}

		.bottomDialog {
			width: 344px;
			height: 234px;
			padding: 0px 20px 10px;
			position: absolute;
			left: 0;
			bottom: 50px;
			background: url(@/assets/images/mapPage/dialog2.png) no-repeat center;
			background-size: 100%;
			font-size: 14px;
			font-style: italic;
			color: #EEF4F7;

			.tit {
				font-size: 20px;
				font-style: italic;
				color: #B3D3E5;
				line-height: 40px;

				background: linear-gradient(171deg, #8ED7ED 0%, #FFFFFF 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}

			.info {
				display: flex;
				padding: 0 10px;
				line-height: 32px;
				font-size: 14px;
				margin-bottom: 5px;
				background: rgba(41, 99, 195, .21);

				span:first-child {
					width: 70px;
				}

				span:last-child {
					flex: 1;
				}
			}

			.tips {
				padding: 5px 10px;
				line-height: 24px !important;
			}
		}

		.rightDialog {
			width: 266px;
			height: 146px;
			padding: 5px 20px 10px;
			position: absolute;
			left: 0;
			bottom: 50px;
			background: url(@/assets/images/mapPage/dialog1.png) no-repeat center;
			background-size: 100%;
			font-size: 14px;
			color: #EEF4F7;

			div {
				line-height: 30px;
				font-size: 18px;
				font-weight: 500;
				color: #FFFFFF;
				font-family: SourceHanSansCNBold;
				line-height: 40px;
				text-shadow: 0px 2px 2px rgba(79, 245, 255, .5);

				img {
					vertical-align: top;
					margin-top: 5px;
				}
			}

			p {
				margin: 5px 0;
			}
		}

		.centerDialog {
			width: 1036px;
			height: 556px;
			display: flex;
			flex-direction: column;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -518px;
			margin-top: -278px;
			z-index: 999;
			background: linear-gradient(144deg, rgba(4, 24, 63, 0.91) 0%, rgba(21, 55, 127, 0.9) 100%);

			.title {
				height: 42px;
				line-height: 42px;
				padding: 0 10px;
				color: #fff;
				background: url(@/assets/images/mapPage/dislogTit.png) no-repeat left center;
				background-size: auto 100%;

				img {
					float: right;
					margin-top: 10px;
				}
			}

			.tableData {
				flex: 1;
				padding: 20px;
				overflow: hidden;
			}
		}
	}
}
</style>
