<template>
  <div class="mainView">
    <bread-crumb />
    <div v-if="!isSubmit">
      <el-form
        ref="ruleFormRef"
        label-width="180"
        :model="formData"
        :rules="rules"
      >
        <div class="module">
          <div class="title">
            <span>申请人信息</span>
          </div>
          <el-form-item label="申请人类型" prop="requestType" class="radioBox">
            <el-radio-group v-model="formData.requestType">
              <el-radio :label="1" size="large">公民</el-radio>
              <el-radio :label="2" size="large">法人/其他组织</el-radio>
            </el-radio-group>
          </el-form-item>
          <template v-if="formData.requestType == '1'">
            <el-form-item label="姓名" prop="name">
              <el-input
                clearable
                v-model="formData.name"
                placeholder="请填写姓名"
              />
            </el-form-item>
            <el-form-item label="工作单位" prop="workUnit">
              <el-input
                clearable
                v-model="formData.workUnit"
                placeholder="请填写工作单位"
              />
            </el-form-item>
            <el-form-item label="证件号码" prop="identificationNumber">
              <el-input
                clearable
                placeholder="请填写证件号码"
                v-model="formData.identificationNumber"
              />
            </el-form-item>
            <el-form-item label="联系电话" prop="contactNumber">
              <el-input
                clearable
                v-model="formData.contactNumber"
                placeholder="请填写联系电话"
              />
            </el-form-item>
          </template>

          <!-- 法人 -->
          <template v-else>
            <el-form-item label="名称" prop="name">
              <el-input
                clearable
                v-model="formData.name"
                placeholder="请填写名称"
              />
            </el-form-item>
            <el-form-item label="组织机构代码" prop="organizationCode">
              <el-input
                clearable
                v-model="formData.organizationCode"
                placeholder="请填写组织机构代码"
              />
            </el-form-item>
            <el-form-item label="营业执照注册号" prop="businessLicenseNumber">
              <el-input
                clearable
                v-model="formData.businessLicenseNumber"
                placeholder="请填写营业执照注册号"
              />
            </el-form-item>
            <el-form-item label="法人代表" prop="legalRepresentative">
              <el-input
                clearable
                v-model="formData.legalRepresentative"
                placeholder="请填写法人代表"
              />
            </el-form-item>
            <el-form-item label="法人代表身份证号" prop="identificationNumber">
              <el-input
                clearable
                v-model="formData.identificationNumber"
                placeholder="请填写法人代表身份证号"
              />
            </el-form-item>
            <el-form-item label="联系人姓名" prop="contactPersonName">
              <el-input
                clearable
                v-model="formData.contactPersonName"
                placeholder="请填写联系人姓名"
              />
            </el-form-item>
            <el-form-item label="联系人电话" prop="contactPersonPhone">
              <el-input
                clearable
                v-model="formData.contactPersonPhone"
                placeholder="请填写联系人电话"
              />
            </el-form-item>
          </template>
          <el-form-item label="邮政编码" prop="postalCode">
            <el-input
              clearable
              v-model="formData.postalCode"
              placeholder="请填写邮政编码"
            />
          </el-form-item>
          <el-form-item label="联系地址" prop="contactAddress">
            <el-input
              clearable
              v-model="formData.contactAddress"
              placeholder="请填写联系地址"
            />
          </el-form-item>
          <el-form-item label="电子邮件" prop="email">
            <el-input
              clearable
              v-model="formData.email"
              placeholder="请填写电子邮件"
            />
          </el-form-item>
          <el-form-item label="所需信息的名称" prop="informationName">
            <el-input
              clearable
              v-model="formData.informationName"
              placeholder="请填写所需信息的名称"
            />
          </el-form-item>
        </div>
        <div class="module">
          <div class="title">
            <span>申请人信息</span>
          </div>
          <el-form-item
            label="所需信息的内容描述"
            class="textarea"
            prop="informationDescription"
          >
            <el-input
              clearable
              :rows="4"
              type="textarea"
              v-model="formData.informationDescription"
              placeholder="请填写所需信息的内容描述"
            />
          </el-form-item>
          <el-form-item label="所需信息用途" class="use">
            <el-radio-group v-model="formData.informationUsage">
              <el-radio :label="1" size="large">自身生活需要</el-radio>
              <el-radio :label="2" size="large">自身生产需要 </el-radio>
              <el-radio :label="3" size="large">自身科研需要</el-radio>
              <el-radio :label="4" size="large">查验自身信息</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="输入图片中的字符" class="code" prop="code">
            <el-input
              size="large"
              clearable
              maxlength="4"
              v-model="formData.code"
              placeholder="请填写验证码"
            />
            <el-image
              size="large"
              :src="checkCode.imgCode"
              @click="getCodeImg()"
              v-if="checkCode.imgCode"
            />
            <el-button
              link
              v-else
              size="large"
              type="primary"
              @click="getCodeImg()"
              >获取验证码</el-button
            >
          </el-form-item>
        </div>
      </el-form>
      <div class="btnBox">
        <el-button type="primary" @click="submitData">提交</el-button>
        <el-button type="info" @click="goBack">返回</el-button>
      </div>
    </div>
    <div class="message" v-else>
      <el-icon color="#67C23A"><Checked /></el-icon>
      <p>申请提交成功</p>
      <div class="code">
        <span class="title">申请单查询码：</span>
        <span class="serchCode">{{ formData.queryCode }}</span>
      </div>
      <div class="code">
        <span class="title">申请单查询密码：</span>
        <span class="passWord">{{ formData.queryPassword }}</span>
      </div>

      <el-button type="primary" link @click="goBack()">返回</el-button>
    </div>
  </div>
