<template>
  <view :class="useModel?.listData?.value?.length ? 'success_page' : 'close_page'">
    <view class="pass_page_content">
      <view class="pass_hader_img" v-if="useModel?.listData?.value?.length">
        <image
          src="https://pay-test-1369486729.cos.ap-guangzhou.myqcloud.com/uploads/cs-test/01KFANJCYCPCCB68ME26Q8HR1B.png"
          mode="widthFix"
        />
      </view>

      <view :class="useModel?.listData?.value?.length ? 'pass_page' : 'pass_page close_pass_page'">
        <MySwitchSelectBtn v-if="useModel?.listData?.value?.length" />
        <template v-if="useModel?.listData?.value?.length">
          <view class="pass_header">
            <view class="pass_header_icon">
              <image
                src="https://pay-test-1369486729.cos.ap-guangzhou.myqcloud.com/uploads/cs-test/01KFANKB30VQ3DS3MFGCREMW9D.png"
                mode="widthFix"
              />

              <!-- <uni-icons type="arrow-up" color="#2A7EFB" size="32"></uni-icons> -->
            </view>
            <view class="label"> 正常通行 </view>
          </view>

          <view class="pass_address_label">
            {{ useModel?.currentHouse?.value?.full_name || '' }}
          </view>
          <template v-if="useModel?.currentHouse?.value?.type === 1">
            <view class="house_relation_time">
              <view class="house_relation_label">
                {{
                  HouseOccupantsHouseRelationEnum[
                    useModel?.currentHouse?.value
                      ?.house_relation as keyof typeof HouseOccupantsHouseRelationEnum
                  ]?.text
                }}
              </view>
              <view class="time_contents">
                {{ useModel?.showCurrentTime?.value }}
              </view>
            </view>
          </template>
          <template v-if="useModel?.currentHouse?.value?.type === 2">
            <view class="qr_code">
              <image :src="useModel?.qrCode?.value" mode="widthFix" />
            </view>
            <view class="qr_code_label"> 请出示二维码协助员工扫码 </view>
            <view class="user_qr_code">
              <image
                :src="
                  useModel?.currentHouse?.value?.renovation_workers?.url ||
                  'https://pay-test-1369486729.cos.ap-guangzhou.myqcloud.com/uploads/cs-test/01KFANM6DNBTBEATX9Y8KA9TH2.png'
                "
                mode="widthFix"
              />
              <view class="user_name">
                {{ useModel?.currentHouse?.value?.visitor_name || '' }}
              </view>
            </view>
            <view class="pass_footer">
              <view class="pass_footer_item">
                <view class="label"> 通行证生效时间 </view>
                <view>{{ getDate(useModel?.currentHouse?.value?.visit_start_time || '') }} </view>
              </view>
              <uni-icons type="right" color="#B6B6B6" size="20"></uni-icons>
              <view class="pass_footer_item">
                <view class="label"> 通行证失效时间 </view>
                <view> {{ getDate(useModel?.currentHouse?.value?.code_expired_at || '') }} </view>
              </view>
            </view>
          </template>
        </template>
        <template v-else>
          <view class="pass_header close_info">
            <uni-icons type="close" color="#CF1322" size="60"></uni-icons>
            <view class="label"> 禁止通行 </view>
            <view class="close_des"> 您暂无可使用的通行证 </view>
          </view>
        </template>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { onLoad, onUnload } from '@dcloudio/uni-app'
import MySwitchSelectBtn from './components/SwitchSelectBtn.vue'
import { getDate } from '@/common/libraries/day'
import method from './method'
import useModel from './model'
import { HouseOccupantsHouseRelationEnum, VisitReasonEnum } from '@/gen/Enums'
onLoad(() => {
  method?.getHouseList()
  method?.getShowCurrentTime()
})

onUnload(() => {
  clearTimeout(useModel?.timeoutObj?.value)
})
</script>
<style lang="scss">
@import './style.scss';
</style>
