<style>
	page{
		background: #f9f9f9;
	}
</style>
<style lang="scss" scoped>
	::v-deep .u-circle-progress{
		// transform: rotate(-90deg);
	}
	.password-edit-box{
		border-radius: 20rpx;
		background-color: #fff;
		margin: 0 30rpx;
		margin-top: 30rpx;
		box-shadow: $box-shadow;
		padding: 25rpx;
		.password-edit-txt{
		}
		.password-edit-btn-box{
			text-align: end;
		}
	}
	.u-progress-content{
		// transform: rotate(90deg);
		// margin-right: -40rpx;
		font-family: Source Han Sans CN;
		text-align: center;
		.u-progress-info{
			font-size: 30rpx;
			color: #349BFF;
			// transform: rotate(90deg);
		}
		.item-content-left-txt{
			font-size: 20rpx;
			color: #333333;
			margin-top: 10rpx;
		}
	}
.project{
	width: 100%;
	// height: 100%;
	background-color: #F9F9F9;
	:not(not) {
		box-sizing: border-box;
	}
	.project-header{
		padding: 30rpx;
		width: 100%;
		background: #f9f9f9;
		&-btn{
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
		}
		.map-box{
			border-radius: 10rpx;
			overflow: hidden;
			margin-bottom: 30rpx;
			height: 294rpx;
			.project-map{
				width: 690rpx;
				height: 334rpx;
			}
			
		}
	}
	&-content{
		padding: $paddingTB 30rpx;
		.project-item{
			background: #FFFFFF;
			box-shadow: 0px 0px 6rpx 0px rgba(158,158,158,0.2);
			border-radius: 20rpx;
			font-size: 26rpx;
			font-family: Source Han Sans CN;
			margin-bottom: 20rpx;
			.item-header{
				padding: 20rpx;
				.item-header-top{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.item-header-top-left{
						display: flex;
						align-items: center;
						.diconfont{
							color: #015EEA;
							font-weight: bold;
							margin-right: 10rpx;
						}
						.item-name{
							font-weight: bold;
							font-size: 28rpx;
							color: #333333;
						}
					}
					.item-header-time{
						font-size: 22rpx;
						color: #666666;
					}
				}
				.item-header-bottom{
					display: flex;
					align-items: center;
					margin: 10rpx 20rpx;
					font-size: 22rpx;
					color: #666666;
					.diconfont{
						font-size: 22rpx;
						margin-right: 10rpx;
					}
				}
			}
			.item-content{
				display: flex;
				align-items: center;
				.item-content-left{
					width: 250rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					.item-content-progress-box{
						width: 200rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						// height: 100rpx;
						// overflow: hidden;
						
						
					}
				}
				.item-content-line{
					height: 162rpx;
					width: 2rpx;
					background-color: #eee;
				}
				.item-content-right{
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: space-between;
					flex-wrap: wrap;
					.content-item{
						width:50%;
						padding: 0 20rpx;
						display: flex;
						align-items: center;
						font-weight: 500;
						justify-content: space-between;
						font-size: 24rpx;
						color: #333333;
						margin-bottom: 4rpx;
						.item-value{
							font-size: 28rpx;
						}
					}
				}
			}
			.alarm-box{
				border-top: 2rpx solid #eee;
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 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;
					}
				}
			}
			.btn-box{
				display: flex;
				align-items: center;
				justify-content: space-around;
				padding-bottom: 20rpx;
			}
		}
	}
	&-box{
		color: #666;
		&-info{
			font-size: $uni-font-size-sm;
		}
		&-title{
			display: flex;
			align-items: center;
		}
		&-title-icon{
			width: 80rpx;
			height: 80rpx;
			padding: 20rpx;
			background: #DFEAFF;
			border-radius: 50%;
		}
	}
	.project-box-summary{
		display: flex;
		width: 100%;
		flex-wrap: wrap;
		padding-top: 30rpx;
		padding-bottom: 20rpx;
		color: #000;
		&-item{
			width: 33%;
			display: flex;
			padding-bottom: 10rpx;
			font-size: 25rpx;
			&-label{
				width: 150rpx;
				font-weight: bold;
			}
			&-value{
				color: #FA7B26;
			}
		}
	}
	.electric-box{
		display: flex;
		width: 100%;
		justify-content: space-around;
		flex-wrap: wrap;
		color: #000;
		&-item{
			width: 46%;
			margin-bottom: 20rpx;
			font-size: 25rpx;
			border: 1px solid #ccc;
			background-color: #f7f9fd;
			border-radius: 20rpx;
			text-align: center;
			line-height: 40rpx;
			padding: 10rpx 0;
			&-label{
				font-weight: bold;
				font-size: 28rpx;
			}
			&-value{
				// color: #FA7B26;
				text{
					font-size: 26rpx;
					color: #666;
					margin-left: 3px;
				}
			}
		}
	}
	.areaPopup-content{
		padding: 40rpx;
	}
}
	::v-deep .u-btn--primary--plain{
		background-color:#fff !important;
	}
	.slot-content{
		padding: 30rpx;
		font-size: 28rpx;
		text-align: center;
	}

