<template>
  <div>
    <div class="presence-content-box">
      <div class="content-main">
        <div class="form-box">
          <div class="title-box">
            <div class="title-content">
              <div class="bt">咨询报考</div>
            </div>
          </div>
          <div class="form">
            <div class="li">
              <el-input v-model="form.name" placeholder="姓名"></el-input>
            </div>
            <div class="li">
              <el-input v-model="f2" placeholder="性别"></el-input>
            </div>
            <div class="li">
              <el-input v-model="form.phone" placeholder="手机"></el-input>
            </div>
            <div class="li">
              <el-input v-model="f3" placeholder="请告诉我您来自"></el-input>
            </div>
            <div class="li">
              <el-input v-model="f1" placeholder="请选择您要报名的证书"></el-input>
            </div>
            <div class="btn" @click="submit">立即提交</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue'
import { submitApplicationForm } from '@/api/index'

// 表单字段
const f1 = ref('')
const f2 = ref('')
const f3 = ref('')

const form = reactive({
  name: '',
  phone: '',
  project_id: 5009,
})

const { proxy } = getCurrentInstance()

const submit = () => {
  const findNull = Object.values(form).findIndex((item) => item === '')
  if (findNull !== -1) {
    proxy?.$message('请完善信息')
    return
  } else {
    const MOBILE_REG = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
    if (!MOBILE_REG.test(form.phone)) {
      proxy?.$message('手机号格式错误')
      return
    }
  }

  const payload = {
    ...form,
    comment: `#姓名：${f1.value};#性别：${f2.value};#请告诉我您来自：${f3.value}`,
  }

  submitApplicationForm(payload)
    .then((res) => {
      if (res && res.status === 200) {
        proxy?.$message({ type: 'success', message: '提交成功' })
      } else {
        proxy?.$message.error('提交失败')
      }
    })
    .catch(() => {})
}
</script>

<style lang="scss" scoped>
.presence-content-box {
  padding-top: 80px;
  .content-main {
    padding-top: 24px;
    .form-box {
      width: 1200px;
      height: 500px;
      margin: 0 auto 40px;
      background: url(https://webapp-pub.ezijing.com/www/pc/next/cert/cert_application_bg.png);
      background-size: 100% 100%;
      display: flex;
      justify-content: space-between;
      .title-box {
        width: 580px;
        height: 160px;
        background: rgba(170, 25, 65, 0.4);
        box-shadow: 0px 0px 122px rgba(0, 0, 0, 0.07);
        margin-top: 170px;
        position: relative;
        .title-content {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 380px;
          height: 200px;
          background: #aa1941;
        }
        .bt {
          font-size: 22px;
          line-height: 100%;
          color: #ffffff;
          text-align: center;
          margin-top: 90px;
        }
      }
      .form {
        width: 401px;
        background: #ffffff;
        margin-top: 54px;
        box-sizing: border-box;
        padding: 40px 50px;
        height: fit-content;
        margin-right: 116px;
        .li {
          margin-bottom: 20px;
        }
        .btn {
          font-size: 18px;
          line-height: 32px;
          color: #ffffff;
          width: 281px;
          background: #aa1941;
          border-radius: 4px;
          text-align: center;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
