<template>
  <window-size>
    <van-empty v-if="showEmpty" van-empty description="暂无可以预约的新冠疫苗"></van-empty>
    <div v-else>
      <div v-for="item in covidVaccinates" :key="item.vaccinateCode">
        <van-cell
          center
          :title="item.vaccinateName"
          :label="item.vaccinateFactory"
          @click="toCovidVaccinateAppointment(item)"
        >
          <template #right-icon>
            <span v-html="hasSource(item.minLeftNum)"></span>
          </template>
        </van-cell>
      </div>
    </div>
  </window-size>
</template>

<script>
import router from '../../../router'
import { computed, onMounted, ref } from 'vue'
import { selectVaccinates } from '../../../api/covid-vaccinate'
import { Dialog, Toast } from 'vant'
export default {
  setup() {
    let patientId = router.currentRoute.value.params.patientId
    const covidVaccinates = ref([])
    const showEmpty = computed(() => {
      return covidVaccinates.value.length === 0
    })
    const hasSource = (num) => {
      return num > 0 ? '<span style="color: green">余' + num + '</span>' : '<span style="color: red">无</span>'
    }
    const toCovidVaccinateAppointment = (item) => {
      if (item.minLeftNum < 1) {
        Toast({
          message: '该疫苗已无库存，暂时无法预约，敬请谅解。',
          position: 'top',
          duration: 3000,
        })
        return
      }
      Dialog.confirm({
        title: '温馨提示',
        message: item.bookTip,
        messageAlign: 'left',
        confirmButtonText: '继续预约',
        cancelButtonText: '重选疫苗',
      })
        .then(() => {
          router.push({
            name: 'excuteAppointment',
            params: {
              patientId: patientId,
              vaccinateCode: item.vaccinateCode,
              vaccinateName: item.vaccinateName,
              vaccinateFactory: item.vaccinateFactory,
            },
          })
        })
        .catch(() => {})
    }

    onMounted(() => {
      if (!patientId) {
        patientId = null
      }
      selectVaccinates().then((res) => {
        covidVaccinates.value = res
      })
    })

    return {
      covidVaccinates,
      showEmpty,
      hasSource,
      toCovidVaccinateAppointment,
    }
  },
}
</script>