<template>
  <view class="page" ref="page">
	<page-header></page-header>
	<view class="content">
		<uni-row :gutter="12">
			<uni-col :span="12">
				<uni-row :gutter="12">
					<uni-col :span="8">
						<view class="block">
							<view class="title">
								<span>{{ temprator }}</span>
								<span>°C</span>
							</view>
							<span>温度</span>
						</view>
					</uni-col>
					<uni-col :span="8">
						<view class="block">
							<view class="title">
								<span>{{ humidity }}</span>
								<span>%RH</span>
							</view>
							<span>湿度</span>
						</view>
					</uni-col>
					<uni-col :span="8">
						<view class="block">
							<view class="title">
								<span>{{ pressure }}</span>
								<span>Pa</span>
							</view>
							<span>压差</span>
						</view>
					</uni-col>
				</uni-row>
			</uni-col>
			<uni-col :span="12">
				<uni-row :gutter="12">
					<uni-col :span="12">
						<view class="block">
                            <template v-if="connect">
                                <view class="tag">
                                    <span class="icon wifi"></span>
                                </view>
                                <span>联网中</span>
                            </template>
                            <template v-else>
                                <view class="tag">
                                    <span class="icon nowifi"></span>
                                </view>
                                <span>未连接</span>
                            </template>
						</view>
					</uni-col>
					<uni-col :span="12">
						<view class="block">
                            <template v-if="clean">
                                <view class="tag" @click="cleanMode(false)">
                                    <span class="icon clean"></span>
                                </view>
                                <span>清扫模式</span>
                            </template>
                            <template v-else>
                                <view class="tag" @click="cleanMode(true)">
                                    <span class="icon autorun"></span>
                                </view>
                                <span>自动模式</span>
                            </template>
						</view>
					</uni-col>
				</uni-row>
			</uni-col>
		</uni-row>

		<view class="column">
			<view class="list" v-for="(item, index) in list" :key="index">
				<uni-row style="width: 100%;text-align: left;display: flex;">
					<uni-col style="flex: 0 0 60px;">
						<uni-row type="flex" justify="center" align="middle" style="height: 40px;">
							<span class="circle">{{ index+1 }}</span>
						</uni-row>
					</uni-col>
					<uni-col style="flex: 1;">
						<uni-row v-if="item.content[0].ic" class="info" :class="{
                            'over': item.content[0].isWarning == 'over', 'near': item.content[0].isWarning == 'near'
                            }">
							<view>
								{{ item.content[0].ic }}
							</view>
							<view>
								{{ item.content[0].text }}
							</view>
						</uni-row>
						<uni-row v-else class="info"> 
							<span class="out-text">已取出</span>
						</uni-row>
					</uni-col>
					<uni-col style="flex: 0 0 20px;text-align:left;">
						<span class="space"></span>
					</uni-col>
					<uni-col style="flex: 1;">
						<uni-row v-if="item.content[1].ic" class="info" :class="{
                            'over': item.content[1].isWarning == 'over', 'near': item.content[1].isWarning == 'near'}">
							<view>
								{{ item.content[1].ic }}
							</view>
							<view>
								{{ item.content[1].text }}
							</view>
						</uni-row>
						<uni-row v-else> 
							<span class="out-text">已取出</span>
						</uni-row>
					</uni-col>
				</uni-row>
			</view>
		</view>		
        <uni-row :gutter="12" class="bottom">
            <uni-col :span="6">
                <view class="block">
                    <view class="tag" @click="lightClick">
                        <span class="icon light"></span>
                        <template v-if="light">
                            <span class="tag-text active">开启</span>
                        </template>
                        <template v-else>
                            <span class="tag-text">关闭</span>
                        </template>
                    </view>
                    <span>照明</span>
                </view>
            </uni-col>
            <uni-col :span="6">
                <view class="block">
                    <view class="tag" @click="doorClick">
                        <span class="icon door"></span>
                        <template v-if="door">
                            <span class="tag-text active">开启</span>
                        </template>
                        <template v-else>
                            <span class="tag-text">关闭</span>
                        </template>
                    </view>
                    <span>开门</span>
                </view>
            </uni-col>
            <uni-col :span="6">
                <view class="block">
                    <view class="tag" @click="disinfectClick">
                        <span class="icon xiaodu"></span>
                        <template v-if="disinfect">
                            <span class="tag-text active">开启</span>
                        </template>
                        <template v-else>
                            <span class="tag-text">关闭</span>
                        </template>
                    </view>
                    <span>消毒</span>
                </view>
            </uni-col>
            <uni-col :span="6"> 
                <view class="block">
                    <view class="tag" @click="vacuumClick">
                        <span class="icon zhenkong"></span>
                        <template v-if="vacuum">
                            <span class="tag-text active">开启</span>
                        </template>
                        <template v-else>
                            <span class="tag-text">关闭</span>
                        </template>
                    </view>
                    <span>真空</span>
                </view>
            </uni-col>
        </uni-row>
	</view>
    <notice ref="notice"></notice>
	<page-footer></page-footer>
  </view>
