<template>
  <window-size>
    <div>
      <van-field v-model="userinfo.name" type="text" label="姓名" placeholder="请填写真实姓名"></van-field>

      <van-field v-model="userinfo.idNumber" type="text" label="身份证" placeholder="请输入身份证号">
        <template #button>
          <van-uploader :after-read="resizeIdCard" >
            <div style="font-size: 23px; color: #409eff">
              <van-icon name="photograph" />
            </div>
          </van-uploader>
        </template>
      </van-field>

      <van-field v-model="userinfo.relationLabel" type="text" label="关系"
                 placeholder="选择为谁申领" is-link readonly @click="showRelationPicker = true"></van-field>
      <van-popup v-model:show="showRelationPicker" round position="bottom">
        <van-picker
            :columns="relationColumns"
            @cancel="showRelationPicker = false"
            @confirm="onConfirmSelectRelation"
        />
      </van-popup>

      <van-field v-model="userinfo.phone1" type="text" label="手机号码" placeholder="请输入手机号码"></van-field>
    </div>
    <div style="margin-top: 20px">
      <van-button block type="primary" @click="applyHealthCard">申领电子健康卡</van-button>
    </div>
  </window-size>
</template>

<script setup>
import {useRouter} from "vue-router";
import {onMounted, reactive, ref} from "vue";
import {register} from '@/api/electronic-health-card'
import {analyseIdCard} from "@/api/electronic-health-card";
import {resize} from "@/utils/image";
import {showToast} from "vant";
import {getPatientIdByOpenid} from "@/api/patient-id-cards";
import store from "@/store";

const router = useRouter()

const userinfo = reactive({
  wechatCode: '',
  name: '',
  nation: '',
  idNumber: '',
  relation: '',
  address: '',
  relationLabel: '',
  phone1: ''
})

const showRelationPicker = ref(false)
const relationColumns = [
  { text: '本人', value: '0' },
  { text: '父母', value: '1' },
  { text: '子女', value: '2' },
  { text: '夫妻', value: '3' },
  { text: '亲属', value: '4' },
  { text: '朋友', value: '5' },
  { text: '其他', value: '6' },
]
const onConfirmSelectRelation = (val) => {
  showRelationPicker.value = false
  userinfo.relation = val.selectedOptions[0].value
  userinfo.relationLabel = val.selectedOptions[0].text
}

const applyHealthCard = () => {
  register(userinfo).then(res => {
    showToast({
      message: '申领成功。',
      position: 'top'
    })
    getPatientIdByOpenid().then((cards) => {
      store.dispatch({
        type: 'storePatientCards',
        cards,
      }).then(() => {
        router.push('/electronicHealthCardHome')
      })
    })
  })
}

const resizeIdCard = (image) => {
  if (image.file.size / 1024 < 500) {
    uploadIdCard(image.content)
  } else {
    resize(image.content, uploadIdCard)
  }
}
const uploadIdCard = (base64) => {
  analyseIdCard({ content: base64 }).then((res) => {
    userinfo.name = res.name
    userinfo.nation = res.nation
    userinfo.gender = res.gender
    userinfo.idNumber = res.id
    userinfo.address = res.address
  })
}

onMounted(() => {
  const pathSplit = router.currentRoute.value.fullPath.split('?')
  if (pathSplit.length > 1) {
    const rawParams = pathSplit[1].split('&')
    rawParams.forEach(param => {
      const paramKeyVal = param.split('=')
      if (paramKeyVal[0] === 'wechatCode') {
        userinfo.wechatCode = paramKeyVal[1]
      }
    })
  }
})
</script>