<route lang="jsonc" type="page">{
    "layout": "default",
    "style": {
		"navigationStyle": "custom"
    }
}</route>

<template>
    <view class="pb-40rpx">
		<view>
			<navbar title="设备控制" custom-class='!bg-[#F6F7F8]'></navbar>
		</view>

        <view class="mt-50rpx mx-40rpx">
            <view class="">
                <view class="font-bold text-36rpx leading-50rpx text-[#303133]">大门</view>
                <view class="relative mt-30rpx">
                    <wd-img width="670rpx" height="202rpx" :src="`${OSS}images/store/store/image1.png`" mode="aspectFill" />
                    <view class="absolute top-64rpx left-0 px-46rpx flex items-center justify-between w-full">
                        <view class="flex items-center">
                            <wd-img width="96rpx" height="96rpx" :src="`${OSS}images/store/store/image4.png`" mode="aspectFill" />
                            <view class="font-bold text-34rpx leading-48rpx text-[#303133] ml-32rpx">门锁</view>
                        </view>
                        <view class="relative h-64rpx">
                            <wd-img width="224rpx" height="64rpx" :src="`${OSS}images/reserve_room/reserve_room_image5.png`"/>
                            <view class="text-[#4C9F44] font-bold text-32rpx leading-44rpx absolute top-[50%] transform translate-y-[-50%] left-74rpx">点击开锁</view>
                        </view>
                    </view>
                </view>
            </view>

            <view class="mt-30rpx">
                <view class="mb-40rpx" v-for="(item, index) in 5" :key="index">
                    <view class="font-bold text-36rpx leading-50rpx text-[#303133] mb-30rpx">大楼开门码</view>
                    <view class="flex items-center justify-between">
                        <view class="w-240rpx h-280rpx bg-white rounded-32rpx flex flex-col items-center justify-center">
                            <view class="">
                                <wd-img width="90rpx" height="90rpx" :src="`${OSS}images/store/store/image2.png`" mode="aspectFill" />
                            </view>
                            <view class="font-bold text-34rpx text-[#303133] leading-48rpx">门锁</view>
                            <view class="bg-[#4C9F44] rounded-20rpx w-168rpx h-60rpx text-center leading-60rpx text-[#fff] mt-10rpx" @cliclk="Device.handleOpenLock">
                                开锁
                            </view>
                        </view>
                        <view class="w-410rpx h-280rpx bg-white rounded-16rpx pl-60rpx pr-34rpx">
                            <view class="flex items-top justify-between px-20rpx py-4rpx  pt-40rpx">
                                <wd-img width="90rpx" height="90rpx" :src="`${OSS}images/store/store/image3.png`" mode="aspectFill" />
                                <view class="text-28rpx leading-40rpx text-[#303133] mt-12rpx">ON</view>
                            </view>
                            <view class="font-bold text-28rpx text-[#303133] leading-40rpx mt-34rpx flex items-center justify-between">
                                <view class="font-bold text-34rpx leading-48rpx text-[#303133]">插座空开</view>
                                <wd-switch v-model="item.checked" size="48rpx" active-color="#4C9F44"/>
                            </view>
                        </view>
                    </view>
                </view>
              
            </view>
        </view>
    </view>
</template>


<script lang="ts" setup>
    import { OrderSource, OrderStatus, TeaRoomOrderStatusText, TeaRoomOrderStatusValue } from '@/utils/order'
    import ComboCard from '@/components/order/ComboCard.vue'
	import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
	import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
    import { getTeaRoomOrderList } from '@/api/tea-room'
	import { router } from '@/utils/tools'

    const OSS = inject('OSS')

    const checked = ref<boolean>(false)

    // mescroll
	const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
    const downOption = {
		auto: true
	}
	const upOption = {
		auto: true,
		textNoMore: '~ 已经到底啦 ~', //无更多数据的提示
	}
    const orderStatus = ref<string>('')
	const list = ref<Array<any>>([]) // 茶室列表
    const keywords = ref<string>('') // 搜索关键词

    // tab
    const tab = ref<string>('list')
    const tabList = ref<Array<{title: string, num: number, name: string}>>([
        { title: '已上架', num: 10, name: 'list'},
        { title: '已下架', num: 11, name: 'delist' },
        // { title: '草稿箱', num: 0, name: 'draft' }
    ])

    onLoad((args) => {
    })

    onUnload(() => {
    })

    const Device = {
        /**
         * 开锁
         */
		handleOpenLock: () => {
			
		},

    }
</script>

<style lang="scss">
    page {
	    background-color: $cz-page-background;
    }
</style>
