<template>
  <window-size>
    <van-cell title="医生姓名" :value="appointment.doctorName" />
    <van-cell title="医生号别" :value="appointment.doctorTitle" />
    <van-cell title="就诊科室" :value="appointment.deptName" />
    <van-cell title="就诊时段">
      <template #default>
        <div style="color: orangered">
          {{ appointment.date }}&nbsp;&nbsp;{{ appointment.week }}&nbsp;&nbsp;{{ appointment.ampm }}
        </div>
      </template>
    </van-cell>
    <div style="height: 5px"></div>
    <van-cell title="挂号金额">
      <template #default>
        <div style="color: orangered">￥{{ appointment.fee }}</div>
      </template>
    </van-cell>
    <div style="height: 5px"></div>
    <van-radio-group v-model="appointment.patientId">
      <van-cell-group>
        <div v-for="item in patientCards" :key="item.patientId">
          <van-cell center icon="user-o" :label="item.patientId" clickable @click="changePatient(item.patientId)">
            <template #title>
              <span class="custom-title">{{ item.name }}</span>
              &nbsp;
              <van-tag type="primary" plain v-if="item.isDefault === 1">默认</van-tag>
            </template>
            <template #right-icon>
              <van-radio :name="item.patientId" />
            </template>
          </van-cell>
        </div>
      </van-cell-group>
    </van-radio-group>
    <van-cell
      v-if="showAddCard"
      icon="add-o"
      title="添加就诊人"
      :value="addCardText"
      is-link
      @click="showCreatedCardMethod = true"
    ></van-cell>
    <div style="height: 10px"></div>
    <van-button type="primary" block @click="confirmAppointment" :disabled="disableGhBtn">确认挂号</van-button>
    <van-dialog
      v-model:show="showCreatedCardMethod"
      title="请选择绑定方式"
      :show-confirm-button="false"
      show-cancel-button
    >
      <div style="padding: 20px">
        <van-button type="primary" block to="/bindPatientCard">绑定就诊卡</van-button>
        <div style="height: 10px"></div>
        <van-button type="primary" plain block to="/createPatientCard">新建就诊卡</van-button>
      </div>
    </van-dialog>
  </window-size>
</template>

<script>
import store from '../../../store'
import { computed, onMounted, ref, watchEffect } from 'vue'
import Cookies from 'js-cookie'
import { getGhFee, hasValidCovidAssessment } from '../../../api/appointment'
import router from '../../../router'
import { Toast } from 'vant'
export default {
  name: 'AppointConfirm',
  setup() {
    const showCreatedCardMethod = ref(false)
    const appointment = store.state.appointmentInfo
    const patientCards = computed(() => {
      return store.state.patientCards
    })
    watchEffect(() => {
      patientCards.value.forEach((item) => {
        if (item.isDefault === 1) {
          appointment.patientId = item.patientId
        }
      })
    })
    const showAddCard = computed(() => {
      return patientCards.value.length < 5
    })
    const addCardText = computed(() => {
      return '还可添加' + (5 - patientCards.value.length) + '人'
    })
    const changePatient = (patientId) => {
      appointment.patientId = patientId
      fetchGhFee()
    }
    const confirmAppointment = () => {
      if (Cookies.get('appointmentDeptCode') !== '1260000' && Cookies.get('appointmentDeptCode') !== '1700001') {
        hasValidCovidAssessment(appointment.patientId, Cookies.get('appointmentDeptCode')).then((res) => {
          if (res === 'no valid assessment') {
            router.push('/assessments/covid/' + appointment.patientId)
          } else {
            toPayPage()
          }
        })
      } else {
        toPayPage()
      }
    }
    const toPayPage = () => {
      patientCards.value.forEach((item) => {
        if (item.patientId === appointment.patientId) {
          appointment.patientName = item.name
        }
      })
      store.commit('SET_APPOINTMENTINFO', appointment)
      router.push('/payAppointmentFee')
    }
    const disableGhBtn = ref(true)

    const fetchGhFee = () => {
      getGhFee(appointment)
        .then((res) => {
          appointment.fee = res.fee
          disableGhBtn.value = false
          if (res.message) {
            Toast({
              message: res.message,
              position: 'top',
              duration: 3000,
            })
          }
        })
        .catch(() => {
          appointment.fee = '获取失败'
          disableGhBtn.value = true
        })
    }

    onMounted(() => {
      fetchGhFee()
    })
    return {
      showCreatedCardMethod,
      appointment,
      patientCards,
      showAddCard,
      addCardText,
      confirmAppointment,
      disableGhBtn,
      changePatient,
    }
  },
}
</script>