</template>

<script>
import PageHeader from '@/components/PageHeader.vue'
import PageFooter from '@/components/PageFooter.vue'
import Notice from '@/components/Notice.vue'
import { formatDateTime, getTimeDifference } from '@/utils/common.js'
import { getDataList } from '@/db/sqlite.js'
import cmd from '@/utils/cmd.js'
import storage from '@/utils/storage.js'
export default {
	components: {
		PageFooter, PageHeader, Notice
	},

    data() {
        return {
            list: [
                // {title: '1', content: [{
                //     ic: 'SN00394280', text: '已存入：32h 42m', isWarning: true
                // }]},
            ],
            timer: null, // 定时器
            timeouter: null, // 延时器
        }
    },
    computed: {
		// 存储临期
        endoNear() {
            return this.$store.state.run.endoNear
        },
		// 存储超期
        endoOver() {
            return this.$store.state.run.endoOver
        },
        temprator() {
            return this.$store.state.sensor.temp
        },
        humidity() {
            return this.$store.state.sensor.humi
        },
        pressure() {
            return this.$store.state.sensor.pressure
        },
        disinfect() { 
            // 消毒
            return this.$store.state.relay.disinfect
        },
        vacuum() { 
            //真空
            return this.$store.state.relay.vacuum
        },
        light() { 
            // 照明
            return this.$store.state.relay.light
        },
        door() { 
            // 照明
            return this.$store.state.relay.door
        },
        clean() { 
            // 清扫模式
            return this.$store.state.clean
        },
        connect() {
            // 联网状态
            return this.$store.state.connect
        }
    },
    watch: {},
    onBackPress(option) {
        uni.redirectTo({ url: '/pages/start', animationType: 'fade-out' })
        return true;
    },
    onLoad() {

    },
    onShow() { 
        uni.$on('notice', (data) => { this.showNotice(data) })
        this.getData()
        this.startTimer()       
    },
    onHide() {
        uni.$off('notice')
        this.clearTimer()
    },
    methods: {
        startTimer() { 
            this.timer = setInterval(() => { 
                this.getData()
            }, 60000)
        },
        clearTimer() { 
            clearInterval(this.timer)
        },
        showNotice(data) {
            this.$nextTick(() => { 
                this.$refs.notice.open({
                    title: data.title || '',
                    content: data.content || '',
                })
                this.clearTimer()
                this.getData()
                this.startTimer()
            })        
        },
        async getData() { 
            let res = await getDataList('scope', 1, 16, 'key', 'asc')
            if (res) { 
                this.handleData(res.list)
            }
        },
        handleData(list) {
            // console.log('handleData', list)
            let data = []
            for (let i = 0; i < 8; i++) {
                data.push({ title: i + 1, content: [
                    {ic: '', text: '', isWarning: false},
                    {ic: '', text: '', isWarning: false}
                ]})
            }
            this.list = data

            for (let key = 0; key < list.length; key++) { 
                let i = list[key]
                // 与当前时间差
                let diff = getTimeDifference(formatDateTime(i.time), formatDateTime())                
                let title = parseInt(key/2)
                let diffText = '已存入：' + diff.hours + 'h ' + diff.minutes + 'm'

                // 偶数数据
                let content = key%2 == 0 ? this.list[title].content[0] : this.list[title].content[1]
                               
                content.ic = i.ic
                content.text = ''
                content.isWarning = false
                if (i.ic != '') {
                    content.text = diffText
                    if (diff.hours >= this.endoNear) { 
                        content.isWarning = 'near'
                    }
                    if (diff.hours >= this.endoOver) {
                        content.isWarning = 'over'
                    }
                }
            }
        },
        lightClick() {
            let light = this.$store.state.relay.light
            cmd.Light(!light)
        },
        doorClick() {
			// 调试手动关门
			// let door = this.$store.state.relay.door
            // cmd.Door(true)
        },
		disinfectClick() {
			// 消毒手动开启
			if (this.$store.state.relay.disinfect == true) {
				return false
			}
			let timer = this.$store.state.run.disinfectTime * 60 * 1000
			clearTimeout(this.timeouter)
            this.$store.state.autoDisinfect = false
			cmd.Disinfect(true)
			cmd.Wind(true)
			this.timeouter = setTimeout(() => { 
				// 延时关闭
                this.$store.state.autoDisinfect = true
				cmd.Disinfect(false)
			  }, timer)			
		},
        vacuumClick() {

        },
        cleanMode(status) {
            this.$store.state.clean = status
            uni.showToast({
                title: '已切换至' + (status ? '清扫模式' : '自动模式'),
                icon: 'none'
            })
        }

    }
}
</script>

