<template>
  <div class="mainView">
    <bread-crumb />
    <div class="searchBox" v-if="!showForm">
      <el-form
        :rules="rules"
        :model="formData"
        label-width="0"
        ref="ruleFormRef"
      >
        <el-form-item prop="queryCode">
          <el-input
            clearable
            size="large"
            v-model="formData.queryCode"
            placeholder="请输入申请单查询码"
          />
        </el-form-item>
        <el-form-item prop="queryPassword">
          <el-input
            clearable
            size="large"
            v-model="formData.queryPassword"
            placeholder="请输入申请单密码"
          />
        </el-form-item>
        <el-form-item prop="code">
          <el-input
            clearable
            size="large"
            maxlength="4"
            v-model="formData.code"
            placeholder="请填写验证码"
          />
          <el-image
            size="large"
            :src="checkCode.imgCode"
            @click="getCodeImg()"
            v-if="checkCode.imgCode"
          />
        </el-form-item>
        <el-form-item>
          <el-button size="large" type="primary" @click="submitData"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 回复 -->
    <div v-else class="recoverBox">
      <el-form ref="ruleFormRef" label-width="180">
        <div class="module">
          <div class="title">
            <span>申请人信息</span>
          </div>
          <el-form-item label="申请人类型" class="radioBox">
            <el-radio-group disabled v-model="pageData.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="pageData.requestType == '1'">
            <el-form-item label="姓名">
              <el-input disabled v-model="pageData.name" />
            </el-form-item>
            <el-form-item label="工作单位">
              <el-input disabled v-model="pageData.workUnit" />
            </el-form-item>
            <el-form-item label="证件号码">
              <el-input disabled v-model="pageData.identificationNumber" />
            </el-form-item>
            <el-form-item label="联系电话">
              <el-input disabled v-model="pageData.contactNumber" />
            </el-form-item>
          </template>

          <!-- 法人 -->
          <template v-else>
            <el-form-item label="名称">
              <el-input disabled v-model="pageData.name" />
            </el-form-item>
            <el-form-item label="组织机构代码">
              <el-input disabled v-model="pageData.organizationCode" />
            </el-form-item>
            <el-form-item label="营业执照注册号">
              <el-input disabled v-model="pageData.businessLicenseNumber" />
            </el-form-item>
            <el-form-item label="法人代表">
              <el-input disabled v-model="pageData.legalRepresentative" />
            </el-form-item>
            <el-form-item label="法人代表身份证号">
              <el-input disabled v-model="pageData.identificationNumber" />
            </el-form-item>
            <el-form-item label="联系人姓名">
              <el-input disabled v-model="pageData.contactPersonName" />
            </el-form-item>
            <el-form-item label="联系人电话">
              <el-input disabled v-model="pageData.contactPersonPhone" />
            </el-form-item>
          </template>
          <el-form-item label="邮政编码">
            <el-input disabled v-model="pageData.postalCode" />
          </el-form-item>
          <el-form-item label="联系地址">
            <el-input disabled v-model="pageData.contactAddress" />
          </el-form-item>
          <el-form-item label="电子邮件">
            <el-input disabled v-model="pageData.email" />
          </el-form-item>
          <el-form-item label="所需信息的名称">
            <el-input disabled v-model="pageData.informationName" />
          </el-form-item>
          <el-form-item label="所需信息的内容描述" class="textarea">
            <el-input
              disabled
              :rows="4"
              type="textarea"
              v-model="pageData.informationDescription"
            />
          </el-form-item>
          <el-form-item label="所需信息用途" class="use">
            <el-radio-group disabled v-model="pageData.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>
        </div>
        <div class="module">
          <div class="title">
            <span>回复</span>
          </div>
          <el-form-item label="回复人" class="use">
            <el-input disabled v-model="pageData.replyPerson" />
          </el-form-item>
          <el-form-item label="回复内容">
            <el-input
              disabled
              :rows="4"
              type="textarea"
              v-model="pageData.replyContent"
            />
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import api from "@/api/zwgk.js";
import { ref, reactive, onMounted } from "vue";
import "@/style/zwgk/apply.less";
import { ElMessage } from "element-plus";
import { valiReportCode } from "@/utils/filterRuies.js";
import BreadCrumb from "@/components/breadcrumbModule/index.vue";

const pageData = ref({});
const ruleFormRef = ref();
const formData = reactive({});
const showForm = ref(false);
const rules = {
  queryCode: [
    {
      required: true,
      trigger: "blur",
      message: "请填写申请单查询码",
    },
  ],
  queryPassword: [
    {
      required: true,
      trigger: "blur",
      message: "请填写申请单密码",
    },
  ],
  code: [
    {
      required: true,
      trigger: "blur",
      message: "请填写验证码",
    },
    {
      validator: (rule, value, callback) => {
        valiReportCode(value, callback, checkCode, getCodeImg);
      },
      trigger: "blur",
    },
  ],
};
onMounted(() => {
  getCodeImg();
});
// 提交
function submitData() {
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      api.queryResult(formData).then((res) => {
        if (res.code == 200) {
          if (res.data.replyStatus == 1) {
            pageData.value = res.data;
            showForm.value = true;
          } else {
            ElMessage.warning("暂未回复，请等待");
          }
        }
      });
    }
  });
}

// 获取图形校验码
import codeApi from "@/api/captcha.js";
const checkCode = reactive({
  code: "",
  imgCode: "",
});

function getCodeImg() {
  codeApi.getPicCaptcha().then((res) => {
    if (res.code) {
      checkCode.code = res.data.code;
      checkCode.imgCode = "data:image/png;base64," + res.data.file;
    }
  });
}
</script>
<style scoped lang="less">
.mainView {
  width: 1200px;
  min-height: 400px;
  background: #fff;

  .searchBox {
    .el-form {
      margin-top: 15px;
      padding: 20px;

      .el-form-item {
        float: left;
        width: 28%;
        margin-right: 1%;

        &:nth-child(3) {
          width: 25%;

          .el-input {
            width: 60%;
          }
        }

        &:last-child {
          width: 15%;
        }
      }
    }
  }

  .recoverBox {
    .el-form {
      .textarea {
        width: 100%;

        .el-textarea {
          width: 83%;
        }
      }

      .use {
        width: 100%;
      }
    }

    .module {
      padding-top: 0;
    }

    .module:last-child {
      .title {
        background: #67c23a;
      }

      .el-input {
        width: 83%;
      }
    }
  }
}
</style>
