<template>
  <!-- 页面主容器 -->
  <view class="door-open-page">
    <view class="page-content">
      <view class="top-img">
        <image src="https://wuye.ckdzkj.com/images/openDoor/remoteOpen.png" mode="" style="width: 100%;height: 100%;"></image>
      </view>

      <!-- 提示文案 -->
      <view class="tips-text">
        远程开门
        <text class="tips-desc">请选择要开的门并保持距离在10米以内，单次仅开一门</text>
      </view>

      <!-- 开门成功提示（默认隐藏） -->
      <view v-if="showSuccess" class="success-toast">开门成功</view>

      <!-- 开门授权区域 -->
      <view class="auth-container">
        <view class="auth-title">开门授权</view>
        <!-- 网格布局：2行2列 -->
        <view class="grid-container">
          <!-- 每个门选项 -->
          <view
            v-for="(item, index) in doorList"
            :key="index"
            :class="['door-item', { active: selectedDoor === item.id }]"
            @click="selectDoor(item.id)"
          >
            <!-- 图标占位 -->
            <view class="door-icon">
              <image class="icon-text" :src="selectedDoor === item.id ? item.iconActive:item.iconText"></image>
            </view>
            <!-- 门名称 -->
            <text class="door-name" :class="{active :selectedDoor === item.id}">{{ item.deviceName }}</text>
          </view>
        </view>
        <!-- 空状态 -->
        <view v-if="doorList.length === 0" class="empty-state">
          <uni-icons type="info" size="30" color="#ccc"></uni-icons>
          <text class="empty-text">暂无可用门禁</text>
        </view>
      </view>
    </view>

    <!-- 确认开门按钮 -->
    <button class="confirm-btn" @click="openDoorClick" :disabled="selectedDoor === -1">确认开门</button>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import {onLoad} from '@dcloudio/uni-app'
import {getAccessDevices,getAccessOpen} from '../api/api.js'

// 响应式数据：选中的门索引、开门成功提示
const selectedDoor = ref(-1) // -1表示未选中
const showSuccess = ref(false)

// 门列表数据
const doorList = ref([])

// 选择门的方法
const selectDoor = (id) => {
  selectedDoor.value = id
  showSuccess.value = false // 选择新门时隐藏成功提示
}
// 查询门禁列表
const getAccessControl = async () =>{

  try{
    const res = await getAccessDevices()
    if(res.code === 200){
      if(res.data){
        doorList.value = res.data || []
      }else{
        doorList.value = []
      }
    }else{
      doorList.value = []
      uni.showToast({
        title:'门禁查询失败',
        icon:"none"
      })
    }

  }catch(err){
    doorList.value = []
    uni.showToast({
      title:err.msg || '查询失败',
      icon:"none"
    })
  }

}


// 确认开门方法
const openDoorClick = () => {
  // 校验：未选择门时提示
  // if (selectedDoor.value === -1) {
  //   uni.showToast({
  //     title: '请先选择要开的门',
  //     icon: 'none'
  //   })
  //   return
  // }
  uni.showToast({
    title: '正在对接硬件中...',
    icon: 'none'
  })
  // getAccessOpenData()
}
//  开门接口
const getAccessOpenData = async () =>{
  uni.showLoading({
    title: '开门中...',
    mask: true
  })
  try{
    let params = {deviceId:selectedDoor.value}
    const res = await getAccessOpen(params)
    uni.hideLoading()
    if(res.code === 200){
      uni.showToast({
        title:'开门成功',
        icon:'success'
      })
    }else{
      uni.showToast({
        title:'开门失败',
        icon:"error"
      })
    }
  }catch(err){
    uni.hideLoading()
    uni.showToast({
      title: err.msg || '开门失败',
      icon:"none"
    })
  }
}

onLoad(() =>{
  getAccessControl()
})
</script>

<style scoped>
/* 页面全局样式 */
.door-open-page {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
  background: linear-gradient(180deg, #E2F0FF, #F6FAFF);
  box-sizing: border-box;
}

.page-content {
  flex: 1;
  height: 0;
  overflow-y: auto;
  padding: 30rpx 40rpx 160rpx;
  box-sizing: border-box;
}

.top-img{
  width: 460rpx;
  height: 290rpx;
  float: right;
}

/* 提示文案 */
.tips-text {
  color: #000;
  margin-bottom: 30rpx;
  font-size: 68rpx;
  line-height: 1.5;
  font-weight: 700;
  font-style: italic;
  clear: both;
  position: relative;
  top: -86px;
  left: 0;
}
.tips-desc {
  display: block;
  font-size: 24rpx;
  opacity: 0.9;
  color: #666666;
}

/* 开门成功提示 */
.success-toast {
  background: rgba(0, 0, 0, 0.7);
  color: #ffffff;
  padding: 10rpx 20rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
  position: absolute;
  top: 200rpx;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
}

/* 开门授权容器 */
.auth-container {
  background: #ffffff;
  border-radius: 20rpx;
  padding: 40rpx 42rpx;
  margin-bottom: 60rpx;
  position: relative;
  top: -86px;
  left: 0;
}
.auth-title {
  text-align: center;
  font-size: 32rpx;
  font-weight: 500;
  color: #333333;
  padding-bottom: 20rpx;
  /* border-bottom: 1px solid #e5e5e5; */
  margin-bottom: 30rpx;
}

/* 网格布局 */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30rpx;
}

/* 门选项样式 */
.door-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30rpx 20rpx;
  border-radius: 10rpx;
  border: 2px solid #2F77FD;
  background-color: #F6F9FE;
  transition: all 0.3s;
}
/* 选中状态 */
.door-item.active {
  /* border-color: #2c6bc7; */
  background-color: #2F77FD;
  color: #ffffff;
}

/* 门图标 */
.door-icon {
  width: 126rpx;
  height: 114rpx;
  /* background-color: #f5f5f5; */
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 44rpx;
}
.icon-text {
  /* font-size: 40rpx; */
  width: 100%;
  height: 100%;
}

/* 门名称 */
.door-name {
  font-size: 26rpx;
  color: #333333;
}
.door-name.active {
  color: #ffffff;
}
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-top: 20rpx;
  margin-bottom: 10rpx;
}

/* 确认按钮 */
.confirm-btn {
  position: fixed;
  left: 40rpx;
  right: 40rpx;
  bottom: 20rpx;
  bottom: calc(20rpx + constant(safe-area-inset-bottom));
  bottom: calc(20rpx + env(safe-area-inset-bottom));
  height: 88rpx;
  line-height: 88rpx;
  background-color: #2F77FD;
  color: #fff;
  font-size: 28rpx;
  border-radius: 20rpx;
  border: none;
  z-index: 10;
}
.confirm-btn::after {
  border: none; /* 去除uni-app默认按钮边框 */
}
</style>
