<template>
  <!-- 页面主容器 -->
  <view class="door-open-page">
	  <view class="status_bar"></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="/static/一键开门/远程开门.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 === index }]"
          @click="selectDoor(index)"
        >
          <!-- 图标占位（可替换为真实图标/图片） -->
          <view class="door-icon">
            <image class="icon-text" :src="selectedDoor === index ? item.iconActive:item.iconText"></image>
          </view>
          <!-- 门名称 -->
          <text class="door-name">{{ item.name }}</text>
        </view>
      </view>
    </view>

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

<script setup>
import { ref } from 'vue'

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

// 门列表数据（和设计图一致）
const doorList = ref([
  { iconText: '/static/一键开门/西入门.png',iconActive:"/static/一键开门/西入门-白.png", name: '西入门闸机' },
  { iconText: '/static/一键开门/东入门.png',iconActive:"/static/一键开门/东入门-白.png", name: '东入门闸机' },
  { iconText: '/static/一键开门/单元门.png',iconActive:"/static/一键开门/单元门-白.png", name: '1号楼1单元门' },
  { iconText: '/static/一键开门/单元门.png',iconActive:"/static/一键开门/单元门-白.png", name: '1号楼2单元门' }
])

// 选择门的方法
const selectDoor = (index) => {
  selectedDoor.value = index
  showSuccess.value = false // 选择新门时隐藏成功提示
}
// 返回
const narBack = () =>{
	// uni.navigateBack({
	// 	delta: 1
	// })
	uni.switchTab({
		url:"/pages/index/index"
	})
}
// 确认开门方法
const openDoor = () => {
  // 校验：未选择门时提示
  // if (selectedDoor.value === -1) {
  //   uni.showToast({
  //     title: '请先选择要开的门',
  //     icon: 'none'
  //   })
  //   return
  // }

  // 模拟开门接口请求（实际项目替换为真实接口）
  setTimeout(() => {
    showSuccess.value = true
    // 可选：添加成功提示后自动隐藏
    // setTimeout(() => showSuccess.value = false, 2000)
  }, 500)
}
</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: 32px;
	width: 100%;
 }
/* 顶部标题 */
.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: 30rpx 20rpx;
  margin-bottom: 60rpx;
  position: relative;
  top: -86px;
  left: 0;
}
.auth-title {
  text-align: center;
  font-size: 32rpx;
  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: 80rpx;
  height: 80rpx;
  /* background-color: #f5f5f5; */
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15rpx;
}
.icon-text {
  /* font-size: 40rpx; */
  width: 100%;
  height: 100%;
}

/* 门名称 */
.door-name {
  font-size: 26rpx;
  color: #333333;
}

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