</template>
<script setup lang="ts" name="">
import "@/style/zwgk/apply.less";
import api from "@/api/zwgk.js";
import { ref, reactive } from "vue";
import * as verifyFun from "@/utils/filterRuies.js";
import BreadCrumb from "@/components/breadcrumbModule/index.vue";
const isSubmit = ref(false);
const ruleFormRef = ref();
const formData = reactive({
  requestType: 1,
});

const rules = {
  name: [
    {
      required: true,
      trigger: "blur",
      message: "请填写姓名",
    },
  ],
  workUnit: [
    {
      required: true,
      trigger: "blur",
      message: "请填写工作单位",
    },
  ],
  identificationNumber: [
    {
      required: true,
      trigger: "blur",
      message: "请填写证件号码",
    },
    {
      validator: verifyFun.isIdCard,
      trigger: "blur",
    },
  ],
  contactNumber: [
    {
      required: true,
      trigger: "blur",
      message: "请填写联系电话",
    },
    { type: "phone", message: "请输入正确的联系电话", trigger: "blur" },
  ],
  organizationCode: [
    {
      required: true,
      trigger: "blur",
      message: "请填写组织机构代码",
    },
    {
      validator: verifyFun.checkOrgCode,
      trigger: "blur",
    },
  ],
  businessLicenseNumber: [
    {
      required: true,
      trigger: "blur",
      message: "请填写营业执照注册号",
    },
    {
      validator: verifyFun.isValidBusCode,
      trigger: "blur",
    },
  ],
  legalRepresentative: [
    {
      required: true,
      trigger: "blur",
      message: "请填写法人代表",
    },
  ],
  contactPersonName: [
    {
      required: true,
      trigger: "blur",
      message: "请填写联系人姓名",
    },
  ],
  contactPersonPhone: [
    {
      required: true,
      trigger: "blur",
      message: "请填写联系人电话",
    },
    { type: "phone", message: "请输入正确的联系人电话", trigger: "blur" },
  ],
  postalCode: [
    {
      required: true,
      trigger: "blur",
      message: "请填写邮政编码",
    },
    {
      validator: verifyFun.isPostalCode,
      trigger: "blur",
    },
  ],
  contactAddress: [
    {
      required: true,
      trigger: "blur",
      message: "请填写联系地址",
    },
  ],
  email: [
    {
      required: true,
      trigger: "blur",
      message: "请填写电子邮件",
    },
    { type: "email", message: "请输入正确的邮箱地址", trigger: "blur" },
  ],
  ioDepartmentFunctionId: [
    {
      required: true,
      trigger: "blur",
      message: "请选择部门",
    },
  ],
  informationName: [
    {
      required: true,
      trigger: "blur",
      message: "请填写所需信息的名称",
    },
  ],
  informationDescription: [
    {
      required: true,
      trigger: "blur",
      message: "请填写所需信息的内容描述",
    },
  ],
  code: [
    {
      required: true,
      trigger: "blur",
      message: "请填写验证码",
    },
    {
      validator: (rule, value, callback) => {
        verifyFun.valiReportCode(value, callback, checkCode, getCodeImg);
      },
      trigger: "blur",
    },
  ],
};
// 提交
function submitData() {
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      api.applyPublic(formData).then((res) => {
        if (res.code == 200) {
          isSubmit.value = true;
          formData.queryCode = res.data.queryCode;
          formData.queryPassword = res.data.queryPassword;
        }
      });
    }
  });
}

// 获取图形校验码
import codeApi from "@/api/captcha.js";
const checkCode = reactive({
  code: "",
  imgCode: "",
});
function getCodeImg() {
  codeApi.getPicCaptcha().then((res) => {
    checkCode.code = res.data.code;
    checkCode.imgCode = "data:image/png;base64," + res.data.file;
  });
}

// 返回
import { useRouter } from "vue-router";
const router = useRouter();
function goBack() {
  router.back();
}
</script>
<style scoped lang="less">
.message {
  // width: 100px;
  margin: 80px auto;
  text-align: center;
  .el-icon {
    font-size: 100px;
  }
  p {
    color: #67c23a;
    font-size: 16px;
    margin-top: 20px;
    font-weight: bold;
    margin-bottom: 30px;
  }
  .code {
    width: 300px;
    margin: 15px auto;
    overflow: hidden;
    span {
      float: left;
    }
    .title {
      width: 150px;
      display: block;
      text-align: right;
      margin-right: 10px;
    }
    .serchCode {
      color: #409eff;
      font-weight: bold;
    }
    .passWord {
      color: #f56c6c;
      font-weight: bold;
    }
  }
  .el-button {
    margin: 30px 0;
  }
}
</style>
