<template>
	<view class="index-page">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view>
			<!-- 基础统计 -->
			<view class="basic-statistics">
				<view class="basic-text"><text class="text text-bold">{{ $t('homePage.basicstatistics') }}</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">{{ $t(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">{{ $t(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">{{ $t(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">{{ $t(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="">{{ $t(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,
		};
	},
	onReady(){
		console.log(123,'123')
	},
	onLoad() {
		// 隐藏原生的tabbar
		uni.hideTabBar()
	},
	onShow() {
		this.$nextTick(()=>{
			uni.setNavigationBarTitle({
				title:this.$t('menu.homePage')
			})
		})
		
		if (getApp().getBindNot()) {
			this.basicStatistics.map(item => {
				const { key, value } = item
				if (key === 'device') {
					value.leftValue = 0
					value.centerValue = 0
					value.rightValue = 0
				} else {
					value.leftValue = 0
					value.centerValue = 0
					value.rightValue = 0
				}
			})
			return
		}
		this.getDeviceTotalData();
		uni.setStorageSync('getConfiguration', {
			isConfiguration: false
		});
		uni.removeStorageSync('getConfiguration');
		
	},
	onPullDownRefresh() {
		if (getApp().getBindNot()) {
			return
		}
		this.getDeviceTotalData();
		setTimeout(function () {
			uni.stopPullDownRefresh();
			uni.$u.toast(this.$t('common.refreshSuccess'));
		}, 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')
		},
		openLargeScreen(){
			useNavigateTo('components/largeScreen/index')
		},
		handleEvent(event) {
			if (getApp().getBindNot()) {
				uni.$u.toast(this.$t('common.pleaseBindAccount'))
				return
			}
			if (event === 'visualBoard') {
				this.openVisualBoard()
			}else if(event==='largeScreen') this.openLargeScreen()
			 else if (event === 'openCamera') this.openCamera()
			else {
				this.openConfiguration()
			}
		},
		navigatorPage(item, type) {
			const {
				text
			} = item
			if (text === 'homePage.deviceStatistics') 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>