<template>
	<view class="home-box">
		<view class="home-ctn">
			<u-swiper :list="bannerList" border-radius="30" height="294"></u-swiper>
			<view class="home-new-alrm">
				<u-notice-bar mode="horizontal" border-radius="30" type="error" bg-color="#f9f9f9" :list="alrmNotice"
					:is-circular="playState" :play-state="playState?'play':'paused'"></u-notice-bar>
			</view>
			<view class="home-title">
				<view class="home-title-txt">
					今日状况
				</view>
				<view class="home-title-remark">随时随地更新项目概况</view>
			</view>
			<view class="home-status-box menu-box">
				<view class="home-status-item menu-item">
					<view class="home-status-item-name">
						运行状态
					</view>
					<view class="home-status-item-value" :style="{color:pageIndexData.todayAlarmTotal?'#FB3534':'#00AB40'}">
						{{pageIndexData.todayAlarmTotal?'异常':'正常'}}</view>
					<view class="home-status-item-bg">
						<view class="running-state-box" :class="pageIndexData.todayAlarmTotal?'state-red':''">
							<view class="running-state-txt">
								{{pageIndexData.todayAlarmTotal?'异常':'正常'}}
							</view>
						</view>
					</view>
				</view>
				<view class="home-status-item menu-item" @click="goUrl('/pages/home/wisdomElectricity/index?deviceState=ONLINE')">
					<view class="home-status-item-name">
						在线设备
					</view>
					<view class="home-status-item-value">{{(pageIndexData && pageIndexData.onlineTotal) || "0"}}</view>
					<view class="home-status-item-bg">
						<image :src="cdnImgUrl + '/home/status1.png'" mode=""></image>
					</view>
				</view>
				<view class="home-status-item menu-item">
					<view class="home-status-item-name">
						项目总数
					</view>
					<view class="home-status-item-value">{{(pageIndexData && pageIndexData.projectTotal) || "0"}}</view>
					<view class="home-status-item-bg">
						<image :src="cdnImgUrl + '/home/status2.png'" mode=""></image>
					</view>
				</view>
				<view class="home-status-item menu-item" @click="goUrl('/pages/home/wisdomElectricity/index')">
					<view class="home-status-item-name">
						设备总数
					</view>
					<view class="home-status-item-value" :style="{color:pageIndexData.deviceTotal?'#00AB40':'#000'}">
						{{(pageIndexData && pageIndexData.deviceTotal) || "0"}}</view>
					<view class="home-status-item-bg">
						<image :src="cdnImgUrl + '/home/status3.png'" mode=""></image>
					</view>
				</view>
			</view>
			<view class="home-title">
				<view class="home-title-txt">
					数智管理
				</view>
				<view class="home-title-remark"></view>
			</view>
			<view class="home-menu-box menu-box">
				<view class="home-menu-item menu-item" v-for="(item,index) in navListArr" :key="index"
					@click="goFuctionUrlFn(item)">
					<view class="home-menu-item-header">
						<view class="home-menu-item-name">
							{{item.name}}
						</view>
						<view class="home-menu-item-right">
							<u-icon name="arrow-right" color="#d4d4d4" size="24"></u-icon>
						</view>
					</view>
					<view class="home-menu-item-bg">
						<image :src="cdnImgUrl + item.imgUrl" mode=""></image>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	import homeNavList from "@/common/script/homeNavList.js"
	import {
		getLenPx
	} from "@/utils/mapCalculate.js"

	var _self;
	var canvaColumn = null;
	var canvaLineA = null;
	var canvaArcbar1 = null;
	export default {
		data() {
			return {
				passwordStatus: false,
				bannerList: [{
					name: '111',
					image: 'http://static.drgyen.com/app/hc-app-power/images/home/banner/banner3.jpg',
				}, {
					name: '222',
					image: 'http://static.drgyen.com/app/hc-app-power/images/home/banner/banner4.jpg',
				}],
				alrmNotice: [],
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				pageIndexData: {
					projectTotal: 0,
					deviceTotal: 0,
					onlineDeviceTotal: 0,
					todayAlarmTotal: 0,
					alarmTotal: 0
				}, // 首页数据
				arcbarWidth: '', //圆弧进度图，进度条宽度,此设置可使各端宽度一致
				navListArr: [],
				playState: false, // 滚动状态
				lineProgressData: {
					alarmTotalPercent: 0,
					processedPercent: 0,
					unProcessedPercent: 0,
				},
				mapLatitude: "",
				mapLongitude: "",
				mapMarkers: [],
				cdnImgUrl: 'http://static.drgyen.com/app/hc-app-power/images'
			}
		},
		onPullDownRefresh(e) {
			this.getPowerIndexDataFn();
		},
		onLoad() {
			this.cdnImgUrl = this.$config.cdnImgUrl;
			// this.getPasswordStatus();
			this.getUserInfo();
			uni.setNavigationBarTitle({
				title: this.$store.state.app.appConfig.name
			})
			_self = this;
			this.navListArr = homeNavList;
			// uni.upx2px(750) 这是uni-app自带的自适应，以750的尺寸为基准。动态变化
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(260);
			this.arcbarWidth = uni.upx2px(20);

			this.getPowerIndexDataFn();
			this.getProjectList()
		},
		methods: {
			goUrl(url){
				uni.navigateTo({
					url:url
				})
			},
			getUserInfo() {
				this.$get("/system/user/profile").then((res) => {
					console.log(res, "res");
					if (!res.data) return;
					this.userInfo = res.data;
					this.tenantInfo = res.data.tenant;
					uni.setStorageSync("tenantInfo", res.data.tenant)
					uni.setStorageSync("userInfo", this.userInfo)
				})
			},
			getPasswordStatus() {
				try {
					let passwordStatus = uni.getStorageSync('passwordStatus');
					console.log("passwordStatus", passwordStatus)
					if (passwordStatus === '') {
						this.passwordStatus = true;
					} else {
						this.passwordStatus = passwordStatus;
					}
				} catch (e) {
					console.log("e", e)
					this.passwordStatus = true;
				}
			},
			readPasswordStatus() {
				try {
					uni.setStorageSync('passwordStatus', false);
					this.passwordStatus = false;
				} catch (e) {}
			},
			// 判断是否登录
			checkToken() {
				let userToken = uni.getStorageSync('userToken');
				if (userToken) {
					uni.switchTab({
						url: "../tabBar/home"
					})
				}
			},
			getProjectList() {
				let obj = {
					pageSize: 100,
					pageNum: 1,
				}
				this.$get("/app/project/table", obj).then((res) => {
					if (res.rows && res.rows.length > 0) {
						// 接口返回的当前页数据列表 (数组)
						let curPageData = res.rows;
						if (curPageData.length > 0) {
							this.mapLatitude = curPageData[0].projectLat;
							this.mapLongitude = curPageData[0].projectLng;
							curPageData.forEach((item) => {
								this.mapMarkers.push({
									latitude: item.projectLat,
									longitude: item.projectLng,
									iconPath: 'http://static.drgyen.com/app/hc-app-power/images/project/location-blue.png',
									label: {
										content: item.projectName,
										textAlign: 'right',
										color: '#2e66e7',
										anchorX: -(0.5 * getLenPx(item.projectName, 9)),
										fontSize: 9
									},
									width: 18,
									height: 20
								})
							})
							this.projectList = curPageData || [];
						} else {
							this.mapMarkers = [];
							this.projectList = [];
						}
					} else {
						this.mapMarkers = [];
						this.projectList = [];
					}
				}).catch(() => {
					//联网失败, 结束加载
					this.mapMarkers = [];
				})
			},
			goProjectMapFn() {
				let projectListStr = this.projectList && this.projectList.length > 0 ? JSON.stringify(this.projectList) : "";
				uni.navigateTo({
					url: `/pages/project/projectMap?projectList=${projectListStr}`
				})
			},
			// 获取首页数据
			getPowerIndexDataFn() {
				this.$get('/app/index').then((res) => {
					// console.log(res,"rdddd");
					if (res.code != 200) return;
					this.pageIndexData = res.data;
					let {
						tenantAlarmRecordVo,
						processedRate,
						alarmTotal,
						processed,
						unProcessed
					} = this.pageIndexData;

					// 最新报警
					if (!!tenantAlarmRecordVo) {
						let {
							projectName,
							spaceName,
							projectAddress,
							deviceName,
							alarmTime,
							typeName
						} = tenantAlarmRecordVo;
						let alarmStr =
							`${projectAddress || "-"} ${(projectName + spaceName) || "-"}中${deviceName || "-"} 于${alarmTime || "-"}发生${typeName || "-"}`
						this.alrmNotice.push(alarmStr);
						this.playState = true;
					} else {
						this.alrmNotice.push("暂无警报");
					}
				}).catch((err) => {
					console.log(err, "errr");
				}).finally(() => {
					uni.stopPullDownRefresh();
				})
			},
			goFuctionUrlFn(item) {
				console.log("item",item.url)
				uni.navigateTo({
					url: item.url
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.home-ctn {
		width: 100%;
		height: 100%;
		// background-color: #F9F9F9;
		padding: 30rpx;
		font-family: Source Han Sans CN;

		:not(not) {
			box-sizing: border-box;
		}

		.home-title {
			display: flex;
			align-items: center;
			padding: 20rpx 15rpx;

			.home-title-txt {
				font-weight: 600;
				font-size: 36rpx;
			}

			.home-title-remark {
				margin-left: 20rpx;
				font-size: 20rpx;
				color: #999999;
			}
		}

		.menu-box {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			padding: 0 15rpx;

			.menu-item {
				width: 320rpx;
				height: 200rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 30rpx 15rpx 15rpx 30rpx;
				margin-bottom: 20rpx;
				position: relative;

				&:nth-child(2n-1) {
					margin-right: 20rpx;
				}

				.home-status-item-name {
					font-weight: 550;
					font-size: 28rpx;
				}

				.home-status-item-value {
					font-size: 30rpx;
					font-weight: 700;
					margin-top: 10rpx;
				}

				.home-status-item-bg {
					position: absolute;
					right: 15rpx;
					bottom: 15rpx;
					width: 180rpx;
					height: 120rpx;
					display: flex;
					justify-content: center;

					.running-state-box {
						width: 120rpx;
						height: 120rpx;
						background: url("http://static.drgyen.com/app/hc-app-power/images/home/state/state-bg.png") no-repeat;
						background-size: 100% 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						position: relative;
						font-size: 28rpx;
						color: #2897FF;
						font-weight: bold;

						&:after {
							content: '';
							animation: spin 2s linear infinite;
							position: absolute;
							top: 0;
							left: 0;
							width: 120rpx;
							height: 120rpx;
							background: url("http://static.drgyen.com/app/hc-app-power/images/home/state/state.png") no-repeat;
							background-size: 100% 100%;
						}

						&.state-red {
							color: #FB3534;
							background: url("http://static.drgyen.com/app/hc-app-power/images/home/state/state-bg-red.png") no-repeat;
							background-size: 100% 100%;

							&:after {
								background: url("http://static.drgyen.com/app/hc-app-power/images/home/state/state-red.png") no-repeat;
								background-size: 100% 100%;
							}
						}
					}

					>image {
						width: 100%;
						height: 100%;
					}
				}

				.home-menu-item-header {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.home-menu-item-name {
						font-weight: 550;
						font-size: 28rpx;
					}

					.home-menu-item-right {
						width: 38rpx;
						height: 38rpx;
						background: #EFEFEF;
						border-radius: 50%;
						padding-left: 2rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}

				.home-menu-item-bg {
					width: 180rpx;
					height: 120rpx;
					display: flex;
					justify-content: center;
					margin-left: 30rpx;
					margin-top: 10rpx;

					>image {
						width: 100%;
						height: 100%;
					}
				}
			}

		}

		.home-new-alrm {
			margin-top: 20rpx;
		}


		/* 定义关键帧动画 */
		@keyframes spin {
			0% {
				transform: rotate(0deg);
			}

			/* 动画开始时的角度 */
			100% {
				transform: rotate(360deg);
			}

			/* 动画结束时的角度 */
		}
	}
</style>