<template>
	<view class="project-detail">
		<view class="project-detail-content">
			<view class="project-detail-header-box">
				<view class="project-detail-header" v-if="projectInfoData">
					<view class="project-detail-header-info">
						<view class="project-detail-header-info-company">{{projectInfoData && projectInfoData.projectName}}</view>
						<view class="project-detail-header-info-address"><span class="diconfont dicon-icon_shijian"></span> 建设时间：{{projectInfoData && projectInfoData.createTime}}</view>
					</view>
					<view class="btn-box">
						<span v-if="projectInfoData.projectRole == 'root'" class="diconfont dicon-icon_xiugai" @click="showEdit"></span>
						<!-- <span class="diconfont dicon-icon_saoma"  @click="scanCodeFn"></span> -->
					</view>
				</view>
				<view class="equipment-status" @click="goEquipmentStatusFn">
					<view class="equipment-status-info" v-if="projectOverviewData">
						<view class="equipment-status-info-box">
							<view class="equipment-status-info-box-value text-red pb10">{{projectOverviewData && projectOverviewData.deviceTotal}}</view>
							<view class="equipment-status-info-box-lable">设备总数</view>
						</view>
						<view class="equipment-status-info-box">
							<view class="equipment-status-info-box-value text-green pb10">{{projectOverviewData && projectOverviewData.onlineTotal}}</view>
							<view class="equipment-status-info-box-lable">在线设备</view>
						</view>
						<view class="equipment-status-info-box">
							<view class="equipment-status-info-box-value pb10">{{projectOverviewData && projectOverviewData.onlineRate}}%</view>
							<view class="equipment-status-info-box-lable">在线率</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="manage-banner">
				<view class="manage-banner-electric">
					<!-- <u-image src="@/"></u-image> -->
					<u-image width="100%" height="100%" @click="goElectricSafeFn" :src="cdnImgUrl + '/project/detail/btndq.png'"></u-image>
				</view>
				<view class="manage-banner-energy">
					<u-image width="100%" height="100%" @click="goSmartEnergyFn" :src="cdnImgUrl + '/project/detail/btndy.png'"></u-image>
				</view>
			</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">
						{{projectAlarmData.alarmTotal||0}}
					</view>
					<view class="home-menu-item-bg diconfont dicon-icon_jiance"  :style="{backgroundImage:'linear-gradient(0deg, #45AAFF, #2568FF)'}"></view>
					<view class="home-menu-item-bg-two diconfont dicon-icon_jiance" :style="{color:'rgba(69, 170, 255, 0.1)'}"></view>
				</view>
				<view class="home-status-item menu-item">
					<view class="home-status-item-name">
						已处理率
					</view>
					<view class="home-status-item-value">{{projectAlarmData.processed||0}}</view>
					<view class="item-content-progress-box">
						<qiun-data-charts 
							canvas2d="true"
							style="width: 162rpx;height:162rpx;"
							type="arcbar"
							:opts="projectAlarmData.opts"
							:chartData="projectAlarmData.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>
			
			<view class="alarm-overview-info-box alarm-item">
				<view class="pt10 pb10 pl20 pr20" v-if="warningAnalysisStatisticsData && alarmAnalysisStatisticsData">
					<projectCmp :hide="editMenuShow" :warningAnalysisStatisticsData="warningAnalysisStatisticsData" :alarmAnalysisStatisticsData="alarmAnalysisStatisticsData"></projectCmp>
				</view>
			</view>
			
			<view class="alarm-overview-info">
				<swiper style="height: 100%;" :indicator-dots="true">
					<swiper-item>
						<view class="alarm-overview-info-box">
							<view class="alarm-overview-info-box-title">报警预警分布</view>
							<view class="">
								<view class="alrmAnalysis-content" v-if="projectWarningAnalysis && projectWarningAnalysis.alarmCategoriesList && projectWarningAnalysis.alarmCategoriesList.length>0">
									<view class="alrmAnalysis-title">报警</view>
									<view class="alrmAnalysis-info" >
										<view class="alrm-row" v-for="(item,index) in projectWarningAnalysis.alarmCategoriesList" :key="index">
											<view class="alrm-row-circle" :style="{backgroundColor:item.color}"></view>
											<view class="alrm-row-text pl10">
												<text class="pr10">{{item.typeName}}</text>
												<text class="text--base--grey">|</text>
												<text class="pl10">{{item.ratio}}%</text>
												<text class="pl10" style="color: #999;">{{item.alarmTotal}}</text>
											</view>
										</view>
									</view>
								</view>
								<view v-else style="margin-top: 80rpx;">
									<u-empty text=" " mode="data" icon-size="350" :src="cdnImgUrl + '/project/detail/empty.png'"></u-empty>
								</view>
							</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="alarm-overview-info-box">
							<view class="alarm-overview-info-box-title">报警预警趋势</view>
							<view class="" v-if="projectWarningAnalysis">
								<alarmTrend :hide="editMenuShow" :trendData="projectWarningAnalysis.alarmChartDataVo"></alarmTrend>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="project-map-ctn" @click="readMapLocalFn">
				<view class="project-map-title" v-if="projectInfoData">
					<tuiIcon name="weizhi" color="#FF6600" size="50"></tuiIcon>
					<text class="project-map-title-text">{{projectInfoData && projectInfoData.projectAddress}}</text>
				</view>
				<map v-if="mapLongitude" class="project-map" :latitude="mapLatitude" :longitude="mapLongitude" :markers="mapMarkers"></map>
			</view>
		</view>
		<u-action-sheet :list="editMenuList" @click="selectMenu" v-model="editMenuShow"></u-action-sheet>
		<u-modal v-model="editProjectModalShow" title="修改项目名称" :show-cancel-button="true"
			@confirm="$throttle(editProjectNameFn, 500)">
			<view class="slot-content">
				<u-input v-model="editProjectName" :focus="true" border type="text" placeholder="请输入项目名称" ></u-input>
			</view>
		</u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import projectCmp from "./projectCmp.vue";
	import alarmTrend from "./alarmTrend.vue"
	var QQMapWX = require('@/utils/qqmap-wx-jssdk.min');
	// 实例化API核心类
	var qqmapsdk = new QQMapWX({
	    key: 'XQTBZ-HP5CG-FRFQN-QCFTJ-LTG76-LSF6G'
	});
	export default {
		data() {
			return {
				projectId: "",
				projectInfoData:null, // 项目信息
				projectOverviewData:null, // 项目概况
				projectAlarmData:null, // 项目报警概况
				projectWarningAnalysis:null, // 项目报警预警信息
				alarmAnalysisStatisticsData:null,
				warningAnalysisStatisticsData:null,
				alarmColorList: ["#C93548", "#5E5490", "#52B249", "#F7A23E", "#EA9B87", "#A94791", "#F1DF31", "#DE5654", "#2DAEE5"],
				mapLatitude:"",
				mapLongitude:"",
				mapMarkers: [],
				editMenuList:[
					{
						text: '成员管理',
					},
					{
						text: '修改项目名称',
					},
					{
						text: '修改项目地址',
					},
					{
						text: '项目空间管理',
					},
					{
						text: '设备分组管理',
					}
					
				],
				editMenuShow:false,
				editProjectModalShow:'',
				editProjectName:'',
				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"
						}
					}
				},
				// alarmCategoriesList: [{
				// 	alarmTotal: 2,
				// 	ratio: "100.00",
				// 	typeCode: "a00001",
				// 	typeName: "短路报警"
				// }, {
				// 	alarmTotal: 2,
				// 	ratio: "100.00",
				// 	typeCode: "a00001",
				// 	typeName: "短路报警"
				// }, {
				// 	alarmTotal: 2,
				// 	ratio: "100.00",
				// 	typeCode: "a00001",
				// 	typeName: "短路报警"
				// }, {
				// 	alarmTotal: 2,
				// 	ratio: "100.00",
				// 	typeCode: "a00001",
				// 	typeName: "短路报警"
				// }, {
				// 	alarmTotal: 2,
				// 	ratio: "100.00",
				// 	typeCode: "a00001",
				// 	typeName: "短路报警"
				// }, {
				// 	alarmTotal: 2,
				// 	ratio: "100.00",
				// 	typeCode: "a00001",
				// 	typeName: "短路报警"
				// }, {
				// 	alarmTotal: 2,
				// 	ratio: "100.00",
				// 	typeCode: "a00001",
				// 	typeName: "短路报警"
				// }, {
				// 	alarmTotal: 2,
				// 	ratio: "100.00",
				// 	typeCode: "a00001",
				// 	typeName: "短路报警"
				// }, {
				// 	alarmTotal: 2,
				// 	ratio: "100.00",
				// 	typeCode: "a00001",
				// 	typeName: "短路报警"
				// }]
				cdnImgUrl: 'http://static.drgyen.com/app/hc-app-power/images'
			};
		},
		components: {
			projectCmp,
			alarmTrend
		},
		onLoad(e) {
			this.cdnImgUrl = this.$config.cdnImgUrl;
			this.projectId = e.projectId;

			this.getProjectInfoFn();
			this.getWarningAnalysisFn();
			this.getPowerIndexFn();

		},
		methods:{
			// 修改项目名称
			editProjectNameFn(){
				let obj = {
					...this.projectInfoData,
					projectName:this.editProjectName
				}
				this.$put("/iot/project",obj).then((res)=>{
					if(res.code == 200){
						this.$u.toast(res.msg, 3000);
						this.getProjectInfoFn();
					}else{
						this.$u.toast(res.msg, 3000);
					}
				})
			},
			showEdit(){
				this.editMenuShow = true;
			},
			selectMenu(e){
				console.log("点击菜单",this.editMenuList[e].text)
				if(this.editMenuList[e].text == '成员管理'){
					uni.navigateTo({
						url:'./projectUser?projectId=' + this.projectId
					})
				}else if(this.editMenuList[e].text == '修改项目名称'){
					this.editProjectName = this.projectInfoData.projectName;
					this.editProjectModalShow = true;
				}else if(this.editMenuList[e].text == '项目空间管理'){
					uni.navigateTo({
						url:'./space/index?projectId=' + this.projectId + '&projectRole=' + this.projectInfoData.projectRole + '&typeName=空间'
					})
				}else if(this.editMenuList[e].text == '设备分组管理'){
					uni.navigateTo({
						url:'./deviceGroup/index?projectId=' + this.projectId
					})
				}else if(this.editMenuList[e].text == '修改项目地址'){
					uni.chooseLocation({
						latitude:this.projectInfoData.projectLat,
						longitude:this.projectInfoData.projectLng,
						success: (res) => {
							qqmapsdk.reverseGeocoder({
								location:{
									latitude: res.latitude,
									longitude: res.longitude
								},
								success: (res1) =>{
									this.$put("/iot/project",{
										...this.projectInfoData,
										projectLat:res.latitude,
										projectLng:res.longitude,
										projectAddress:res.address+res.name,
										regionalismCode:res1.result.ad_info.adcode
									}).then(editres=>{
										console.log("editres",editres)
										if(editres.code == 200){
											this.getProjectInfoFn();
										}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);
								}
							})
						}
					});
				}
			},
			goSmartEnergyFn(){
				uni.navigateTo({
					url:`./smartEnergy/index?projectId=${this.projectInfoData.projectId}`
				})
			},
			goElectricSafeFn(){
				uni.navigateTo({
					url:`/pages/project/electricalSafeMange/index?projectId=${this.projectInfoData.projectId}`
				})
			},
			goEquipmentStatusFn(){
				uni.navigateTo({
					url:`./equipmentStatus/status?projectId=${this.projectInfoData.projectId}`
				})
			},
			readMapLocalFn(){
				uni.openLocation({
					longitude: this.projectInfoData.projectLng,
					latitude: this.projectInfoData.projectLat ,
					name: this.projectInfoData.projectName,
					address:this.projectInfoData.address,
					success:(suc)=>{
						console.log(suc);
					},
					fail: (err) => {
						console.log(err,'err');
					}
				})
			},
			getProjectInfoFn(){
				// this.$get("/app/project/info",{projectId:this.projectId}).then((res)=>{
				this.$get("/app/project/" + this.projectId).then((res)=>{
					console.log(res,"Resss");
					this.projectInfoData = res.data;
					this.projectOverviewData = res.data.tenantIndexVo;
					this.mapLatitude = this.projectInfoData.projectLat;
					this.mapLongitude = this.projectInfoData.projectLng;
					this.mapMarkers.push({
						latitude: this.projectInfoData.projectLat,
						longitude: this.projectInfoData.projectLng,
						iconPath: 'http://static.drgyen.com/app/hc-app-power/images/project/location.png',
						width:20,
						height:22
					})
				})
			},
			// 警告分析接口
			getWarningAnalysisFn(){
				this.$get("/app/index/warning-analysis",{projectId:this.projectId}).then((res)=>{
					this.projectWarningAnalysis = res.data;
					this.alarmAnalysisStatisticsData = res.data.warningAnalysisStatisticsVo.find((item) => {
						return item.alarmDivide === "ALARM";
					})
					this.warningAnalysisStatisticsData = res.data.warningAnalysisStatisticsVo.find((item) => {
						return item.alarmDivide === "WARNING";
					})
					if(!this.projectWarningAnalysis.alarmCategoriesList){
						this.projectWarningAnalysis.alarmCategoriesList = [];
					}else{
						this.projectWarningAnalysis.alarmCategoriesList = this.projectWarningAnalysis.alarmCategoriesList.map((item, index, arr) => {
							item.color = this.alarmColorList[index];
							if (index + 1 > this.alarmColorList.length) {
								item.color = this.alarmColorList[index - this.alarmColorList.length];
							}
							return item;
						});
					}
					
				})
			},
			// 首页数据接口
			getPowerIndexFn(){
				this.$get("/app/index",{projectId:this.projectId}).then((res)=>{
					this.projectAlarmData = res.data;
					let processedRateValue = res.data.processedRate/100;
					let data = {
							series: [
								{
									data: processedRateValue || 0
								}
							]
						};
						let opts = JSON.parse(JSON.stringify(this.opts));
						this.opts.title.name = res.data.processedRate + '%'
						this.projectAlarmData.chartData = JSON.parse(JSON.stringify(data));
						this.projectAlarmData.opts = JSON.parse(JSON.stringify(this.opts));
				})
			},
			// 扫码
			scanCodeFn() {
				uni.scanCode({
				    scanType: ['qrCode'],
				    success: (res) => {
				        // console.log('条码内容：' + res.result);
						const val = res.result;
						if(val) {
							this.$get(`/app/device/key/${val}`).then(resp => {
								console.log(resp)
								if(resp.code == 200){
									uni.navigateTo({
										url: `/pages/home/wisdomElectricity/electricityDetail?deviceId=${resp.data.deviceId}`
									})
								} else {
									this.$u.toast(resp.msg, 3000);
								}
							})
						} else {
							this.$u.toast('无效二维码', 3000);
						}
				    },
					fail: (err) => {
						console.log(err)
						if(err.errMsg == "scanCode:fail cancel") {
							this.$u.toast('扫码取消', 3000);
						} else {
							this.$u.toast(err.errMsg, 3000);
						}
					}
				});
			}
		}
	}
