<template>
  <window-size>
    <van-notice-bar
      left-icon="warning-o"
      text="对不起，您本条医技预约申请未成功，您可以选择其他时间进行预约或者退款。"
    />
    <van-cell title="预约人" :value="rejectedReq.patientName"></van-cell>
    <van-cell title="预约项目" :value="rejectedReq.orderName"></van-cell>
    <van-cell title="执行科室" :value="rejectedReq.execUnitName"></van-cell>
    <van-cell title="预约开始日期" :value="rejectedReq.recordDate"></van-cell>
    <van-cell title="预约开始时间" :value="rejectedReq.beginTime"></van-cell>
    <van-cell title="预约结束时间" :value="rejectedReq.endTime"></van-cell>
    <div style="height: 8px"></div>
    <van-button type="success" plain block icon="todo-list" @click="selectOtherTime">选择其他时间预约</van-button>
    <div style="height: 8px"></div>
    <van-button type="primary" plain block icon="after-sale" @click="doRefund">我要退款</van-button>
    <van-dialog v-model:show="showSelectTime" title="选择预约时间" show-cancel-button @confirm="confirmChangeTime">
      <div style="height: 260px; overflow-y: auto">
        <van-radio-group v-model="checked">
          <van-cell-group>
            <van-cell
              v-for="item in timeSources"
              :key="item.id"
              :title="item.recordDate"
              :value="item.beginTime + ' ~ ' + item.endTime"
              clickable
              @click="checked = item"
            >
              <template #right-icon> &nbsp;&nbsp;&nbsp;&nbsp;<van-radio :name="item" /> </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </div>
    </van-dialog>
  </window-size>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import router from '@/router'
import { applyRefund, changeYjReqTime, getOtherTimeForRejectedReq, getRejectedYjReq } from '@/api/bookable'
import { showDialog, showToast } from 'vant'

const reqNo = router.currentRoute.value.params.reqNo
const rejectedReq = ref({})
const showSelectTime = ref(false)
const timeSources = ref([])
const selectOtherTime = () => {
  getOtherTimeForRejectedReq(rejectedReq.value.execDept).then((res) => {
    timeSources.value = res
    showSelectTime.value = true
  })
}
const checked = ref(null)
const confirmChangeTime = () => {
  const param = {
    reqNo: reqNo,
    id: checked.value.id,
    recordDate: checked.value.recordDate,
    beginTime: checked.value.beginTime,
    endTime: checked.value.endTime,
  }
  changeYjReqTime(param).then((res) => {
    showToast({
      message: res,
      position: 'top'
    })
  })
}
const doRefund = () => {
  applyRefund(reqNo).then((res) => {
    showDialog({
      title: '温馨提示',
      message: res,
    }).then(() => {
      router.push('/hospitalService')
    })
  })
}
onMounted(() => {
  if (reqNo) {
    getRejectedYjReq(reqNo).then((res) => {
      rejectedReq.value = res
    })
  }
})
</script>