<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
      to="/addElectronicHealthCard"
    ></van-cell>
  </window-size>
</template>

<script>
import store from '../../../store'
import { computed, ref } from 'vue'
import BindCardMethod from "../../../components/bind-card-method/index.vue";
export default {
  components: {
    BindCardMethod
  },
  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 toVaccinate = (patientId) => {
      window.open('http://www.hnthyy.cn:8080/covidVaccinate/' + patientId, '_self')
    }
    return {
      cards,
      showAddCard,
      addCardText,
      toVaccinate,
    }
  },
}
</script>