</style>

<template>
	<view class="project">
		<view class="project-header">
			<view class="map-box">
				<map class="project-map" :scale="11" :latitude="mapLatitude" :longitude="mapLongitude" :markers="mapMarkers"></map>
			</view>
			<u-search style="background: #fff;" placeholder="搜索项目" :show-action="true" v-model="searchValue" @custom="onSearchFn" @search="onSearchFn"></u-search>
		</view>
		<view >
			<u-empty text="项目列表" margin-top="200" mode="list">
				<view slot="bottom">
					<u-button type="primary" @click="loginShow=true">添加项目</u-button>
				</view>
			</u-empty>

			
		</view>
		<u-modal v-model="loginShow" confirm-text="去登录" @confirm="goLogin">
			<view class="slot-content">
				请先登录
			</view>
		</u-modal>
	</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 {
				loginShow:false,
				passwordStatus:false,
				customStyle: {
					color: '#0066CC',
					borderColor:'#0066CC',
					height:'60rpx'
				},
				// 地区选择------------start
				isAllChecked:false,
				isOpenCity:false,
				isOpenCounty:false,
				
				areaPopupFlag:false,
				provinceSelectFlag:false,
				citySelectFlag:false,
				countySelectFlag:false,
				
				provinceList:null,
				cityList:null,
				countyList:null,
				areaForm:{
					province:"",
					city:"",
					county:""
				},
				// 地区选择------------end
				itemStyle:{
					marginTop:"30rpx",
					border: "1px solid #ccc",
					borderRadius:"20rpx",
					backgroundColor:"#fff",
					padding:"22rpx",
				},
				searchValue:"",
				projectList:null,
				regionalismCode:0,
				mapLatitude:"26.04",
				mapLongitude:"119.21",
				mapMarkers: [],
				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"
						}
					}
				}
			}
		},
		onLoad() {
			// this.getUserInfo()
		},
		onShow() {
			if(this.passwordStatus == true){
				// this.getUserInfo()
			}
			// this.mescroll.resetUpScroll()
		},
		methods: {
			goLogin(){
				// 在C页面内 navigateBack，将返回A页面
				uni.navigateBack({
					delta: 1
				});
			},
			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;
				}
			},
			restoreDefaultFn(){
				this.regionalismCode = 0;
				this.areaForm = {
					province:"",
					city:"",
					county:""
				}
				this.confirmFindAreaFn();
			},
			goProjectMapFn(){
				console.log("点击地图")
				let projectListStr = this.projectList && this.projectList.length>0?JSON.stringify(this.projectList):"";
				uni.navigateTo({
					url:`/pages/project/projectMap?projectList=${projectListStr}`
				})
			},
			// 提交项目
			confirmFindAreaFn(){
				this.areaPopupFlag = false;
				this.mescroll.resetUpScroll();
			},
			
			// 地区选择------------start
			countyConfirmFn(e){
				this.areaForm.county = e[0].label;
				this.regionalismCode = e[0].value;
			},
			cityConfirmFn(e){
				this.areaForm.city = e[0].label;
				this.regionalismCode = e[0].value;
				this.isOpenCounty = true;
				this.countyList = null;
				this.areaForm.county = "";
			},
			provinceConfirmFn(e){
				this.areaForm.province = e[0].label;
				this.regionalismCode = e[0].value;
				this.isOpenCity = true;
				this.isOpenCounty = false;
				this.countyList = null;
				this.cityList = null;
				this.areaForm.city = "";
				this.areaForm.county = "";
			},
			openCountySelectFn(){
				this.countySelectFlag = true;
				// this.countyList = null;
				if(this.regionalismCode===0 || !this.isOpenCounty || (this.countyList && this.countyList.length>0)) return;
				this.$get(`/system/regionalism/child/${this.regionalismCode}`).then((res)=>{
					console.log(res,"res");
					if(res.code == 200){
						this.countyList = res.data.map((item)=>{
							return {
								value: item.regionalismCode,
								label: item.regionalismName
							}
						});
					}
				})
			},
			// 打开城市
			openCitySelectFn(){
				this.citySelectFlag = true;
				// this.cityList = null;
				if(this.regionalismCode===0 || !this.isOpenCity || (this.cityList && this.cityList.length>0)) return;
				
				this.$get(`/system/regionalism/child/${this.regionalismCode}`).then((res)=>{
					console.log(res,"res");
					if(res.code == 200){
						this.cityList = res.data.map((item)=>{
							return {
								value: item.regionalismCode,
								label: item.regionalismName
							}
						});
					}
				})
			},
			// 打开省
			openProvinceSelectFn(){
				this.provinceSelectFlag = true;
				if(this.provinceList && this.provinceList.length>0) return;
				this.$get(`/system/regionalism/child/${this.regionalismCode}`).then((res)=>{
					console.log(res,"res");
					if(res.code == 200){
						this.provinceList = res.data.map((item)=>{
							return {
								value: item.regionalismCode,
								label: item.regionalismName
							}
						});
						console.log(this.provinceList,"this.provinceList");
					}
				})
				
			},
			// 地区选择------------end
			onSearchFn(e){
				this.loginShow=true
				// this.mescroll.resetUpScroll();
			},
			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.projectList[0],
									projectLat:res.latitude,
									projectLng:res.longitude,
									projectAddress:res.address+res.name,
									regionalismCode:res1.result.ad_info.adcode
								}).then(editres=>{
									console.log("editres",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);
							}
						})
					}
				});
			},
			/*上拉加载的回调*/
			upCallback(page) {
			// 	let pageNum = page.num; // 页码, 默认从1开始
			// 	let pageSize = page.size; // 页长, 默认每页10条
			// 	let obj = {
			// 		pageSize:pageSize,
			// 		pageNum:pageNum,
			// 		// projectName:this.searchValue
			// 		// projectId:this.projectIdVal,
			// 		// deviceState:this.screeningValue,
			// 	}
			// 	if(this.regionalismCode) obj.regionalismCode = this.regionalismCode;
			// 	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; 
						
			// 			this.mapLatitude = curPageData[0].projectLat;
			// 			this.mapLongitude = curPageData[0].projectLng;
			// 			curPageData.forEach((item,index)=>{
			// 				this.mapMarkers.push({
			// 					latitude: item.projectLat,
			// 					longitude: item.projectLng,
			// 					iconPath: '../../static/images/project/location-blue.png',
			// 					label:{
			// 						content:item.projectName,
			// 						textAlign:'right',
			// 						color:'#2897ff',
			// 						anchorX: -(0.5 * getLenPx(item.projectName, 9)),
			// 						fontSize:9
			// 					},
			// 					width:18,
			// 					height:20
			// 				})
			// 				let res = {
			// 						series: [
			// 							{
			// 								name: "正确率",
			// 								data: this.getOnlineRate(item)
			// 							}
			// 						]
			// 					};
			// 					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));
			// 			})
						
			// 			//设置列表数据
			// 			if(pageNum == 1) this.projectList = []; //如果是第一页需手动置空列表
			// 			this.projectList = this.projectList.concat(curPageData); //追加新数据
			// 			this.mescroll.endBySize(curPageLen, res.total); // 推荐
			// 			// this.mescroll.endByPage(curPageLen, res.data.total)
			// 			// this.mescroll.endSuccess(curPageData.length);
			// 			if(res.total >= 1){
			// 				if(!curPageData[0].projectAddress && pageNum == 1){
			// 					this.addressShow = true;
			// 				}else if(!this.projectList[0].projectAddress){
			// 					this.addressShow = true;
			// 				}else{
			// 					this.addressShow = false;
			// 				}
			// 			}
			// 		} else{
			// 			this.projectList = [];
			// 			this.mescroll.endErr();
			// 			this.mescroll.showEmpty();
			// 			// this.mescroll.endUpScroll(true);
			// 		}
			// 	}).catch(()=>{
			// 		//联网失败, 结束加载
			// 		this.mescroll.endErr();
			// 	}).finally(()=>{
			// 		// this.dropdownIsOpen = false;
			// 	})
			},
			enterDetailFn(item){
				uni.navigateTo({
					url:`../project/index?projectId=${item.projectId}&projectCode=${item.projectCode}`
				})
			},
			goDeviceList(item){
				uni.navigateTo({
					url:`../project/equipmentStatus/status?projectId=${item.projectId}`
				})
			},
			onCollapseChangeFn(e,x,y){
				console.log(e,"e");
				console.log(x,"x");
				console.log(y,"y")
			}
		}
	}
</script>

