<template>
  <div v-for="item in cards" :key="item.patientId">
    <van-cell
        icon="user-o"
        :label="item.patientId"
        is-link
        :to="'/' + to + '/' + 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>
</template>

<script setup>
import store from '@/store'
import { computed } from 'vue'

const props = defineProps({
  to: {
    type: String,
    required: true,
  }
})

const cards = computed(() => {
  return store.state.patientCards
})
const showAddCard = computed(() => {
  return cards.value.length < 5
})
const addCardText = computed(() => {
  return '还可添加' + (5 - cards.value.length) + '人'
})
</script>
