<template>
    <view class="bg">
        <view class="status_bar">  
            <view class="top_view"></view>  
        </view>  
        <view class="title" @click="debug">
            智能内镜储存柜
            <p class="sub-title">
                INTELLIGENT ENDOSCOPE STORAGE CABINET
            </p>
        </view>
        <view class="btn">
            <view class="ant-btn ant-btn-lg" @click="toIndex">
                <uni-icons type="gear-filled" size="30"></uni-icons>
                进入
            </view>		
        </view>
		<uni-popup ref="popup" type="bottom" :mask-click="false">
            <view class="debug-btn-group">
                <view class="ant-btn ant-btn-lg" @click="toModbus">
                    modbus调试
                </view>
                <view class="ant-btn ant-btn-lg" @click="toSqlite">
                    sqlite调试
                </view>
                <view class="ant-btn ant-btn-lg" @click="cleanStorage">
                    清除缓存
                </view>
                <uni-icons @click="closePop" class="close-debug" type="close" size="40" color="#fff"></uni-icons>
            </view>
        </uni-popup>
        <input-num-pop ref="inputPop" @submit="inputModalSubmit" />
    </view>
</template>

<script>
import InputNumPop from '@/components/InputNumPop.vue';
import cmd from '@/utils/cmd.js'
import { delay } from "@/utils/common.js"
// #ifdef APP
import * as db from '@/db/sqlite.js'
// #endif
import store from '../store';
// #ifdef APP
import serialService from '@/service/serialService.js'
// #endif

export default {
    components: { InputNumPop },
	data() {
		return {
            clickTimes: 0,
		}
	},
    computed: {
        cleanMode() {
            return this.$store.state.clean
        },
        autoDisinfect() {
            return this.$store.state.autoDisinfect
        },
        disinfectMode() {
            return this.$store.state.relay.disinfect
        },
        windMode() { 
            return this.$store.state.relay.wind
        },
        vacuumMode() { 
            return this.$store.state.relay.vacuum
        },
        doorStatus() { 
            return this.$store.state.relay.door
        },
        doorAlert() { 
            return this.$store.state.timer.doorAlert
        },
        humi() { 
            return this.$store.state.sensor.humi
        }, 
        temp() { 
            return this.$store.state.sensor.temp
        },
    },

	onLoad() {
        uni.$on('addLog', (data) => {
            this.addLog(data.name, data.action)
        })
        // 监听内镜存入事件
        uni.$on('storeEndoscope', (data) => {
            this.addLog(data.ic, '内镜存入')
        })
        // 监听内镜取出事件
        uni.$on('takeEndoscope', (data) => {
            this.addLog(data.ic, '内镜取出')
        })

        uni.$on('closeDoor', async (data) => { 
            try {
                await cmd.LeftDoor(false)
                await delay(200)
                await cmd.RightDoor(false)
                this.addLog('门', '触摸屏关门')
                // 触发关门事件（由serialService的watcher处理）
                serialService.closeDoorEvent()
            } catch (error) {
                this.addLog('手动关门错误', error)
            }
        })
		
	},
    onShow() {},
    onBackPress() {
        return true;
    },
    onHide() {},
	onUnload() {
        // 页面销毁时无需停止串口服务（由全局service管理）
        this.addLog('页面', 'start页面已销毁（串口服务继续运行）')
	},
	methods: {
		toIndex() {
            let screenPw = this.$store.state.base.screenPw
            if(screenPw) {
                this.$refs.inputPop.show()
            } else { 
                uni.navigateTo({
                    url: '/pages/index',
                    animationType: 'fade-in',
                })
            }
		},
		toModbus() {
            try { 
                // 停止串口服务（modbus需要独占串口）
                serialService.shutdown()
            } catch (error) {}
            this.closePop()
			uni.navigateTo({
				url: '/pages/modbus/modbus'
			})
		},
		toSqlite() {
            this.closePop()
			uni.navigateTo({
				url: '/pages/database/database'
			})
		},
        cleanStorage() {
            const storage = require('@/utils/storage.js').default || require('@/utils/storage.js')
            storage.clear()
            uni.showToast({
                title: '已清空缓存，重启应用生效',
                icon: 'none'
            })
        },
        // 调试弹窗
        debug() {
            this.clickTimes++
            if (this.clickTimes == 5) {
                this.clickTimes = 0
                this.$refs.popup.open()
            }
            setTimeout(() => {
                this.clickTimes = 0
            }, 3000)    
        },
        closePop() {
            this.$refs.popup.close()
        },
        // 密码框提交
        inputModalSubmit(val) { 
            let password = this.$store.state.base.screenPw
            this.$refs.inputPop.close()
            if (val == password) {
                uni.showToast({
                    title: '验证通过',
                    icon: 'none'
                })
                setTimeout(() => {
                    uni.navigateTo({
                        url: '/pages/index',
                        animationType: 'fade-in',
                    })
                }, 300)
            } else { 
                uni.showToast({
                    title: '密码错误',
                    icon: 'none',
                })
            }
        },
        // 添加日志数据（调用serialService的addLog）
        async addLog(name, action) {
            // #ifdef APP
            serialService.addLog(name, action)
            // #endif
        },
	}
}
</script>

<style scoped>
.bg{
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url("@/assets/bg.png");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.title{
    position: absolute;
    top: 40%;
    left: 0;
    right: 0;
    margin: auto;
    height: 60px;
    font-size: 56px;
	color: #fff;
}
.sub-title{
    font-size: 14px;
    color: #777D90;
}
.btn{
    position: absolute;
    bottom: 125px;
    left: 0;
    right: 0;
    margin: auto;
    width: 200px;
}

.ant-btn.ant-btn-lg{
    font-size: 28px;
    height: 60px;
    border-radius: 50px;
    width: 180px;
}

.debug-btn-group{
    margin-bottom: 40rpx;
    position: relative;
}
.debug-btn-group .ant-btn{
    margin: 0 10rpx;
    font-size: 20px;
    line-height: 40px;
    width:auto;
}
.close-debug{
    position: absolute;
    right: 10px;
}
</style>
