<template>
  <!-- 页面主容器 -->
  <view class="door-open-page">
	  <view class="status_bar" :style="{ height: statusBarHeight + 'px' }"></view>
    <!-- 顶部标题栏 -->
    <view class="top-bar">
		  <uni-nav-bar left-icon="left"  title="远程开门" backgroundColor ="none" :border="false" @clickLeft="narBack" />
    </view>
	<view class="top-img">
		<image src="https://wuyeadmin.bugtc.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>

    <!-- 确认开门按钮 -->
    <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 statusBarHeight = ref(uni.getSystemInfoSync().statusBarHeight || 0)

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

// 选择门的方法
const selectDoor = (id) => {
  selectedDoor.value = id
  showSuccess.value = false // 选择新门时隐藏成功提示
}
// 返回
const narBack = () =>{
	if(uni.getStorageSync('sourcePage') === "index"){
		uni.switchTab({
			url:"/pages/index/index"
		})
	}else if(uni.getStorageSync('sourcePage') === "serviceIndex"){
		uni.switchTab({
			url:"/pages/serviceIndex/serviceIndex"
		})
	}
	uni.removeStorageSync('sourcePage')
	
}
// 查询门禁列表
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:"error"
			})
		}
		
	}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 {
  background: linear-gradient(180deg, #E2F0FF, #F6FAFF);
  min-height: 100vh;
  padding: 30rpx 40rpx;
  box-sizing: border-box;
}
  .status_bar {
	/* height: var(--status-bar-height); */
	width: 100%;
	flex-shrink: 0;
 }
/* 顶部标题 */
.top-bar {
  text-align: center;
  margin-bottom: 20rpx;
}
.title-text {
  font-size: 48rpx;
  color: #ffffff;
  font-weight: bold;
}

.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 {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  background-color: #2F77FD;
  color: #fff;
  font-size: 28rpx;
  border-radius: 20rpx;
  border: none;
}
.confirm-btn::after {
  border: none; /* 去除uni-app默认按钮边框 */
}
</style>