<template>
  <window-size>
    <select-card to="patientCardInfo" v-if="!showEmpty"></select-card>
    <van-empty :image="empty" v-if="showEmpty" description="您还没有添加就诊人">
      <van-button type="primary" block @click="showCreatedCardMethod = true"> 添加就诊人 </van-button>
    </van-empty>
    <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 empty from '../../../assets/empty.png'
import { computed, ref } from 'vue'
export default {
  name: 'MyPatientIdCards',
  setup() {
    const showEmpty = computed(() => {
      return store.state.patientCards.length === 0
    })
    const showCreatedCardMethod = ref(false)
    return {
      empty,
      showEmpty,
      showCreatedCardMethod,
    }
  },
}
</script>
