<template>
  <window-size :showTitle="false" :offset="0">
    <div class="qrcode-card" @click="routeToCard">
      <div class="qr-text-area">
        <div>
          <span>
            {{ currentCard.name }}
          </span>
          <button @click.stop="showCardPicker = true">切换</button>
        </div>
        <div>ID:{{ currentCard.patientId }}</div>
      </div>
      <div class="qr-code-area">
        <div id="qrcode"></div>
      </div>
    </div>
    <van-popup v-model:show="showCardPicker" round position="bottom">
      <van-picker
        title="选择就诊人"
        :columns="cards"
        :columns-field-names="customFieldName"
        @cancel="showCardPicker = false"
        @confirm="onConfirm"
      />
    </van-popup>
    <van-cell-group title="我的">
      <van-cell icon="friends" title="我的就诊人" is-link to="/myPatientIdCards"></van-cell>
      <van-cell icon="star" title="我的收藏" is-link to="/myCollection"></van-cell>
      <van-cell icon="coupon" title="我的卡券" is-link to="/myCoupons"></van-cell>
    </van-cell-group>

    <van-cell-group title="记录">
      <van-cell
        icon="label"
        title="挂号记录"
        is-link
        :to="filterPath('/appiontmentRecords/', '/selectAppointmentRecordPatient')"
      ></van-cell>
      <van-cell
        icon="gold-coin"
        title="门诊缴费记录"
        is-link
        :to="filterPath('/mzFeePaymentRecords/', '/selectMzFeePaymentRecordPatient')"
      ></van-cell>
      <van-cell
        icon="balance-list"
        title="住院预交金记录"
        is-link
        :to="filterPath('/prepaidRecord/', '/selectZyYjjPatient')"
      ></van-cell
    ></van-cell-group>

    <van-cell-group title="管理">
      <van-cell
          icon="clock"
          title="挂号管理"
          is-link
          to="/selectTargetPatient"
      ></van-cell>
    </van-cell-group>
  </window-size>
</template>

<script setup>
import { computed, onMounted, ref, watchEffect } from 'vue'
import store from '@/store'
import { qrcanvas } from 'qrcanvas'
import router from '@/router'
import Cookies from 'js-cookie'

const cards = computed(() => {
  return store.state.patientCards
})

const filterPath = (singleCardPath, multipleCardsPath) => {
  return cards.value.length === 1 ? singleCardPath + cards.value[0].patientId : multipleCardsPath
}
const currentCard = ref({})

watchEffect(() => {
  if (currentCard.value.patientId) {
    document.getElementById('qrcode').innerHTML = ''
    const canvas = qrcanvas({
      data: currentCard.value.patientId,
      size: 64,
    })
    document.getElementById('qrcode').appendChild(canvas)
  }
})

const routeToCard = () => {
  router.push(`/patientCardInfo/${currentCard.value.patientId}`)
}
const showCardPicker = ref(false)
const customFieldName = {
  text: 'name',
}
const onConfirm = (val) => {
  Cookies.set('chosen-id', val.selectedOptions[0].patientId)
  currentCard.value = val.selectedOptions[0]
  showCardPicker.value = false
}

onMounted(() => {
  const chosenId = Cookies.get('chosen-id')
  for (let i = 0; i < cards.value.length; i++) {
    const card = cards.value[i]
    if (chosenId) {
      if (card.patientId === chosenId) {
        currentCard.value = card
        break
      }
    } else {
      if (card.isDefault === 1) {
        currentCard.value = card
        break
      }
    }
  }
})

</script>

<style scoped>
.qrcode-card {
  margin-top: 15px;
  width: 80%;
  margin-left: 10%;
  height: 100px;
  border-radius: 8px;
  margin-bottom: 16px;
  background: url('@/assets/id-qrcode-bg.png');
  display: flex;
}
.qr-text-area {
  width: 60%;
  margin-top: 20px;
  padding-left: 24px;
}
.qr-text-area > div > span {
  font-size: 26px !important;
}
.qr-text-area > div > button {
  width: 80px;
  height: 26px;
  margin-bottom: 8px;
  outline: none;
  margin-left: 16px;
  border-radius: 16px;
  border: 1px solid green;
  color: green;
  font-size: 14px;
}
.qr-code-area {
  width: 80px;
  height: 80px;
  margin-top: 10px;
  border: 1px solid green;
  border-top-left-radius: 12px;
  border-bottom-right-radius: 12px;
  box-shadow: 0 1px 12px 0 rgba(163, 247, 163);
}
.qr-code-area > div {
  margin: 8px 0 0 8px;
}
</style>
