<template>
  <div>
    <el-dialog
      v-if="type === 1 || type === 2 || type === 3 || type === 4 || type === 5"
      :model-value="
        type === 1 || type === 2 || type === 3 || type === 4 || type === 5
      "
      :title="title"
      :before-close="fnClose"
    >
      <el-space wrap>
        <layout-upload
          v-model:file-list="data.form.file"
          accept=".pdf"
          :show-file-list="false"
          auto-upload
          :http-request="fnUploadArchivesFile"
          :limit="1"
        >
          <template #tip>只能上传pdf文件</template>
        </layout-upload>
      </el-space>

      <br /><br />

      <el-row>
        <el-col :span="8">
          <template v-for="(row, index) in data.fileList" :key="index">
            <el-row>
              <el-col :span="16">
                <el-button type="primary" text link @click="fnShowPDF(row)">
                  {{ row.FILE_NAME }}
                </el-button>
              </el-col>
              <el-col :span="8">
                <el-button
                  type="primary"
                  text
                  link
                  @click="fnDeleteArchivesFile(row)"
                >
                  删除
                </el-button>
              </el-col>
            </el-row>
          </template>
        </el-col>
        <el-col :span="16">
          <pdf
            v-if="data.currentFile && data.currentFile.length > 0"
            model="normal"
            :visible="data.currentFile && data.currentFile.length > 0"
            :src="data.currentFile"
          />
        </el-col>
      </el-row>
      <template #footer>
        <el-button @click="fnClose">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {
  uploadArchivesFile,
  getArchivesFileList,
  deleteArchivesFile,
} from "@/request/archives.js";
import LayoutUpload from "@/components/upload/index.vue";
import Pdf from "@/components/pdf/index.vue";
import { reactive } from "vue";
import { useVModels } from "@vueuse/core";
import { ElMessageBox } from "element-plus";

const props = defineProps({
  title: {
    type: String,
    required: false,
    default: "",
  },
  year: {
    type: String,
    required: false,
    default: "",
  },
  type: {
    type: Number,
    required: true,
  },
  studyTaskId: {
    type: String,
    required: false,
    default: "",
  },
});
const { title, year, type, studyTaskId } = useVModels(props);

const data = reactive({
  form: {
    file: [],
  },
  fileList: [],
  currentFile: "",
});

const emits = defineEmits(["update:visible"]);

const fnClear = () => {
  data.currentFile = "";
  data.form.file = [];
  data.fileList = [];
};

const fnUploadArchivesFile = async (item) => {
  const formData = new FormData();
  formData.append("FFILE", item.file);
  formData.append("TYPE", type.value);
  if (year.value && year.value.length > 0) {
    formData.append("YEAR", year.value);
  }
  if (studyTaskId.value && studyTaskId.value.length > 0) {
    formData.append("STUDYTASK_ID", studyTaskId.value);
  }
  await uploadArchivesFile(formData);
  await fnGetArchivesFileList();
};

const fnGetArchivesFileList = async () => {
  fnClear();
  const params = {
    TYPE: type.value,
  };
  if (studyTaskId.value && studyTaskId.value.length > 0) {
    params.STUDYTASK_ID = studyTaskId.value;
  }
  if (year.value && year.value.length > 0) {
    params.YEAR = year.value;
  }
  const respData = await getArchivesFileList(params);
  if (respData && respData.varList) {
    data.fileList = respData.varList;
    data.form.file = respData.varList;
  }
};
await fnGetArchivesFileList();

const fnDeleteArchivesFile = async (row) => {
  if (row) {
    await ElMessageBox.confirm("确定要删除吗？", { type: "warning" });
    const respData = await deleteArchivesFile({
      ARCHIVESFILES_ID: row.ARCHIVESFILES_ID,
      FILE_PATH: row.FILE_PATH,
    });
    if (respData && respData.result === "success") {
      await fnGetArchivesFileList();
    }
  }
};

const fnShowPDF = (row) => {
  if (row) {
    data.currentFile = row.FILE_PATH;
  }
};

const fnClose = () => {
  emits("update:current", undefined);
};
</script>

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