</script>
<style lang="scss" scoped>
	.project-detail {
		font-family: Source Han Sans CN;
		position: relative;
		width: 100%;
		// background-color: #F8F8F8;
		.project-detail-content {
			padding: $paddingTB 45rpx;
		}
		.project-detail-header-box{
			background: #FFFFFF;
			border-radius: 20rpx;
			.project-detail-header {
				padding: 20rpx;
				padding-bottom: 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
			
				&-info {
					&-company {
						padding-bottom: 15rpx;
						font-weight: 550;
						font-size: 36rpx;
						color: #000000;
					}
			
					&-address {
						font-weight: 400;
						font-size: 20rpx;
						color: #666666;
						.diconfont{
							font-size: 17rpx;
							margin-right: 5rpx;
						}
					}
				}
				.btn-box{
					display: flex;
					align-items: center;
					.diconfont{
						font-size: 38rpx;
						color: #000000;
						padding: 10rpx;
					}
				}
			}
			
			.equipment-status {
				background-color: #fff;
				border-radius: $uni-border-radius-lg;
				// height: 150rpx;
				padding: 20rpx;
				&-info {
					display: flex;
					&-box {
						flex: 1;
						text-align: center;
						.equipment-status-info-box-value{
							font-weight: bold;
							font-size: 32rpx;
							color: #666666;
						}
						.equipment-status-info-box-lable{
							font-weight: 400;
							font-size: 24rpx;
							color: #333333;
						}
					}
				}
			}
		}
		

		.manage-banner {
			display: flex;
			justify-content: space-between;
			padding-top: 30rpx;

			&-electric,
			&-energy {
				width: 320rpx;
				height: 115rpx;
			}
		}
		
		.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;
			}
		}

		.alarm-overview-info {
			width: 100%;
			height: 500rpx;
			border-radius: 20rpx;
			background-color: #fff;
			// box-shadow: $box-shadow;
			margin-top: 20rpx;

			&-box {
				&.alarm-item{
					padding: 20rpx;
					background: #FFFFFF;
					border-radius: 20rpx;
				}
			}

			&-box-title {
				padding: 20rpx 30rpx;
				// border-bottom: 1px solid #eee;
				font-weight: 500;
				font-size: 30rpx;
			}
		}

		.alarm-overview-info-box-content {
			padding: $paddingTB $paddingLR;
			height: 420rpx;
		}

		.alrmAnalysis-content {
			display: flex;
			width: 100%;
			padding: 40rpx 0;
			padding-bottom: 20rpx;

			.alrmAnalysis-title {
				width: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.alrmAnalysis-info {
				width: calc(100% - 100rpx);
				font-size: 22rpx;
				display: grid;
				grid-template-columns: repeat(2, 50%);
				grid-auto-columns: repeat(2, 50%);
			}
		}

		.alrm-row {
			display: flex;
			align-items: center;
			padding-bottom: 20rpx;

			&-circle {
				width: 22rpx;
				height: 22rpx;
				border-radius: $uni-border-radius-circle;
				/* background-color: #C93548; */
				margin-top: 2rpx;
			}
		}

		.project-map-ctn {
			width: 100%;
			height: 400rpx;
			margin-top: 30rpx;
			margin-bottom: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;
			.project-map-title{
				width: 100%;
				padding: $paddingTB;
				display: flex;
				align-items: center;
				height: 120rpx;
				&-text{
					padding-left: 20rpx;
					font-size: 30rpx;
					font-weight: bold;
				}
			}
			.project-map {
				width: 100%;
				height: calc(100% - 120rpx);
			}
		}
	}
	.slot-content{
		padding: 20rpx 30rpx;
	}
	.text-red{
		color: #FE5277 !important;
	}
	.text-green{
		color: #16D2AF !important;
	}
</style>