<style scoped>
.page{
    /* padding: 10px; */
    height: 100%;
    display: flex;
    flex-direction: column;
}
.content{
	flex: 1;
	display: flex;
	width: 100%;
	height: 100%;
	flex-direction: column;
	padding: 10px 20px;
}
.block {
    height: 120px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    border-radius: 15px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 6px;
    background: linear-gradient(180deg, #1C1F31 2%, #0A0D1B 100%);
    box-sizing: border-box;
    /* border: 1px solid; */
    border-image: linear-gradient(180deg, rgba(151, 149, 182, 0.41) 0%, #2A2D3D 100%) 1;
    color: #fff;
}
.bottom .block {
    height: 100px;
}

.block view.title span:first-child{
    font-size: 28px;
    font-weight: 500;
    line-height: 36px;
}
.block view.title > span {
    clear: both;
    display: block;
}
.block > span:last-child{
    font-size: 16px;
    font-weight: normal;
    line-height: 24px;
    color: #C9C9C9;
}
.tag {
    display: flex;
    flex-direction: row;
    /* margin-right: 10px; */
    width: 100%;
    justify-content: space-around;
    align-items: center;
    padding-top: 10px;
}
.tag .icon{
    width:32px;
    height:32px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.tag .icon.xiaodu{ 
    background-image: url("@/assets/xiaodu.png");
}
.tag .icon.zhenkong{
    background-image: url("@/assets/zhenkong.png");
}
.tag .icon.light{
    background-image: url("@/assets/light.png");
}
.tag .icon.door{
    background-image: url("@/assets/door.png");
}
.tag .icon.wifi{
    background-image: url("@/assets/wifi.png");
    background-size: 100% auto;
    margin-left: 50%;
}
.tag .icon.autorun{
    background-image: url("@/assets/autorun.png");
    background-size: 100% auto;
    margin-left: 50%;
}
.tag .icon.nowifi{
    background-image: url("@/assets/nowifi.png");
    background-size: 100% auto;
    margin-left: 50%;
}
.tag .icon.clean{
    background-image: url("@/assets/clean.png");
    background-size: 100% auto;
    margin-left: 50%;
}

.tag .tag-text{
    height: 24px;
    line-height: 24px;
    font-size: 14px;
    width: 50px;
    border-radius: 50px;
    background: #777D90;
}
.tag .tag-text.active{
    background: #00921c;
}


.column{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    margin: 16px 0;
}

.list{
    display: flex;
    height: 75px;
    width: 100%;
    /* border: 1px solid #C9C9C9; */
    border-radius: 15px;
    background: linear-gradient(180deg, #1C1F31 2%, #0A0D1B 100%);
    box-sizing: border-box;
    border: 1px solid #9795B6;
    border-image: linear-gradient(180deg, rgba(151, 149, 182, 0.41) 0%, #2A2D3D 100%);
    padding: 10px;
    box-sizing: border-box;
    align-items: center;
}

.circle{
    width: 24px;
    height: 24px;
    font-size: 20px;
    line-height: 24px;
    border-radius: 50%;
    margin-right: 10px;
    border: 1px solid #fff;
    color: #fff;
    display: inline-block;
    text-align: center;
}
.space{
    border-right: 1px solid #fff;
    height: 40px;
    display: inline-block;
}
.info {
    flex-direction: column;
    align-items: flex-start;
    font-size: 20px;
    line-height: 20px;
    text-align: left;
	color: #fff;
}
.info.near{ 
    color: #FFC300;
}
.info.over{
    color: red;
}
.out-text{
    color: #777D90;
    font-size: 20px;
}

</style>