<template>
	<view class="index-page">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view>
			<!-- 基础统计 -->
			<view class="basic-statistics">
				<view class="basic-text"><text class="text text-bold">基础统计</text></view>
				<view class="basic">
					<view class="basic-item" v-for="(item,index) in basicStatistics" :key="index">
						<view class="item-child-top u-flex">
							<image class="item-image" :src="item.icon"></image>
							<text class="item-text home-text-muted">{{item.text}}</text>
						</view>
						<view class="item-child-bottom u-flex">
							<view @click="navigatorPage(item,item.leftParam)" class="u-flex sigle-child">
								<view class="sigle-text">
									<text class="home-text-total">{{item.value.leftValue}}</text>
								</view>
								<view class="sigle-value"><text
										class="home-text-total-bottom">{{item.label.leftText}}</text></view>
							</view>
							<view @click="navigatorPage(item,item.centerParam)" class="u-flex sigle-child">
								<view class="sigle-text">
									<text class="home-text-total">{{item.value.centerValue}}</text>
								</view>
								<view class="sigle-value"><text
										class="home-text-total-bottom">{{item.label.centerText}}</text></view>
							</view>
							<view @click="navigatorPage(item,item.rightParam)" class="u-flex sigle-child">
								<view class="sigle-text">
									<text class="home-text-total">{{item.value.rightValue}}</text>
								</view>
								<view class="sigle-value"><text
										class="home-text-total-bottom">{{item.label.rightText}}</text></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 网格信息 -->
			<view class="grid-container">
				<view v-for="(item,index) in basicGridList" :key="index" @click="handleEvent(item.event)"
					class="grid-item">
					<view class="item-center">
						<view class="center">
							<image class="image" :src="item.icon"></image>
						</view>
						<view class="center-text"><text class="text text-muted" style="">{{item.text}}</text></view>
					</view>
				</view>
			</view>
		</view>
		<f-tabbar></f-tabbar>
	</view>
</template>

<script>
	import fTabbar from '@/components/module/f-tabbar/f-tabbar';
	import {
		mapActions
	} from 'vuex';
	import api from '@/api/index.js'
	import {
		useNavigateTo
	} from '@/plugins/utils.js'
	import {
		basicGridList,
		basicStatistics
	} from './config/data.js'

	export default {
		components: {
			fTabbar
		},
		data() {
			return {
				basicGridList,
				basicStatistics,
			};
		},
		onLoad() {
			// 隐藏原生的tabbar
			uni.hideTabBar();
			if (getApp().getBindNot()) {
				return
			}
			this.getDeviceTotalData();
			uni.setStorageSync('getConfiguration', {
				isConfiguration: false
			});
			uni.removeStorageSync('getConfiguration');
		},
		onPullDownRefresh() {
			this.getDeviceTotalData();
			setTimeout(function() {
				uni.stopPullDownRefresh();
				uni.$u.toast('下拉刷新成功...');
			}, 200);
		},
		methods: {
			...mapActions(['updateBadgeTotal']),
			async getDeviceTotalData() {
				const res = await api.homeApi.getHomeStatisticsApi()
				if (res) {
					const { onLine,offLine,inActive } = res.totalDevice
					const { activedAlarm,clearedAck,clearedUnack } = res.totalAlarm
					this.basicStatistics.map(item=>{
						const { key, value } = item
						if(key === 'device'){
							value.leftValue = onLine
							value.centerValue =offLine
							value.rightValue = inActive
						}else{
							value.leftValue = activedAlarm
							value.centerValue =clearedAck
							value.rightValue = clearedUnack
						}
					})
					//异步实时更新告警徽标数
					this.updateBadgeTotal(res.totalAlarm?.activedAlarm);
				}
			},
			openCamera() {
				useNavigateTo('components/camera/camera')
			},
			openConfiguration() {
				useNavigateTo('components/configuration/configuration')
			},
			openVisualBoard() {
				useNavigateTo('components/visualBoard/index')
			},
			handleEvent(event) {
				if(event==='visualBoard') {
					this.openVisualBoard()
				}else if (event === 'openCamera') this.openCamera()
				else {
					this.openConfiguration()
				}
			},
			navigatorPage(item, type) {
				const {
					text
				} = item
				if (text === '设备统计') this.navigatorDeviceStatus(type)
				else {
					this.navigatorAlarmStatus(type)
				}
			},
			//告警状态查询
			navigatorAlarmStatus(e) {
				uni.reLaunch({
					url: '../alarm/alarm?type=' + JSON.stringify(e)
				});
			},
			//设备状态查询
			navigatorDeviceStatus(e) {
				uni.reLaunch({
					url: '../device/device?deviceState=' + JSON.stringify(e)
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import './static/index.scss';
</style>