<template>
  <div class="mainView">
    <BreadCrumb />
    <div class="editInfo">
      <el-form
        ref="formRule"
        :rules="rules"
        :model="formData"
        label-width="180"
      >
        <el-form-item label="被举报人" prop="reportedPerson">
          <el-input
            size="large"
            clearable
            v-model="formData.reportedPerson"
            placeholder="请填写被举报人"
          />
        </el-form-item>
        <el-form-item label="被举报部门" prop="ioDepartmentFunctionId">
          <el-select
            size="large"
            clearable
            v-model="formData.ioDepartmentFunctionId"
            placeholder="请选择被举报部门"
          >
            <el-option
              v-for="item in unitDict"
              :key="item.id"
              :value="item.id"
              :label="item.departmentName"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="举报内容" prop="complaintContent" class="length">
          <el-input
            size="large"
            :rows="8"
            type="textarea"
            v-model="formData.complaintContent"
            placeholder="请填写举报内容"
          />
        </el-form-item>
        <el-form-item
          label="联系方式"
          prop="contactInformation"
          class="length code"
        >
          <el-input
            size="large"
            clearable
            v-model.number="formData.contactInformation"
            placeholder="请填写联系方式"
          />
        </el-form-item>
        <el-form-item
          label="验证码"
          prop="checkCode"
          class="length code graphicCode"
        >
          <el-input
            size="large"
            clearable
            maxlength="4"
            v-model="formData.checkCode"
            placeholder="请填写验证码"
          />
          <el-image
            size="large"
            :src="imgCode.jbCodeImg"
            @click="getCodeImg('jbCode')"
          />
        </el-form-item>
      </el-form>
      <div class="btnBox">
        <el-button size="large" type="primary" @click="submitData"
          >提交</el-button
        >
      </div>
    </div>
    <!-- 举报跟踪 -->
    <div class="trackDown">
      <div class="leftBox">
        <img src="@/assets/logo/xfjb.gif" alt="" />
      </div>
      <div class="rightBox">
        <p>
          省粮食局开展整治县处级以上干部违规收送礼金问题、整治单项协会不正之风和腐败突出问题专项行动
          举报电话：0000-12345678 ；信访地址：西宁市城中区解放路2号 青海省粮食局
        </p>
        <el-form ref="trackDownForm" :rules="trackDownRule" :model="trackDown">
          <el-form-item label="举报编码" prop="complaintNumber">
            <el-input clearable v-model="trackDown.complaintNumber" />
          </el-form-item>
          <el-form-item label="验证码" prop="checkCode">
            <el-input
              clearable
              size="size"
              maxlength="4"
              v-model="trackDown.checkCode"
            />
          </el-form-item>
          <el-form-item>
            <el-image
              size="size"
              v-if="imgCode.gzCodeImg"
              :src="imgCode.gzCodeImg"
              @click="getCodeImg('gzCode')"
            />
            <el-button
              link
              v-else
              size="large"
              type="primary"
              @click="getCodeImg('gzCode')"
              >获取验证码</el-button
            >
            <el-button size="size" type="primary" @click="trackDownDetails()"
              >跟踪</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 举报成功提示 -->
    <el-dialog v-model="showCode" width="30%" left>
      <template #header>
        <el-icon color="#67C23A"><SuccessFilled /></el-icon>
        <span>提交成功</span>
      </template>
      <div class="dialogBody">
        <p class="title">已生成投诉编号（请妥善留存）</p>
        <p class="code">{{ imgCode.complaintNo }}</p>
        <p class="tip">凭此条投诉编号可跟踪举报进度</p>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showCode = false">取消</el-button>
          <el-button type="primary" @click="showCode = false">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup name="xfjb">
import { ref, reactive, onMounted } from "vue";

import "@/style/hdjl/xfjb.less";
import api from "@/api/hdjl.js";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import codeApi from "@/api/captcha.js";
import dictStore from "@/store/dictionary.js"; //引入仓库
import { validateMobile } from "@/utils/filterRuies.js";
import BreadCrumb from "@/components/breadcrumbModule/index.vue";

const unitDict = dictStore().DICT_BM;
const router = useRouter();
const formRule = ref(null);
const trackDownForm = ref(null);
const showCode = ref(false);
const formData = reactive({
  reportedPerson: "",
  complaintContent: "",
  checkCode: "",
});
const trackDown = reactive({
  complaintNumber: "",
  checkCode: "",
});
const imgCode = reactive({
  jbCode: "",
  jbCodeImg: "",
  gzCode: "",
  gzCodeImg: "",
  complaintNo: "",
});

const rules = {
  reportedPerson: [
    {
      required: true,
      trigger: "blur",
      message: "请填写被举报人",
    },
  ],
  ioDepartmentFunctionId: [
    {
      required: true,
      trigger: "blur",
      message: "请选择举报部门",
    },
  ],
  complaintContent: [
    {
      required: true,
      trigger: "blur",
      message: "请填写举报内容",
    },
  ],
  contactInformation: [
    {
      validator: (rule, value, callback) => {
        if (value && !/^1[3-9]\d{9}$/.test(value)) {
          callback(new Error("手机号格式不正确"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
  checkCode: [
    {
      required: true,
      trigger: "blur",
      message: "请填写验证码",
    },
    {
      validator: (rule, value, callback) => {
        valiReportCode(rule, value, callback, "jbCode");
      },
      trigger: "blur",
    },
  ],
};

const trackDownRule = {
  complaintNumber: [
    {
      required: true,
      trigger: "blur",
      message: "举报编码",
    },
  ],
  checkCode: [
    {
      required: true,
      trigger: "blur",
      message: "请填写验证码",
    },
    {
      validator: (rule, value, callback) => {
        valiReportCode(rule, value, callback, "gzCode");
      },
      trigger: "blur",
    },
  ],
};
onMounted(() => {
  getCodeImg("jbCode");
});
// 提交举报
function submitData() {
  formRule.value.validate((valid) => {
    if (valid) {
      api.submitReport(formData).then((res) => {
        if (res.code == 200) {
          imgCode.complaintNo = res.data;
          showCode.value = true;
        }
      });
    }
  });
}

// 跟踪举报进度
function trackDownDetails() {
  trackDownForm.value.validate((valid) => {
    if (valid) {
      router.push({
        path: "/hdjl/xfjb/recover",
        query: {
          complaintNumber: trackDown.complaintNumber,
        },
      });
    }
  });
}

// 校验验证码
function valiReportCode(rule, value, callback, type) {
  if (imgCode[type]) {
    if (value != imgCode[type]) {
      callback(new Error("请输入正确的验证码"));
    } else {
      callback();
    }
  } else {
    getCodeImg(type);
    callback(new Error("输入正确的验证码"));
  }
}
// 获取图形校验码
function getCodeImg(type) {
  codeApi.getPicCaptcha().then((res) => {
    if (type == "jbCode") {
      formData.checkCode = "";
    } else {
      trackDown.checkCode = "";
    }
    console.log(res);
    imgCode[type] = res.data.code;
    imgCode[type + "Img"] = "data:image/png;base64," + res.data.file;
  });
}
</script>
