<template>
	<view class="project-box">
		<view class="card-item project-info" @click.stop="enterDetailFn(activeProject)">
			<view class="project-info-header">
				<view class="project-info-left">
					<view class="project-info-name">
						{{activeProject.projectName}}
					</view>
					<view class="project-info-item">
						<view class="diconfont dicon-icon_shijian"></view>
						{{activeProject.createTime}}
					</view>
					<view class="project-info-item">
						<view class="diconfont dicon-icon_weizhi"></view>
						{{activeProject.projectAddress}}
					</view>
				</view>
				<view class="diconfont dicon-mti-qiehuan" @click.stop="openSelectProject"></view>
			</view>
			<view class="alarm-box">
				<view class="alarm-item">
					<view class="item-value" style="color: #FE5277;">
						{{activeProject.tenantIndexVo.alarmTotal||0}}
					</view>
					<view class="item-label">
						报警总数
					</view>
				</view>
				<view class="alarm-item">
					<view class="item-value" style="color: #16D2AF;">
						{{activeProject.tenantIndexVo.processed||0}}
					</view>
					<view class="item-label">
						已处理
					</view>
				</view>
				<view class="alarm-item">
					<view class="item-value" style="color: #FAB64D;">
						{{activeProject.tenantIndexVo.unProcessed||0}}
					</view>
					<view class="item-label">
						未处理
					</view>
				</view>
				<view class="alarm-item">
					<view class="item-value" style="color: #666666;">
						{{activeProject.tenantIndexVo.processedRate||0.00}}%
					</view>
					<view class="item-label">
						已处理率
					</view>
				</view>
			</view>
		</view>
		<view class="banner-menu-box">
			<view class="banner-menu-item" @click.stop="enterDetailFn(activeProject)">
				<image :src="cdnImgUrl + '/project/bannerbtn1.png'" mode=""></image>
			</view>
			<view class="banner-menu-item" @click.stop="goDeviceList(activeProject)">
				<image :src="cdnImgUrl + '/project/bannerbtn2.png'" mode=""></image>
			</view>
		</view>
		<!-- 默认密码修改提示框 -->
		<view class="password-edit-box" v-if="passwordStatus">
			<div class="password-edit-txt">您的初始密码为：<text style="color: red;font-weight: bold;">888888</text>，如需修改请前往 <text
					style="color: #0066cc;font-weight: bold;"> 我的-密码修改 </text> 菜单进行修改</div>
			<div class="password-edit-btn-box">
				<u-button shape="square" type="primary" size="mini" @click="goPassword">去修改</u-button>
			</div>
		</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" @click.stop="goDeviceList(activeProject)">
				<view class="home-status-item-name">
					设备总数
				</view>
				<view class="home-status-item-value">
					{{activeProject.tenantIndexVo.deviceTotal||0}}
				</view>
				<view class="home-menu-item-bg diconfont dicon-icon_zongliang"
					:style="{backgroundImage:'linear-gradient(0deg, #45AAFF, #2568FF)'}"></view>
				<view class="home-menu-item-bg-two diconfont dicon-icon_zongliang" :style="{color:'rgba(69, 170, 255, 0.1)'}">
				</view>
			</view>
			<view class="home-status-item menu-item" @click.stop="goDeviceList(activeProject,'ONLINE')">
				<view class="home-status-item-name">
					在线设备
				</view>
				<view class="home-status-item-value">{{activeProject.tenantIndexVo.onlineTotal||0}}</view>
				<view class="item-content-progress-box">
					<qiun-data-charts canvas2d="true" style="width: 162rpx;height:162rpx;" type="arcbar"
						:opts="activeProject.opts" :chartData="activeProject.chartData" />
				</view>
			</view>
			<view class="home-status-item menu-item">
				<view class="home-status-item-name">
					维保记录
				</view>
				<view class="home-status-item-value">{{activeProject.tenantIndexVo.maintenanceRecordTotal||0}}</view>
				<view class="home-menu-item-bg diconfont dicon-icon_weibaojilu"
					:style="{backgroundImage:'linear-gradient(0deg, #33F3FF, #00BCD2)'}"></view>
				<view class="home-menu-item-bg-two diconfont dicon-icon_weibaojilu" :style="{color:'rgba(49, 234, 246, 0.1)'}">
				</view>
			</view>
			<view class="home-status-item menu-item">
				<view class="home-status-item-name">
					今日报警
				</view>
				<view class="home-status-item-value" :style="{color:activeProject.todayAlarmTotal?'#FB3534':'#000'}">
					{{(activeProject && activeProject.todayAlarmTotal) || "0"}}
				</view>
				<view class="home-menu-item-bg diconfont dicon-icon_jinribaojing"
					:style="{backgroundImage:'linear-gradient(0deg, #FFEF65, #FFBA00)'}"></view>
				<view class="home-menu-item-bg-two diconfont dicon-icon_jinribaojing" :style="{color:'rgba(254, 185, 0, 0.1)'}">
				</view>
			</view>
			<view class="home-status-item menu-item">
				<view class="home-status-item-name">
					电量费用(元)
				</view>
				<view class="home-status-item-value">
					{{(activeProject && activeProject.projectPowerRate) || "0"}}
				</view>
				<view class="home-menu-item-bg diconfont dicon-icon_dianliang"
					:style="{backgroundImage:'linear-gradient(0deg, #F9BA98, #7E442E)'}"></view>
				<view class="home-menu-item-bg-two diconfont dicon-icon_dianliang" :style="{color:'rgba(246, 184, 150, 0.1)'}">
				</view>
			</view>
			<view class="home-status-item menu-item">
				<view class="home-status-item-name">
					电流负载(A)
				</view>
				<view class="home-status-item-value">
					{{(activeProject && activeProject.projectCurrent) || "0"}}
				</view>
				<view class="home-menu-item-bg diconfont dicon-icon_dianliu"
					:style="{backgroundImage:'linear-gradient(0deg, #D5D5D5, #828282)'}"></view>
				<view class="home-menu-item-bg-two diconfont dicon-icon_dianliu" :style="{color:'rgba(205, 205, 205, 0.1)'}">
				</view>
			</view>
			<view class="home-status-item menu-item">
				<view class="home-status-item-name">
					温度(°C)
				</view>
				<view class="home-status-item-value">
					{{(activeProject && activeProject.projectTemperature) || "0"}}
				</view>
				<view class="home-menu-item-bg diconfont dicon-icon_dianliu"
					:style="{backgroundImage:'linear-gradient(0deg, #FFE1EE, #FF5757)'}"></view>
				<view class="home-menu-item-bg-two diconfont dicon-icon_dianliu" :style="{color:'rgba(255, 87, 87, 0.1)'}">
				</view>
			</view>
			<view class="home-status-item menu-item">
				<view class="home-status-item-name">
					电压(V)
				</view>
				<view class="home-status-item-value">
					{{(activeProject && activeProject.projectVoltage) || "0"}}
				</view>
				<view class="home-menu-item-bg diconfont dicon-icon_dianliu"
					:style="{backgroundImage:'linear-gradient(0deg, #D5D5D5, #828282)'}"></view>
				<view class="home-menu-item-bg-two diconfont dicon-icon_dianliu" :style="{color:'rgba(205, 205, 205, 0.1)'}">
				</view>
			</view>
		</view>


		<u-modal v-model="addressShow" confirm-text="去设置" @confirm="setProjectAddress">
			<view class="slot-content">
				项目：{{activeProject.projectName}}未设置地址，请前往设置
			</view>
		</u-modal>
		<u-modal v-model="selectProjectShow" class="select-model" title="" :mask-close-able="true"
			:show-confirm-button="false" @confirm="setProjectAddress">
			<view class="slot-content">
				<view class="select-project-box">
					<view class="select-project-title">
						项目列表
					</view>
					<scroll-view scroll-y="true" class="select-project-scroll">
						<view class="project-item" :class="activeIndex==index?'active':''" v-for="(item,index) in projectList"
							:key="item.projectId" @click="changProject(index)">
							{{item.projectName}}
						</view>
					</scroll-view>
				</view>
			</view>
		</u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		getLenPx
	} from "@/utils/mapCalculate.js"
	var QQMapWX = require('@/utils/qqmap-wx-jssdk.min');
	// 实例化API核心类
	var qqmapsdk = new QQMapWX({
	    key: 'XQTBZ-HP5CG-FRFQN-QCFTJ-LTG76-LSF6G'
	});
	export default {
		data() {
			return {
				addressShow: false,
				passwordStatus: false,
				selectProjectShow: false,
				projectList: null,
				activeProject: {
					"createTime": null,
					"updateTime": null,
					"projectId": null,
					"projectCode": null,
					"projectName": null,
					"contractId": null,
					"industry": null,
					"regionalismCode": 350121,
					"projectAddress": null,
					"projectLng": null,
					"projectLat": null,
					"projectStatus": null,
					"projectPowerRate": null,
					"tenantIndexVo": {
						"deviceTotal": 0,
						"onlineTotal": 0,
						"offlineTotal": 0,
						"onlineRate": "100.00",
						"alarmTotal": 0,
						"processed": 0,
						"unProcessed": 0,
						"processedRate": "0.00",
						"maintenanceRecordTotal": 0,
						"todayAlarmTotal": 0,
						"psTotal": 0,
						"pwTotal": 0.0,
						"userTotal": 0,
						"alarmModelList": [],
						"projectTotal": 1,
						"tenantAlarmRecordVo": null
					},
					"deviceAlarmSimpleVoList": [{
						"deviceId": "a56e1408fa354b9dbd48d6805aa688f3",
						"deviceName": "办公室测试网关",
						"unProcessAlarmTotal": 48
					}],
					"adminFlag": true,
					"projectRole": "root",
					"deviceCount": 0
				},
				activeIndex: 0,
				// 默认仪表盘配置
				opts: {
					color: ["#2897ff"],
					padding: undefined,
					title: {
						name: "80%",
						fontSize: 12,
						color: "#2897ff"
					},
					subtitle: {
						name: "设备在线率",
						fontSize: 10,
						color: "#666666"
					},
					extra: {
						arcbar: {
							type: "default",
							width: 6,
							backgroundColor: "#f3f4f5",
							startAngle: 0.75,
							endAngle: 0.25,
							gap: 2,
							linearType: "none"
						}
					}
				},
				cdnImgUrl: 'http://static.drgyen.com/app/hc-app-power/images',
				defaultProjectId: '',
			}
		},
		onLoad() {
			try {
				const defaultProjectId = uni.getStorageSync('defaultProjectId');
				if (defaultProjectId) {
					this.defaultProjectId = defaultProjectId;
				}
			} catch (e) {
				// error
			}
			this.cdnImgUrl = this.$config.cdnImgUrl;
			this.getUserInfo()
		},
		onShow() {
			if (this.passwordStatus == true) {
				this.getUserInfo()
			}
			this.getProjectList();
		},
		methods: {
			getUserInfo() {
				this.$get("/system/user/profile").then((res) => {
					console.log(res, "res");
					if (!res.data) return;
					if (res.data.updateTime == undefined) {
						this.passwordStatus = true;
					} else {
						this.passwordStatus = false;
					}
					uni.setStorageSync("tenantInfo", res.data.tenant)
					uni.setStorageSync("userInfo", res.data)
				})
			},
			goPassword() {
				uni.navigateTo({
					url: '/pages/tabBar/my/passwordModify'
				})
			},
			getOnlineRate(item) {
				let deviceTotal = item.tenantIndexVo.deviceTotal || 0;
				let onlineTotal = item.tenantIndexVo.onlineTotal || 0;
				let onlineRate = (onlineTotal / deviceTotal);
				return onlineRate;
			},
			getOnlineRateTxt(item) {
				let deviceTotal = item.tenantIndexVo.deviceTotal || 0;
				let onlineTotal = item.tenantIndexVo.onlineTotal || 0;
				if (deviceTotal === 0 && onlineTotal === 0) {
					return '';
				} else {
					let onlineRateTxt = ((onlineTotal / deviceTotal) * 100).toFixed(1) + '%';
					return onlineRateTxt;
				}
			},
			setProjectAddress() {
				this.addressShow = false;
				uni.chooseLocation({
					success: (res) => {
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: res.latitude,
								longitude: res.longitude
							},
							success: (res1) => {
								console.log("res1", res1.result);
								this.$put("/iot/project", {
									...this.activeProject,
									projectLat: res.latitude,
									projectLng: res.longitude,
									projectAddress: res.address + res.name,
									regionalismCode: res1.result.ad_info.adcode
								}).then(editres => {
									this.addressShow = false;
									if (editres.code == 200) {
										this.mescroll.resetUpScroll();
									} else {
										this.$refs.uToast.show({
											title: editres.msg,
											type: 'error',
										})
									}
								}).catch(err => {
									// this.$refs.uToast.show({
									// 	title: err.msg,
									// 	type: 'error',
									// })
								})
							},
							fail: (err) => {
								console.log(res);
							}
						})
					}
				});
			},
			getProjectList() {
				let obj = {
					pageSize: 100,
					pageNum: 1,
				}
				if (this.searchValue) obj.projectName = this.searchValue;
				this.$get("/app/project/table", obj).then((res) => {
					if (res.rows && res.rows.length > 0) {
						// 接口返回的当前页数据列表 (数组)
						let curPageData = res.rows || [];
						// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
						let curPageLen = curPageData.length;

						curPageData.forEach((item, index) => {
							let res = {
								series: [{
									name: "正确率",
									data: this.getOnlineRate(item)
								}]
							};
							if (this.defaultProjectId == item.projectId) {
								this.activeIndex = index;
							}
							let opts = JSON.parse(JSON.stringify(this.opts));
							this.opts.title.name = this.getOnlineRateTxt(item)
							curPageData[index].chartData = JSON.parse(JSON.stringify(res));
							curPageData[index].opts = JSON.parse(JSON.stringify(this.opts));
						})

						//设置列表数据
						this.projectList = curPageData;
						// this.projectList = [...curPageData,...curPageData,...curPageData,...curPageData,...curPageData,...curPageData];
						if (this.activeIndex >= curPageLen) {
							this.activeProject = curPageData[0];
							this.activeIndex = 0;
						} else {
							this.activeProject = curPageData[this.activeIndex];
						}
						curPageData.forEach((item, index) => {
							if(!item.projectAddress && index!=0){
								this.activeProject = item;
								this.activeIndex = index;
							}
						})
						this.defaultProjectId = this.activeProject.projectId;
						uni.setStorage({
							key: 'defaultProjectId',
							data: this.activeProject.projectId,
						})
						if (res.total >= 1) {
							console.log("this.activeProject",this.activeProject)
							if (this.activeProject.projectAddress=="") {
								this.addressShow = true;
							} else {
								this.addressShow = false;
							}
						}
					} else {
						this.projectList = [];
					}
				}).catch(() => {
					//联网失败, 结束加载
				}).finally(() => {})
			},
			enterDetailFn(item) {
				uni.navigateTo({
					url: `../project/index?projectId=${item.projectId}&projectCode=${item.projectCode}`
				})
			},
			goDeviceList(item,deviceState=false) {
				console.log("deviceState",deviceState)
				if(deviceState){
					uni.navigateTo({
						url: `../project/equipmentStatus/status?projectId=${item.projectId}&adminFlag=${item.adminFlag}&projectRole=${item.projectRole}&deviceState=${deviceState}`
					})
				}else{
					uni.navigateTo({
						url: `../project/equipmentStatus/status?projectId=${item.projectId}&adminFlag=${item.adminFlag}&projectRole=${item.projectRole}`
					})
				}
				
			},
			changProject(index) {
				this.activeIndex = index;
				this.activeProject = this.projectList[index];
				this.selectProjectShow = false;
				this.defaultProjectId = this.projectList[index].projectId;
				uni.setStorage({
					key: 'defaultProjectId',
					data: this.projectList[index].projectId,
				})
			},
			openSelectProject() {
				this.selectProjectShow = true;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.project-box {
		font-family: Source Han Sans CN;
		padding: 45rpx;

		.project-info {
			width: 660rpx;
			height: 290rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin-bottom: 30rpx;

			.project-info-header {
				display: flex;
				justify-content: space-between;
				padding: 30rpx 20rpx 5rpx;

				.project-info-left {
					.project-info-name {
						font-weight: 550;
						font-size: 36rpx;
					}

					.project-info-item {
						margin-top: 10rpx;
						display: flex;
						align-items: center;
						font-size: 20rpx;
						color: #8e8e8e;

						.diconfont {
							font-size: 20rpx;
							color: #8e8e8e;
							margin-right: 10rpx;
						}
					}
				}

				.dicon-mti-qiehuan {
					font-size: 38rpx;
					// font-weight: 600;
				}
			}

			.alarm-box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 5rpx 30rpx;

				.alarm-item {
					text-align: center;
					font-family: Source Han Sans CN;

					.item-value {
						font-weight: bold;
						font-size: 32rpx;
					}

					.item-label {
						margin-top: 10rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #333333;
					}
				}
			}
		}

		.banner-menu-box {
			display: flex;
			justify-content: space-between;

			.banner-menu-item {
				width: 320rpx;
				height: 115rpx;
				border-radius: 20rpx;
				overflow: hidden;

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

		.password-edit-box {
			border-radius: 20rpx;
			background-color: #fff;
			margin-top: 30rpx;
			box-shadow: $box-shadow;
			padding: 25rpx;

			.password-edit-txt {}

			.password-edit-btn-box {
				text-align: end;
			}
		}

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

			.menu-item {
				width: 320rpx;
				height: 200rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 30rpx 20rpx 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-weight: bold;
					font-size: 30rpx;
				}

				.home-menu-item-bg {
					position: absolute;
					right: 37rpx;
					bottom: 26rpx;
					font-size: 75rpx;
					z-index: 99;
					color: transparent;
					display: inline-block;
					-webkit-background-clip: text;
				}

				.home-menu-item-bg-two {
					position: absolute;
					right: 44rpx;
					bottom: 26rpx;
					font-size: 75rpx;
					z-index: 98;
				}

				.item-content-progress-box {
					position: absolute;
					right: 10rpx;
					bottom: 0rpx;
					width: 180rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}

			}

			.border-box {
				height: 1px;
				background: #E0E3E5;
			}
		}
	}


	::v-deep .u-btn--primary--plain {
		background-color: #fff !important;
	}

	.slot-content {
		padding: 30rpx;
		font-weight: bold;
		font-size: 26rpx;
		overflow: visible
	}

	.select-model ::v-deep .u-model {
		background: linear-gradient(180deg, #45AAFF 0, #FFFFFF 268rpx);
		position: relative;
		overflow: visible !important;
		border-radius: 16rpx;
	}

	.select-model ::v-deep .uni-scroll-view,
	.select-model ::v-deep .uni-scroll-view,
	.select-model ::v-deep .u-mode-center-box,
	.select-model ::v-deep .u-drawer-content {
		overflow: visible !important;
	}

	.select-model ::v-deep .u-mode-center-box {
		&::before {
			position: absolute;
			left: 45rpx;
			top: -82rpx;
			content: '';
			width: 511rpx;
			height: 268rpx;
			background: url("http://static.drgyen.com/app/hc-app-power/images/project/model-top1.png") no-repeat;
			background-size: 100% 100%;
			z-index: 1076;
		}
	}

	.select-project-box {
		height: 557rpx;
		padding-top: 170rpx;

		// &::before{
		// 	position: absolute;
		// 	left: 45rpx;
		// 	top: -82rpx;
		// 	content: '';
		// 	width: 511rpx;
		// 	height: 268rpx;
		// 	background: url("http://static.drgyen.com/app/hc-app-power/images/project/model-top1.png") no-repeat;
		// 	background-size: 100% 100%;
		// 	z-index: 1076;
		// }
		.select-project-title {
			width: 538rpx;
			height: 71rpx;
			position: absolute;
			left: 31rpx;
			top: 204rpx;
			background: url("http://static.drgyen.com/app/hc-app-power/images/project/model-top2.png") no-repeat;
			background-size: 100% 100%;
			z-index: 1076;
			font-weight: 450;
			font-size: 34rpx;
			color: #333333;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.select-project-scroll {
			height: 354rpx;

			.project-item {
				font-size: 30rpx;
				font-weight: 500;
				line-height: 60rpx;
				text-indent: 50rpx;
				position: relative;

				&::before {
					position: absolute;
					left: 0;
					top: 10rpx;
					content: '';
					width: 40rpx;
					height: 40rpx;
					background: url("http://static.drgyen.com/app/hc-app-power/images/project/model-right.png") no-repeat;
					background-size: 100% 100%;
					z-index: 1076;
				}

				&.active {
					&::after {
						position: absolute;
						right: 20rpx;
						top: 7rpx;
						content: '';
						width: 26rpx;
						height: 26rpx;
						background: url("http://static.drgyen.com/app/hc-app-power/images/project/model-hook.png") no-repeat;
						background-size: 100% 100%;
						z-index: 1076;
					}
				}
			}
		}
	}
</style>