<template>
  <window-size>
    <div id="paddingRightZero">
      <van-cell title="关系">
        <template #right-icon>
          <van-radio-group v-model="card.relation" direction="horizontal">
            <van-radio :name="1">本人</van-radio>
            <van-radio :name="2">他人</van-radio>
          </van-radio-group>
        </template>
      </van-cell>
    </div>
    <div style="height: 5px"></div>
    <van-field v-model="card.name" label="姓名" type="text" placeholder="请输入姓名"/>
    <div style="height: 5px"></div>
    <van-cell>
      <span style="font-size: 13px; color: rgb(128, 128, 128)">绑定方式：</span>
      <div style="height: 5px"></div>
      <van-radio-group v-model="card.cardType" direction="horizontal">
        <van-radio :name="0">门诊号</van-radio>
        <van-radio :name="1">就诊卡</van-radio>
        <van-radio :name="2">身份证</van-radio>
      </van-radio-group>
    </van-cell>
    <van-field v-model="card.cardNo" :placeholder="cardNoHint"/>
    <div style="height: 5px"></div>
    <van-field v-model="card.phone" type="tel" placeholder="请输入手机号"/>
    <div style="height: 5px"></div>
    <div style="margin-bottom: 5px" v-if="correctIdCard">
      <span style="color: red; font-size: 13px; padding: 8px 0 0 8px">* {{ correctIdCardHint }}</span>
      <van-field v-model="card.socialNo" placeholder="请输入身份证号"/>
    </div>
    <van-field
        readonly
        clickable
        name="area"
        v-model="card.address"
        label="住址地区"
        placeholder="点击选择省市区"
        @click="showArea = true"
    />
    <van-popup v-model:show="showArea" position="bottom">
      <van-area :area-list="allArea" value="430105" @confirm="onConfirmArea" @cancel="showArea = false"/>
    </van-popup>
    <van-field v-model="card.street" label="街道、小区" type="text" placeholder="请输入住址所在街道、小区"/>
    <div style="height: 10px"></div>
    <van-button type="primary" block icon="checked" @click="beforeBindCard">立即绑定</van-button>
  </window-size>
  <van-dialog v-model:show="multipleCards.show" title="请选择一张就诊卡" @confirm="bindSelectCard">
    <van-radio-group v-model="multipleCards.cardNo">
      <div style="height: 30px"></div>
      <div id="smallRadio">
        <van-row>
          <van-col span="6">
            <div style="width: 100%; text-align: center">姓名</div>
          </van-col>
          <van-col span="6">
            <div style="width: 100%; text-align: center">就诊卡号</div>
          </van-col>
          <van-col span="8">
            <div style="width: 100%; text-align: center">上次就诊</div>
          </van-col>
          <van-col span="4">选择</van-col>
        </van-row>
        <div style="height: 30px"></div>
        <div v-for="item in multipleCards.cards" :key="item.patientId">
          <van-row @click="multipleCards.cardNo = item.patientId">
            <van-col span="6"
            >
              <div style="width: 100%; text-align: center">
                {{ item.name }}
              </div>
            </van-col
            >
            <van-col span="6"
            >
              <div style="width: 100%; text-align: center">
                {{ item.patientId }}
              </div>
            </van-col
            >
            <van-col span="8"
            >
              <div style="width: 100%; text-align: center">
                {{ item.lvDate }}
              </div>
            </van-col
            >
            <van-col span="4">
              <van-radio :name="item.patientId"/>
            </van-col>
          </van-row>
          <div style="height: 20px"></div>
        </div>
      </div>
    </van-radio-group>
  </van-dialog>
</template>

<script setup>
import store from '@/store'
import {computed, onMounted, reactive, ref} from 'vue'
import allArea from '@/utils/area'
import {bindPatientId, hasValidIdCard} from '@/api/patient-id-cards'
import {validateBindPatientId} from '@/utils/validate'
import {showDialog, showToast} from 'vant'
import router from '@/router'

const card = reactive({
  relation: 1,
  name: '',
  cardType: 0,
  cardNo: '',
  phone: '',
  province: '',
  city: '',
  district: '',
  street: '',
  socialNo: '',
})
const cardNoHint = computed(() => {
  const type = card.cardType
  if (type === 0) {
    return '请输入门诊ID号'
  } else if (type === 1) {
    return '请输入就诊卡号码'
  } else {
    return '请输入身份证号码'
  }
})
const showArea = ref(false)
const onConfirmArea = (values) => {
  card.province = values[0].code
  card.city = values[1].code
  card.district = values[2].code
  card.address = values
      .filter((item) => !!item)
      .map((item) => item.name)
      .join('/')
  showArea.value = false
}
const multipleCards = reactive({
  show: false,
  cards: [],
  cardNo: '',
})
const correctIdCard = ref(false)
const correctIdCardHint = ref('您在我院存留的身份证不合法，请完善！')
const beforeBindCard = () => {
  const validate = validateBindPatientId(card)
  if (validate !== 'success') {
    showDialog({
      title: '提示',
      message: validate,
    })
    return
  }
  if (card.cardType === 2) {
    bindCard()
  } else {
    hasValidIdCard(card).then(() => {
      bindCard()
    }).catch((e) => {
      correctIdCardHint.value = e.toString().replace('Error:', '')
      correctIdCard.value = true
    })
  }
}

const bindCard = () => {
  bindPatientId(card).then((res) => {
    if (res.code === 0) {
      showToast({
        message: '绑定成功',
        position: 'top'
      })
      store.dispatch({
        type: 'storePatientCards',
        cards: res.cards
      }).then(() => {
        router.go(-1)
      })
    } else {
      multipleCards.cards = res.cards
      multipleCards.show = true
    }
  })
}

const bindSelectCard = () => {
  multipleCards.cards.forEach((item) => {
    if (item.patientId === multipleCards.cardNo) {
      card.name = item.name
      card.cardType = 1
      card.cardNo = item.patientId
      bindPatientId(card).then((res) => {
        showToast({
          message: '绑定成功',
          position: 'top'
        })
        store.dispatch({
          type: 'storePatientCards',
          cards: res.cards
        }).then(() => {
          router.go(-1)
        })
      })
    }
  })
}
onMounted(() => {
  if (store.state.patientCards.length > 0) {
    card.relation = 2
  }
})
</script>

<style>
#paddingRightZero .van-cell {
  padding-right: 0;
}

#smallRadio {
  font-size: 13px;
  color: rgb(128, 128, 128);
}

#smallRadio .van-radio__icon {
  font-size: 15px;
}
</style>
