<template>
  <window-size>
    <div v-for="item in cards" :key="item.patientId">
      <van-cell icon="user-o" :label="item.patientId" is-link @click="toVaccinate(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>
      </van-cell>
    </div>
    <div style="height: 5px"></div>
    <van-cell
      v-if="showAddCard"
      icon="add"
      title="添加就诊人"
      :label="addCardText"
      is-link
      @click="showCreatedCardMethod = true"
    ></van-cell>
    <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, ref } from 'vue'
export default {
  setup() {
    const cards = computed(() => {
      return store.state.patientCards
    })
    const showAddCard = computed(() => {
      return cards.value.length < 5
    })
    const addCardText = computed(() => {
      return '还可添加' + (5 - cards.value.length) + '人'
    })
    const showCreatedCardMethod = ref(false)
    const toVaccinate = (patientId) => {
      window.open('http://www.hnthyy.cn/covidVaccinate/' + patientId, '_self')
    }
    return {
      cards,
      showAddCard,
      addCardText,
      showCreatedCardMethod,
      toVaccinate,
    }
  },
}
</script>
