<template>
  <window-size :showTitle="false">
    <div style="display: flex">
      <div>
        <van-image width="120" height="60" :src="logo"></van-image>
      </div>
      <div class="logo">学生体检信息录入</div>
    </div>
    <van-field v-model="student.name" required type="text" label="姓名" placeholder="请输入您的姓名" />
    <van-field v-model="student.idcard" required type="tel" label="身份证号" placeholder="请输入您的身份证号" />
    <van-field v-model="student.phone" required type="tel" label="电话" placeholder="请输入您的联系电话" />
    <van-field v-model="student.school" required type="text" label="学校" placeholder="请输入您在读的学校" />
    <van-field v-model="student.tclass" required type="text" label="班级" placeholder="请输入您所在的班级" />
    <van-field
      v-model="student.orderName"
      required
      label="套餐类型"
      readonly
      @click="showPickOrder = true"
      placeholder="请选择套餐类型"
    ></van-field>
    <van-popup v-model:show="showPickOrder" position="bottom" :style="{ height: '50%' }">
      <van-picker
        title="套餐类型"
        :columns="orderTypes"
        :columns-field-names="customFieldName"
        @cancel="showPickOrder = false"
        @confirm="confirmPickOrder"
      >
        <template #option="item"> {{ item.name }}（单价：￥{{ item.price }}） </template>
      </van-picker>
    </van-popup>
    <van-cell title="查看收款码" label="付款完成后点击下方保存按钮" center is-link @click="beforeShowQrcode"></van-cell>
    <div style="height: 8px"></div>
    <van-button type="primary" icon="certificate" block @click="saveTjInfo">保存</van-button>
    <van-dialog
      v-model:show="showQrcode"
      :show-cancel-button="false"
      :show-confirm-button="false"
      :close-on-click-overlay="true"
    >
      <van-image fit="contain" :src="wxPay" />
    </van-dialog>
  </window-size>
</template>

<script setup>
import logo from '@/assets/thyylogo.png'
import { reactive, ref } from 'vue'
import wxPay from '@/assets/isolations/wxpay-xh.png'
import { isValidIdcard, isValidPhone } from '@/utils/validate'
import { saveStudentInspection } from '@/api/isolations'
import { showToast } from 'vant'

const student = reactive({})
const showPickOrder = ref(false)
const orderTypes = [
  { code: 'XSTJ', name: '学生体检', price: 55, value: 'XSTJ' },
  { code: 'PDD', name: 'PDD', price: 25, value: 'PDD' },
]
const customFieldName = {
  code: 'code',
  text: 'name',
}
const confirmPickOrder = (val) => {
  student.orderCode = val.selectedOptions[0].code
  student.orderName = val.selectedOptions[0].name
  student.orderPrice = val.selectedOptions[0].price
  showPickOrder.value = false
}
const showQrcode = ref(false)

const validate = () => {
  if (!student.name) {
    return '请输入您的姓名'
  }
  if (!isValidIdcard(student.idcard)) {
    return '请输入正确的身份证号码'
  }
  if (!isValidPhone(student.phone)) {
    return '请输入正确的电话号码'
  }
  if (!student.school) {
    return '请输入您在读学校的名称'
  }
  if (!student.tclass) {
    return '请输入您所在的班级'
  }
  if (!student.orderCode) {
    return '请选择套餐类型'
  }
  return null
}

const beforeShowQrcode = () => {
  const message = validate()
  if (message) {
    showToast({
      message,
      position: 'top',
    })
  } else {
    showQrcode.value = true
  }
}

const saveTjInfo = () => {
  const message = validate()
  if (message) {
    showToast({
      message,
      position: 'top',
    })
  } else {
    saveStudentInspection(student).then((res) => {
      showToast({
        message: res,
        position: 'top'
      })
    })
  }
}
</script>
<style scoped>
.logo {
  color: #00525e;
  height: 60px;
  line-height: 60px;
  font-weight: bold;
  font-size: 18px;
}
</style>
