<style lang="scss" scoped>
.home-ctn{
	width: 100%;
	height: 100%;
	background-color: #F9F9F9;
	padding: 30rpx;
	:not(not) {
		box-sizing: border-box;
	}
	
	.home-nav{
		background-color: #fff;
		border-radius: 16rpx;
		box-shadow: $box-shadow;
		// height: 400rpx;
		display: flex;
		flex-wrap: wrap;
		padding: 30rpx;
		&-box{
			width: 25%;
			text-align: center;
			margin-bottom: 20rpx;
			&-icon{
				width: 100rpx;
				height: 100rpx;
				// padding: 16rpx;
				// background: linear-gradient(-55deg, #52AA52, #76D296);
				// box-shadow: 0px 9px 15px 0px rgba(87, 175, 91, 0.3);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				margin: 0 auto;
				margin-bottom: 20rpx;
			}
		}
	}
	.home-statistical{
		border-radius: 16rpx;
		width: 100%;
		background-color: #fff;
		margin-top: 30rpx;
		box-shadow: $box-shadow;
		padding: 20rpx 0rpx;
		display: flex;
		justify-content: center;
		&-box{
			width: 24%;
			text-align: center;
			&-title{
				padding-bottom: 10rpx;
			}
			&-line{
				height: 40rpx;
				width: 2rpx;
				background-color: #ddd;
				margin-top: 20rpx;
			}
			&-value{
				color: #1492FF;
				font-size: 36rpx;
			}
		}
	}
	.home-new-alrm{
		margin-top: 20rpx;
	}
	.home-progress-bar{
		// margin-top: 40rpx;
		width: 100%;
		&-box{
			display: flex;
			width: 100%;
			margin-top: 20rpx;
			&-title{
				width: 120rpx;
			}
			&-progress{
				width: calc(100% - 120rpx) ;
			}
		}
	}
	.canvas-processed{
		width: 100%;
		height: 260rpx;
		margin: 10rpx 0;
	}
}
.pwd-style {
	width: 100%;
	padding: 20upx 30upx;
}
</style>
<template>
	<view class="">
		<headerBg></headerBg>
		<view class="home-ctn">
			<view class="home-nav">
				<view class="home-nav-box" v-for="(item,index) in navListArr" :key="index" @click="goFuctionUrlFn(item)">
					<!-- <image src="../../static/images/car.png" mode=""></image> -->
					<!-- #ifdef MP-WEIXIN -->
						<view class="home-nav-box-icon" :style="{background:item.background,boxShadow:item.boxShadow}">
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
						<view class="home-nav-box-icon" :style="{backgroundColor:item.background}">
					<!-- #endif -->
					<!-- <view class="home-nav-box-icon" :style="{background:item.background,boxShadow:item.boxShadow}"> -->
						<tui-icon :name="item.icon" size="50" color="#fff"></tui-icon>
					</view>
					<view class="home-nav-box-text">{{item.name}}</view>
				</view>
			</view>
			<view class="home-statistical" v-if="pageIndexData">
				<view class="home-statistical-box">
					<view class="home-statistical-box-title">项目总数</view>
					<view class="home-statistical-box-value">{{(pageIndexData && pageIndexData.projectTotal) || "-" }}</view>
				</view>
				<view class="home-statistical-box-line"></view>
				<view class="home-statistical-box">
					<view class="home-statistical-box-title">设备总数</view>
					<view class="home-statistical-box-value" style="color: #8CDEAF;">{{(pageIndexData && pageIndexData.deviceTotal + '') || "-"}}</view>
				</view>
				<view class="home-statistical-box-line"></view>
				<view class="home-statistical-box">
					<view class="home-statistical-box-title">在线设备</view>
					<view class="home-statistical-box-value" style="color: #8CDEAF;">{{(pageIndexData && pageIndexData.onlineTotal + '') || "-"}}</view>
				</view>
				<view class="home-statistical-box-line"></view>
				<view class="home-statistical-box">
					<view class="home-statistical-box-title">今日报警数</view>
					<view class="home-statistical-box-value" style="color: #FF7976;">{{(pageIndexData && pageIndexData.todayAlarmTotal + '') || "-"}}</view>
				</view>
			</view>
			<view class="home-new-alrm">
				<!-- <u-tag size="mini" class="mr20" style="width:140rpx;" text="最新报警" type="error" mode="plain" /> -->
				<u-notice-bar mode="horizontal" type="error" :list="alrmNotice" :is-circular="playState" :play-state="playState?'play':'paused'"></u-notice-bar>
				<!-- <text>A公司 福州鼓楼区洪山镇  照明于2020-11-17 8:46:55 发生异常分闸，请及时处理</text> -->
			</view>
			<image v-if="canvasImg" :src="canvasImg" class="canvas-processed"></image>
			<canvas v-else canvas-id="dealWithChartsId" class="canvas-processed" id="canvasArcbarID"></canvas>
			<view class="home-progress-bar" >
				<view class="home-progress-bar-box">
					<view class="home-progress-bar-box-title ">报警总数</view>
					<u-line-progress class="home-progress-bar-box-progress ml20" active-color="#F88F30" :striped="true" :striped-active="true" :textValue="pageIndexData.alarmTotal || '0'" :percent="lineProgressData.alarmTotalPercent || '0'"></u-line-progress>
				</view>
				<view class="home-progress-bar-box">
					<view class="home-progress-bar-box-title ">已修理</view>
					<u-line-progress class="home-progress-bar-box-progress ml20" active-color="#2979ff" :striped="true" :striped-active="true" :textValue="pageIndexData.processed" :percent="lineProgressData.processedPercent"></u-line-progress>
				</view>
				<view class="home-progress-bar-box">
					<view class="home-progress-bar-box-title ">未处理</view>
					<u-line-progress class="home-progress-bar-box-progress ml20" active-color="#D41E00" :striped="true" :striped-active="true" :textValue="pageIndexData.unProcessed" :percent="lineProgressData.unProcessedPercent"></u-line-progress>
				</view>
				<view class="home-progress-bar-box" v-for="(item,index) in pageIndexData.alarmModelList" :key="index">
					<view class="home-progress-bar-box-title ">{{item.modelName || "-"}}</view>
					<u-line-progress class="home-progress-bar-box-progress ml20" active-color="#2979ff" :striped="true" :striped-active="true" :textValue="item.modelTotal" :percent="(item.modelTotal / (pageIndexData.unProcessed + pageIndexData.processed))*100"></u-line-progress>
				</view>
				<!-- <view class="home-progress-bar-box">
					<view class="home-progress-bar-box-title ">电气火灾</view>
					<u-line-progress class="home-progress-bar-box-progress pl20" active-color="#2979ff" :striped="true" :striped-active="true" :percent="60"></u-line-progress>
				</view>
				<view class="home-progress-bar-box">
					<view class="home-progress-bar-box-title ">水位水压</view>
					<u-line-progress class="home-progress-bar-box-progress pl20" active-color="#D41E00" :striped="true" :striped-active="true" :percent="89"></u-line-progress>
				</view>
				<view class="home-progress-bar-box">
					<view class="home-progress-bar-box-title ">烟雾</view>
					<u-line-progress class="home-progress-bar-box-progress pl20" active-color="#D41E00" :striped="true" :striped-active="true" :percent="180"></u-line-progress>
				</view> -->
			</view>
		</view>
		<u-modal v-model="show" show-cancel-button @confirm="addDevice">
			<view class="slot-content pwd-style">
				<u-input v-model="password" type="password" placeholder="请输入设备密码" />
			</view>
		</u-modal>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	import headerBg from "@/components/headerBg/headerBg.vue";
	
	var _self;
	var canvaColumn = null;
	var canvaLineA = null;
	var canvaArcbar1 = null;
	export default {
		data() {
			return {
				alrmNotice: [],
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
				pageIndexData:null, // 首页数据
				arcbarWidth:'',//圆弧进度图，进度条宽度,此设置可使各端宽度一致
				navListArr:[],
				playState:false, // 滚动状态
				lineProgressData:null,
				tabbar:[
					{
						"pagePath": "/pages/tabBar/home",
						"text": "首页",
						"iconPath": "/static/images/toolbar/home.png",
						"selectedIconPath": "/static/images/toolbar/act-home.png"
					},{
						"pagePath": "/pages/tabBar/project",
						"text": "项目",
						"iconPath": "/static/images/toolbar/project.png",
						"selectedIconPath": "/static/images/toolbar/act-project.png"
					},{
						"pagePath": "/pages/tabBar/alarm",
						"text": "报警",
						"iconPath": "/static/images/toolbar/alarm.png",
						"selectedIconPath": "/static/images/toolbar/act-alarm.png"
					},{
						"pagePath": "/pages/tabBar/my",
						"text": "我的",
						"iconPath": "/static/images/toolbar/my.png",
						"selectedIconPath": "/static/images/toolbar/act-my.png"
				}],
				show: false,
				password: '',
				deviceKey: '',
				canvasImg: null
			}
		},
		components:{
			headerBg
		},
		onPullDownRefresh(e){
			this.getPowerIndexDataFn();
		},
		created() {
			_self = this;
			this.navListArr = [
				{
					name:"智慧用电",
					icon:"tubiaoshangchuanmoban",
					url:"../home/wisdomElectricity/index",
					// #ifdef MP-WEIXIN
					background:"linear-gradient(-55deg, #52AA52, #76D296);",
					// #endif
					// #ifndef MP-WEIXIN
					background:"#76D296",
					// #endif
					boxShadow: "0px 9px 15px 0px rgba(87, 175, 91, 0.3);"
				},
				{
					name:"扫码",
					icon:"saoma",
					url:"none",
					method: "scanCode",
					// #ifdef MP-WEIXIN
					background:"linear-gradient(-55deg, #0292F6, #5FB8FD);",
					// #endif
					// #ifndef MP-WEIXIN
					background:"#5FB8FD",
					// #endif
					boxShadow: "0px 9px 15px 0px rgba(3, 183, 250, 0.3);"
				}
			];
			console.log('this.navListArr: ', this.navListArr)
			// uni.upx2px(750) 这是uni-app自带的自适应，以750的尺寸为基准。动态变化
			this.cWidth=uni.upx2px(750);
			this.cHeight=uni.upx2px(260);
			this.arcbarWidth=uni.upx2px(20);
			this.getPowerIndexDataFn();
		},
		methods: {
			// 获取首页数据
			getPowerIndexDataFn(){
				/****** 模拟数据 ***********/
				// this.pageIndexData = {
				// 	projectTotal:10,
				// 	deviceTotal:20,
				// 	onlineDeviceTotal:30,
				// 	todayAlarmTotal:40,
				// 	alarmTotal:100
				// }
				// this.alrmNotice = ["福建福州中德润德润物联中空开于2021年2月1日14:13:30发生报警"];
				// this.playState = true;
				// this.drawChartsFn(parseFloat(30) / 100);
				// this.lineProgressData = {
				// 	alarmTotalPercent:100,
				// 	processedPercent:(70 / 100) * 100,
				// 	unProcessedPercent:(30 / 100) * 100,
				// }
				// return;
				/****** 模拟数据---end ***********/
				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("暂无警报");
					}
					// 处理率
					this.drawChartsFn(parseFloat(processedRate) / 100);
					// 百分比数据
					this.lineProgressData = {
						alarmTotalPercent:alarmTotal!=0?100:0,
						processedPercent:(processed / alarmTotal) * 100,
						unProcessedPercent:(unProcessed / alarmTotal) * 100,
						// zhyd:(zhyd / alarmTotal) * 100,
						// dqhz:(dqhz / alarmTotal) * 100,
						// swsy:(processed / alarmTotal) * 100,
						// yw:(yw / alarmTotal) * 100
					};
				}).catch((err)=>{
					console.log(err,"errr");
				}).finally(()=>{
					 uni.stopPullDownRefresh();
				})
			},
			drawChartsFn(value){
				console.log(value,"value");
				let obj = {
					color: "#1890ff",
					data: value,
					index: 0,
					legendShape: "circle",
					name: "已处理率",
					pointShape: "circle",
					show: true,
					type: "arcbar"
				}
				let Arcbar3 = {
					series:[obj]
				}
				// 找到id为dealWithChartsId的块
				_self.showArcbar("dealWithChartsId", Arcbar3);
			},
			goFuctionUrlFn(item){
				if (item.url !== 'none') {
					uni.navigateTo({
						url:item.url
					})
				} else {
					uni[item.method]({
						success(res) {
							if (res.errMsg === 'scanCode:ok') {
								_self.show = true;
								_self.deviceKey = res.result;
							}
						}
					})
				}
			},
			addDevice () {
				let data = {
					deviceKey: this.deviceKey,
					devicePassword: this.password
				};
				this.$post('/app/device/binding-device', data).then((res) => {
					console.log(res)
					if (res.code === 200) {
						this.$u.toast('添加成功', 3000);
					} else {
						this.$u.toast(res.msg, 3000);
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			toJSON () {},
			// 展示图标的函数 接收参数，一个块的id,一个数据
			showArcbar(canvasId, chartData) {
				canvaLineA = new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'arcbar',
					fontSize:11,
					legend:false,
					title: {
						name: Math.round(chartData.series[0].data*100)+'%',
						color: chartData.series[0].color,
						fontSize: 25*_self.pixelRatio
					},
					subtitle: {
						name: chartData.series[0].name,
						color: '#666666',
						fontSize: 15*_self.pixelRatio
					},
					extra: {
						arcbar:{
							type:'circle',//整圆类型进度条图
							width: _self.arcbarWidth*_self.pixelRatio,//圆弧的宽度
							startAngle:0.5//整圆类型只需配置起始角度即可
						}
					},
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					series: chartData.series,
					animation: true,
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					dataLabel: true,
				});
				canvaLineA.addEventListener('renderComplete', () => {//监控图表渲染完成
					setTimeout(() => {
						uni.canvasToTempFilePath({
							width: 345,
							height: 130,
							x: 0,
							y: 0,
							canvasId: 'dealWithChartsId',
							success: function(res) {
								// 在H5平台下，tempFilePath 为 base64
								console.log(res.tempFilePath)
								_self.canvasImg = res.tempFilePath;
							},
							fail: function(err) {
								console.log(err)
							}
						}, _self);
					}, 100);
				});
			},
			// 点击图表显示的内容
			touchLineA(e) {
				// 使用声明的变量canvaLineA
				canvaArcbar1.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			}
		}
	}
</script>
