<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="contactPhone">
          <el-input v-model.number="ruleForm.contactPhone" placeholder="请输入手机号" size="large"
                    style="width: 343px"></el-input>
        </el-form-item>
        <el-form-item label="承诺书模板">
          <el-button link type="primary" @click="openPage">下载模板</el-button>
        </el-form-item>

        <el-form-item label="承诺书上传" prop="wordUrl">
          <image-upload v-model="ruleForm.wordUrl" :limit="1" :is-show-tip="false">
            <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>
          </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({})


function validatePhone (rule, value, callback) {
  const reg = /^1[3456789]\d{9}$/
  if (!reg.test(value)) {
    callback(new Error('请输入正确的手机号'))
    return
  }
  callback()
}

const rules = computed(() => {
  return {
    contactPhone: [
      {required: true, message: '请输入手机号', trigger: 'blur'},
      {
        validator: validatePhone,
        trigger: 'blur'
      }
    ],
    wordUrl: [{required: true, message: '请上传承诺书', trigger: 'change'}]
  }
})

const baseUrl = import.meta.env.VITE_APP_BASE_API

function openPage () {
  window.open(baseUrl + '/prod-api/profile/upload/2024/04/29/网络安全承诺书模板_20240429114604A005.doc')
}

defineExpose({formRef, ruleForm})
</script>

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