<template>
  <view>
    <view class="open_door_title"> 门禁 </view>
    <view class="access_control_equipment">
      <view class="item">
        <view class="header">
          <view class="icon">
            <up-icon name="lock-fill" size="25"></up-icon>
          </view>
          <view>
            <hs-button label="开门" @click="handleOpenDoor" size="sm" type="primary" />
          </view>
        </view>
        <view class="name"> 北大门 </view>
      </view>
      <view class="item">
        <view class="header">
          <view class="icon">
            <up-icon name="lock-fill" size="25"></up-icon>
          </view>
          <view>
            <hs-button label="开门" @click="handleOpenDoor" size="sm" type="primary" />
          </view>
        </view>
        <view class="name"> 3座1楼大堂 </view>
      </view>
      <view class="item">
        <view class="header">
          <view class="icon">
            <up-icon name="lock-fill" size="25"></up-icon>
          </view>
          <view>
            <hs-button @click="handleOpenDoor" label="开门" size="sm" type="primary" />
          </view>
        </view>
        <view class="name"> 3座负1楼 </view>
      </view>
    </view>
    <view class="open_door_title"> 门禁记录 </view>
    <view class="open_door_list">
      <up-steps direction="column" current="2" dot>
        <up-steps-item title="2025-02-03">
          <template #desc>
            <view class="open_door_list_content">
              <view class="open_door_list_header">
                <view>
                  <uni-icons type="circle" size="15" color="#2A7EFB"></uni-icons>
                  开门成功
                </view>
                <text> 11:29 </text>
              </view>
              <view class="name"> 3座负1楼 </view>
            </view>
          </template>
        </up-steps-item>

        <up-steps-item title="2025-02-03">
          <template #desc>
            <view class="open_door_list_content">
              <view class="open_door_list_header">
                <view>
                  <uni-icons type="circle" size="15" color="#2A7EFB"></uni-icons>
                  开门成功
                </view>
                <text> 10:39 </text>
              </view>
              <view class="name"> 北大门 </view>
            </view>
          </template>
        </up-steps-item>

        <up-steps-item title="2025-02-02">
          <template #desc>
            <view class="open_door_list_content">
              <view class="open_door_list_header">
                <view>
                  <uni-icons type="info" size="15" color="#f00"></uni-icons>
                  开门失败
                </view>
                <text> 10:19 </text>
              </view>
              <view class="name"> 3座负1楼 </view>
            </view>
          </template>
        </up-steps-item>
      </up-steps>
    </view>
  </view>
</template>

<script lang="ts" setup>
const handleOpenDoor = () => {
  uni.showLoading({
    title: '开门中...',
    mask: true
  })
  setTimeout(() => {
    uni.showToast({
      title: '未找到门锁！',
      icon: 'none'
    })
  }, 3000)
}
</script>

<style lang="scss">
@import './style.scss';
</style>
