<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>

		<scroll-view class="column" scroll-y="true">

			<view class="list" v-for="(item, index) in sortedList" :key="index">
				<uni-row style="width: 100%;text-align: left;display: flex;align-items: center;">
					<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.ic" class="info" :class="{
                            'over': item.isWarning == 'over', 'near': item.isWarning == 'near'
                            }">
							<view>
								{{ item.rfid }}
							</view>
						</uni-row>
						<uni-row v-else class="info">
							<span class="out-text"></span>
						</uni-row>
					</uni-col>
					<uni-col style="flex: 0 0 200px;">
						<uni-row v-if="item.ic" class="info-right" :class="{
                            'over': item.isWarning == 'over', 'near': item.isWarning == 'near'
                            }">
							{{ item.text }}
						</uni-row>
					</uni-col>
				</uni-row>
			</view>
		</scroll-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>
    <slot-notice ref="doorNotice" title="选择门">
        <view class="door-select-content">
            <view class="door-btn" @click="openLeftDoor">
                <text>开左门</text>
            </view>
            <view class="door-btn" @click="openRightDoor">
                <text>开右门</text>
            </view>
        </view>
    </slot-notice>
    <slot-notice ref="actionNotice" title="选择操作">
        <view class="door-select-content">
            <view class="door-btn" @click="storeEndoscope">
                <text>存入</text>
            </view>
            <view class="door-btn" @click="takeEndoscope">
                <text>取出</text>
            </view>
        </view>
    </slot-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 SlotNotice from '@/components/SlotNotice.vue'
