<template>
  <view class="record record-detail">
    <view
      class="record-bg"
      :style="{
        backgroundImage: `url(${baseUrl}/farqbxzczytcami/images/bg-6.png)`,
      }"
    ></view>
    <view class="record-content">
      <view class="tips">请凭下方预约二维码现场签到进场</view>
      <view class="card detail">
        <view class="title">{{ detail.title }}</view>
        <view class="date">
          {{ detail.reservation_date }} {{ detail.week
          }}{{ detail.reservation_start_time }} -
          {{ detail.reservation_end_time }}
        </view>
        <view class="line"></view>
        <view class="info"> 预约人：{{ detail.realname }} </view>
        <view class="info"> 手机：{{ detail.telephone }} </view>
        <view class="info"> 访客人数：{{ detail.visitor_number }}人 </view>
        <view class="qrcode">
          <image :src="detail.qrcode" mode="widthFix" />
        </view>
      </view>
      <view
        v-if="detail.is_check == 0"
        class="buttons"
        @click="cancelReservation"
      >
        <fh-button type="plain" @click="cancelReservation">
          取消预约
        </fh-button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { baseUrl } from '@/reservation/config'
import { onLoad, onUnload } from '@dcloudio/uni-app'
import fhButton from '../components/fh-button.vue'
import { ref } from 'vue'
import { reservationDetail, reservationCancel } from '@/api/reservation'
defineOptions({
  name: 'record-detail',
})
// 获取参数
const id = ref(0)
const detail = ref({
  title: '', // 预约标题
  reservation_date: '', // 预约日期
  reservation_start_time: '', // 预约开始时间
  reservation_end_time: '', // 预约结束时间
  week: '', // 星期
  qrcode: '', // 预约二维码
  realname: '', // 预约人姓名
  telephone: '', // 预约人手机号
  visitor_number: '', // 访客人数
})
let yi = null
onLoad((options) => {
  id.value = options.id
  console.log(id.value)
  options.id && getDetail()
})
onUnload(() => {
  clearInterval(yi)
})
const getDetail = () => {
  reservationDetail({
    id: id.value,
  }).then((res) => {
    detail.value = res.data
    // 翻译星期
    detail.value.week = [
      '周日',
      '周一',
      '周二',
      '周三',
      '周四',
      '周五',
      '周六',
    ][Number(detail.value.week)]
    if (detail.value.is_check == 0) {
      lunxunGetDetail()
    } else {
    }
  })
}
const lunxunGetDetail = () => {
  yi = setInterval(function () {
    reservationDetail({
      id: id.value,
    }).then((res) => {
      if (res.data.is_check == 1) {
        detail.value.is_check = 1
        clearInterval(yi)
        yi = null
        // 跳转到成功页面
        uni.navigateTo({
          url: '/reservation/sign/index',
        })
      }
    })
  }, 1000)
}

const cancelReservation = () => {
  console.log('取消预约')
  reservationCancel({
    id: id.value,
  }).then((res) => {
    console.log(res)
    if (res.code == 0) {
      uni.showToast({
        title: '取消成功',
        icon: 'success',
      })
      uni.navigateBack()
    } else {
      uni.showToast({
        title: res.msg,
        icon: 'none',
      })
    }
  })
}
</script>

<style lang="less" scoped>
@import './index.less';
</style>
