<template>
  <el-card shadow="never">
    <template #header>
      <div class="card-header">
        <span>请上传您的身份证件（人像面、国徽面）</span>
      </div>
    </template>
    <div class="">
      <el-form
          ref="formRef"
          :model="ruleForm"
          :rules="rules"
          label-width="145px"
          label-position="left">
        <el-form-item label="姓名" prop="contactUser">
          <el-input v-model="ruleForm.contactUser" placeholder="请输入姓名" size="large"
                    style="width: 343px"></el-input>
        </el-form-item>
        <el-form-item label="身份证" prop="idCard">
          <el-input v-model="ruleForm.idCard" placeholder="请输入身份证号" size="large" style="width: 343px"></el-input>
        </el-form-item>

        <el-form-item label="身份证图片" required prop="idCardImage">
          <image-upload v-model="ruleForm.idCardBackImage" style="margin-right: 20px" :limit="1">
            <template #uploader-icon>
              <div style="text-align: center">
                <el-icon class="avatar-uploader-icon" size="32px">
                  <CirclePlusFilled/>
                </el-icon>
                <div style="padding: 0 10px;font-size: 12px;line-height: 1.5;color: inherit">
                  仅支JPG，PNG，GIF，大小小于2M，最多1张
                </div>
              </div>
            </template>
            <template #tip>
              <div style="text-align: center;font-size: 14px;color: #626566;">人像面</div>
            </template>
          </image-upload>
          <image-upload v-model="ruleForm.idCardFrontImage" :limit="1">
            <template #uploader-icon>
              <div style="text-align: center">
                <el-icon class="avatar-uploader-icon" size="32px">
                  <CirclePlusFilled/>
                </el-icon>
                <div style="padding: 0 10px;font-size: 12px;line-height: 1.5;color: inherit">
                  仅支JPG，PNG，GIF，大小小于2M，最多1张
                </div>
              </div>
            </template>
            <template #tip>
              <div style="text-align: center;font-size: 14px;color: #626566;">国徽面</div>
            </template>
          </image-upload>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</template>

<script setup>
import ImageUpload from '@/components/ImageUpload/index.vue'
import { ref, computed, defineExpose } from 'vue'

const formRef = ref()

const ruleForm = ref({
  contactUser: '',
  idCard: '',
  idCardImage: '1',
  idCardBackImage: '',
  idCardFrontImage: ''
})

function validateIdCardImage (rule, value, callback) {
  if (!ruleForm.value.idCardFrontImage || !ruleForm.value.idCardFrontImage) {
    callback(new Error('请上传身份证人像面和身份证国徽面'))
    return
  }
  callback()
}

const rules = computed(() => {
  return {
    contactUser: [
      {required: true, message: '请输入姓名', trigger: 'blur'}
    ],
    idCard: [
      {required: true, message: '请输入身份证号', trigger: 'blur'},
      {
        pattern: '/(^\\d{15}$)|(^\\d{18}$)|(^\\d{17}(\\d|X|x)$)/',
        message: '请输入正确的身份证号码',
        trigger: 'blur'
      }
    ],
    idCardImage: [{validator: validateIdCardImage, trigger: 'blur'}]
  }
})

defineExpose({formRef, ruleForm})

</script>

<style scoped lang="scss">
@import url('./base.scss');
</style>