import { formatDateTime, getTimeDifference } from '@/utils/common.js'
import { getDataList } from '@/db/sqlite.js'
import * as db from '@/db/sqlite.js'
import cmd from '@/utils/cmd.js'
import storage from '@/utils/storage.js'
import * as Api from '@/api/index.js'
export default {
	components: {
		PageFooter, PageHeader, Notice, SlotNotice
	},

    data() {
        return {
            list: [
                // { ic: 'SN00394280', text: '已存入：32h 42m', isWarning: 'over' },
                // { ic: 'SN00394281', text: '已存入：25h 15m', isWarning: 'near' },
                // { ic: 'SN00394282', text: '已存入：5h 30m', isWarning: false },
                // { ic: 'SN00394283', text: '已存入：12h 20m', isWarning: false },
                // { ic: 'SN00394284', text: '已存入：8h 45m', isWarning: false },
                // { ic: '', text: '', isWarning: false },
                // { ic: '', text: '', isWarning: false },
                // { ic: '', text: '', isWarning: false },
                // { ic: 'SN00394285', text: '已存入：40h 10m', isWarning: 'over' },
                // { ic: 'SN00394286', text: '已存入：22h 05m', isWarning: 'near' },
                // { ic: 'SN00394287', text: '已存入：3h 55m', isWarning: false },
                // { ic: '', text: '', isWarning: false },
                // { ic: '', text: '', isWarning: false },
                // { ic: '', text: '', isWarning: false },
                // { ic: '', text: '', isWarning: false },
                // { ic: '', text: '', isWarning: false }
            ],
            timer: null, // 定时器
            timeouter: null, // 延时器
            currentCardNumber: '', // 当前卡号

            currentName: '' // 当前用户名
        }
    },
    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
        },
        sortedList() {
            // 有数据的在前面，空数据在后面
            let hasData = this.list.filter(item => item.ic && item.ic !== '')
            let noData = this.list.filter(item => !item.ic || item.ic === '')
            return [...hasData, ...noData]
        }
    },
    watch: {},
    onBackPress(option) {
        uni.redirectTo({ url: '/pages/start', animationType: 'fade-out' })
        return true;
    },
    async onLoad() {

    },
    onShow() {
        uni.$on('notice', (data) => { this.showNotice(data) })
        uni.$on('showDoorSelect', (cardNumber) => { this.showDoorSelect(cardNumber) })
        uni.$on('showActionSelect', (cardNumber) => { this.showActionSelect(cardNumber) })
        this.getData()  // 注释掉以使用测试数据
        this.startTimer()

    },
    onHide() {
        uni.$off('notice')
        uni.$off('showDoorSelect')
        uni.$off('showActionSelect')
        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 < 16; i++) {
                data.push({ ic: '', text: '', isWarning: false, rfid: '' })
            }
            this.list = data
            let curDate = formatDateTime()
            for (let key = 0; key < list.length; key++) {
                let i = list[key]
                // 与当前时间差
                let diff = getTimeDifference(formatDateTime(i.time), curDate)
                let diffText = '已存入：' + diff.hours + 'h ' + diff.minutes + 'm'

                let item = this.list[key]
                item.ic = i.ic
                item.text = ''
                item.rfid = i.rfid
                item.isWarning = false
                if (i.ic != '') {
                    item.text = diffText
                    if (diff.hours >= this.endoNear) {
                        item.isWarning = 'near'
                    }
                    if (diff.hours >= this.endoOver) {
                        item.isWarning = 'over'
                    }
                }
            }
        },
        lightClick() {
            let light = this.$store.state.relay.light
            cmd.Light(!light)
        },
        doorClick() {
			// 调试手动关门
			// let door = this.$store.state.relay.door
            // cmd.Door(true)
            // this.$refs.doorNotice.open()
            uni.showToast({ title: '手动关门', icon: 'none' })
            uni.$emit('closeDoor');
        },
		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() {

        },
        openLeftDoor() {
            // 打开左门
            this.$refs.doorNotice.close()
            cmd.LeftDoor(true)
            // 通知start页面记录日志
            uni.$emit('addLog', { name: this.currentCardNumber, action: '开左门' })
            uni.showToast({
                title: '左门已开启',
                icon: 'none'
            })
        },
        openRightDoor() {
            // 打开右门
            this.$refs.doorNotice.close()
            cmd.RightDoor(true)
            // 通知start页面记录日志
            uni.$emit('addLog', { name: this.currentCardNumber, action: '开右门' })
            uni.showToast({
                title: '右门已开启',
                icon: 'none'
            })
        },
        cleanMode(status) {
            this.$store.state.clean = status
            uni.showToast({
                title: '已切换至' + (status ? '清扫模式' : '自动模式'),
                icon: 'none'
            })
        },
        showDoorSelect(cardNumber) {
            // 显示门选择弹窗
            this.currentCardNumber = cardNumber
            this.$nextTick(() => {
                this.$refs.doorNotice.open()
            })

            db.selectDataList('user', {'ic': cardNumber}).then(res => {
                if (res.length > 0) {
                    this.currentName = res[0].name
                } else {
                    db.selectDataList('user', {'ic2': cardNumber}).then(res => {
                        if (res.length > 0) {
                            this.currentName = res[0].name
                        }
                    })
                }
            })

        },
        showActionSelect(cardNumber) {
            // 显示操作选择弹窗（存入/取出）
            // 根据当前门状态判断可执行的操作
            this.currentCardNumber = cardNumber
            this.$nextTick(() => {
                this.$refs.actionNotice.open()
            })
        },
        async storeEndoscope() {
            // 存入内镜 - 门打开状态时才能存入
            if (!this.$store.state.relay.door) {
                uni.showToast({
                    title: '请先开门',
                    icon: 'none'
                })
                this.$refs.actionNotice.close()
                return
            }

            this.$refs.actionNotice.close()

            // 查找scope表中第一个空闲位置（ic为空的位置）
            try {
                let scopeList = await db.selectDataList('scope', {})
                let emptyKey = -1

                for (let i = 0; i < scopeList.length; i++) {
                    if (!scopeList[i].rfid || scopeList[i].rfid === '') {
                        emptyKey = scopeList[i].key
                        break
                    }
                }
                if (emptyKey === -1) {
                    uni.showToast({ title: '没有空闲位置', icon: 'none' })
                    return
                }

                let rfid = ""
                let endList = await db.selectDataList('endo', {ic: this.currentCardNumber})
                if (endList.length > 0) { 
                    rfid = endList[0].rfid
                } else {
                    let endList = await db.selectDataList('endo', {ic2: this.currentCardNumber})
                    if (endList.length > 0) { 
                        rfid = endList[0].rfid
                    }
                }

                // 更新scope表，记录存入信息
                await db.updateSQL('scope', {
                    name: 'enter',
                    ic: this.currentCardNumber,
                    rfid: rfid,
                    time: formatDateTime()
                }, 'key', emptyKey)

                // 通知start页面记录日志
                uni.$emit('storeEndoscope', { ic: this.currentCardNumber })

                uni.showToast({
                    title: '内镜已存入',
                    icon: 'none'
                })
                // 关闭操作选择框
				this.$refs.actionNotice.close()
                // 刷新数据
                this.getData()
                // 添加入库记录到服务器
                Api.endoscopeInwareLog({
                    'endoscope_steel_no': rfid,
                    'rfid_reader': '123456',
                    'user_name': this.currentName
                })

            } catch (error) {
                console.log('存入内镜失败:', error)
                uni.showToast({
                    title: '存入失败',
                    icon: 'none'
                })
            }
        },

        async takeEndoscope() {
            // 取出内镜 - 门关闭状态时才能取出
            // if (this.$store.state.relay.door) {
            //     uni.showToast({
            //         title: '请先关门',
            //         icon: 'none'
            //     })
            //     this.$refs.actionNotice.close()
            //     return
            // }

            // this.$refs.actionNotice.close()

            // 根据卡号查找scope表中的位置
            try {
                let rfid = ""
                let endList = await db.selectDataList('endo', {ic: this.currentCardNumber})
                if (endList.length > 0) { 
                    rfid = endList[0].rfid
                } else {
                    let endList = await db.selectDataList('endo', {ic2: this.currentCardNumber})
                    if (endList.length > 0) { 
                        rfid = endList[0].rfid
                    }
                }

                let scopeList = await db.selectDataList('scope', {})
                let foundKey = -1
                for (let i = 0; i < scopeList.length; i++) {
                    if (scopeList[i].rfid == rfid) {
                        foundKey = scopeList[i].key
                        break
                    }
                }
                if (foundKey === -1) {
                    uni.showToast({
                        title: '未找到该内镜',
                        icon: 'none'
                    })
                    return
                }

                // 更新scope表，清空该位置
                await db.updateSQL('scope', {
                    name: 'leave',
                    ic: '',
                    rfid: '',
                    time: formatDateTime()
                }, 'key', foundKey)

                // 通知start页面记录日志
                uni.$emit('takeEndoscope', { ic: this.currentCardNumber })

                uni.showToast({
                    title: '内镜已取出',
                    icon: 'none'
                })
				this.$refs.actionNotice.close()
                this.getData()
                // 添加出库记录到服务器
                Api.endoscopeOutwareLog({
                    'endoscope_steel_no': rfid,
                    'rfid_reader': '123456',
                    'user_name': this.currentName
                })

            } catch (error) {
                console.log('取出内镜失败:', error)
                uni.showToast({
                    title: '取出失败',
                    icon: 'none'
                })
            }
        }


    }
}
</script>

<style scoped>
.page{
    /* padding: 10px; */
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.content{
	flex: 1;
	display: flex;
	width: 100%;
	flex-direction: column;
	padding: 10px 20px;
	overflow: hidden;
	min-height: 0;
}
.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;
    flex: 1;
    min-height: 0;
    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: row;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    line-height: 20px;
    text-align: left;
	color: #fff;
}
.info view {
    display: inline-block;
}
.info-right {
    flex-direction: row;
    align-items: center;
    font-size: 20px;
    line-height: 20px;
    text-align: right;
	color: #fff;
}
.info.near{ 
    color: #FFC300;
}
.info.over{
    color: red;
}
.out-text{
    color: #777D90;
    font-size: 20px;
}

.door-select-content {
    display: flex;
    flex-direction: row;
    gap: 40px;
    padding: 20px;
}

.door-btn {
    width: 200px;
    height: 80px;
    background: linear-gradient(180deg, #1C1F31 2%, #0A0D1B 100%);
    border: 1px solid #9795B6;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s;
}

.door-btn:active {
    transform: scale(0.95);
    background: linear-gradient(180deg, #2C2F41 2%, #1A1D2B 100%);
}

</style>