<template>
  <view class="record record-detail">
    <view class="record-bg" :style="{ backgroundImage: `url(${baseUrl}/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 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
  } 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: '', // 访客人数

  })
  onLoad((options) => {
    id.value = options.id
    console.log(id.value)
    options.id && getDetail()
  })
  const getDetail = () => {
    reservationDetail({
      id: id.value,
    }).then((res) => {
      detail.value = res.data
      // 翻译星期
      detail.value.week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][Number(detail.value.week)]
    })
  }

  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>