<template>
  <el-dialog
    v-model="visible"
    :title="type === 'add' ? '新增' : '修改'"
    :on-close="fnClose"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-width="170">
      <el-form-item :label="labelName" prop="REMARKS">
        <el-input v-model="form.REMARKS" />
      </el-form-item>
      <el-form-item label="类型" prop="TYPES">
        <layout-three-institutional-libraries
          ref="typeRef"
          v-model="form.TYPES"
          type="type"
          :path-name="pathName"
        />
      </el-form-item>
      <el-form-item label="文件" prop="file">
        <layout-upload v-model:file-list="form.file" accept=".pdf" />
      </el-form-item>
      <el-form-item label="文件内容" prop="TEXT_INFO">
        <div
          v-if="form.TEXT_INFO && type === 'edit'"
          class="tr mb-10"
          style="flex: 1"
        >
          <el-button type="primary" @click="fnExport">导出WORD</el-button>
        </div>
        <layout-editor v-model="form.TEXT_INFO" />
      </el-form-item>
      <el-form-item label="标签" prop="labels">
        <layout-three-institutional-libraries
          ref="labelRef"
          v-model="form.labels"
          type="label"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="fnClose">取消</el-button>
      <el-button type="primary" @click="fnSubmit">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { useVModels } from "@vueuse/core";
import { ref } from "vue";
import { debounce } from "throttle-debounce";
import useFormValidate from "@/assets/js/useFormValidate.js";
import { ElMessage } from "element-plus";
import LayoutThreeInstitutionalLibraries from "@/components/three_institutional_libraries/index.vue";
import LayoutUpload from "@/components/upload/index.vue";
import LayoutEditor from "@/components/editor/index.vue";
import { setThreeInstitutionalLibrariesSave } from "@/request/three_institutional_libraries.js";

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false,
  },
  form: {
    type: Object,
    required: true,
    default: () => ({}),
  },
  type: {
    type: String,
    required: true,
    default: "",
  },
  labelName: {
    type: String,
    required: true,
    default: "",
  },
  association: {
    type: String,
    required: true,
    default: "",
  },
  pathName: {
    type: String,
    required: true,
    default: "",
  },
});
const emits = defineEmits(["update:visible", "update:form", "get-data"]);
const { visible, form } = useVModels(props, emits);
const rules = {
  REMARKS: [
    { required: true, message: `请输入${props.labelName}`, trigger: "blur" },
  ],
  TYPES: [{ required: true, message: "请选择类型", trigger: "change" }],
  file: [{ required: true, message: "请上传文件", trigger: "change" }],
};
const formRef = ref(null);
const typeRef = ref(null);
const labelRef = ref(null);
const fnClose = () => {
  formRef.value.resetFields();
  visible.value = false;
};
const fnSubmit = debounce(
  1000,
  async () => {
    await useFormValidate(formRef);
    const formData = new FormData();
    Object.keys(form.value).forEach((key) => {
      formData.append(key, form.value[key]);
    });
    formData.delete("file");
    formData.delete("TYPES");
    formData.delete("CATEGORY_LIST");
    formData.delete("labels");
    form.value.file?.[0]?.raw &&
      formData.append("FILE", form.value.file[0].raw);
    formData.append(
      "labels",
      JSON.stringify(await labelRef.value.getCheckedNodes())
    );
    const SOURCE_TYPES = await typeRef.value.getCheckedNodes();
    const TYPES = [];
    for (let i = 0; i < SOURCE_TYPES.length; i++) {
      TYPES.push({
        CATEGORY: "TYPES",
        CATEGORY_ID: SOURCE_TYPES[i].DICTIONARIES_ID,
        CATEGORY_NAME: SOURCE_TYPES[i].NAME,
      });
    }
    formData.append("TYPES", JSON.stringify(TYPES));
    const CATEGORY_LIST = [
      {
        CATEGORY: "CATEGORY_LIST",
        CATEGORY_ID: "7158f688d0f34054a28a9275139298df",
        CATEGORY_NAME: "行业专属类",
      },
    ];
    formData.append("CATEGORY_LIST", JSON.stringify(CATEGORY_LIST));
    formData.append("ASSOCIATION", props.association);
    await setThreeInstitutionalLibrariesSave(formData);
    ElMessage.success("操作成功");
    fnClose();
    emits("get-data");
  },
  { atBegin: true }
);
const fnExport = () => {
  window.location.href =
    import.meta.env[import.meta.env.DEV ? "VITE_PROXY" : "VITE_BASE_URL"] +
    "/textLibrary/exportWord?BUS_TEXT_LIBRARY_ID=" +
    form.value.BUS_TEXT_LIBRARY_ID;
};
</script>

<style scoped lang="scss"></style>
