<template>
  <layout-card>
    <el-form
      ref="formRef"
      :rules="rules"
      :model="data.form"
      label-width="110px"
    >
      <el-form-item label="证书名称" prop="NAME">
        <el-input v-model="data.form.NAME" />
      </el-form-item>
      <el-form-item label="证书有效期" prop="VALIDITYTIME">
        <el-date-picker
          v-model="data.form.VALIDITYTIME"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="证书编号" prop="NUMBER">
        <el-input v-model="data.form.NUMBER" />
      </el-form-item>
      <el-form-item label="备注" prop="DESCR">
        <el-input
          :autosize="{
            minRows: 3,
          }"
          v-model="data.form.DESCR"
          type="textarea"
        />
      </el-form-item>
      <el-form-item label="证书图片" prop="file">
        <layout-upload
          v-model:file-list="data.form.file"
          accept=".jpg,.jpeg,.png"
          list-type="picture-card"
          delete-to-server
          :limit="99"
        />
      </el-form-item>
    </el-form>
    <div class="tc mt">
      <el-button type="primary" @click="fnSubmit">提交</el-button>
    </div>
  </layout-card>
</template>

<script setup>
import LayoutCard from "@/components/card/index.vue";
import LayoutUpload from "@/components/upload/index.vue";
import { reactive, ref } from "vue";
import {
  getIndustryQualificationsView,
  setIndustryQualificationsAdd,
  setIndustryQualificationsEdit,
} from "@/request/enterprise_management.js";
import { debounce } from "throttle-debounce";
import { ElMessage } from "element-plus";
import { setUploadImg } from "@/request/api.js";
import { useRouter, useRoute } from "vue-router";
import { addingPrefixToFile } from "@/assets/js/utils.js";
import useFormValidate from "@/assets/js/useFormValidate.js";

const router = useRouter();
const route = useRoute();
const { QUALIFICATIONS_ID } = route.query;
const rules = {
  NAME: [{ required: true, message: "名称不能为空", trigger: "blur" }],
  VALIDITYTIME: [
    { required: true, message: "证书有效期不能为空", trigger: "blur" },
  ],
  NUMBER: [{ required: true, message: "证书编号不能为空", trigger: "blur" }],
  file: [{ required: true, message: "证书图片不能为空", trigger: "blur" }],
};
const formRef = ref(null);
const data = reactive({
  form: {
    NAME: "",
    VALIDITYTIME: "",
    NUMBER: "",
    DESCR: "",
    file: [],
    verifyFileUrl: "12",
  },
});
const fnGetData = async () => {
  if (!QUALIFICATIONS_ID) return;
  const resData = await getIndustryQualificationsView({ QUALIFICATIONS_ID });
  data.form = resData.pd;
  data.form.file = addingPrefixToFile(resData.hImgs);
};
fnGetData();
const fnSubmit = debounce(
  1000,
  async () => {
    await useFormValidate(formRef);
    const resData = !QUALIFICATIONS_ID
      ? await setIndustryQualificationsAdd({ ...data.form })
      : await setIndustryQualificationsEdit({ ...data.form });
    const formData = new FormData();
    for (let i = 0; i < data.form.file.length; i++) {
      if (data.form.file[i].raw)
        formData.append("FFILE", data.form.file[i].raw);
    }
    formData.append("FOREIGN_KEY", resData.pd.QUALIFICATIONS_ID);
    formData.append("TYPE", 6);
    await setUploadImg(formData);
    ElMessage.success("保存成功");
    router.back();
  },
  { atBegin: true }
);
</script>

<style scoped></style>
