<template>
  <layout-card>
    <layout-table
      :data="list"
      v-model:pagination="pagination"
      @get-data="fnGetDataTransfer"
    >
      <el-table-column label="序号" width="60">
        <template #default="{ $index }">
          {{ serialNumber(pagination, $index) }}
        </template>
      </el-table-column>
      <el-table-column v-if="MFOLDER_ID === '0'" label="目录名" width="220">
        <template v-slot="{ row }">
          <el-button
            link
            type="primary"
            @click="
              router.push({
                path: '/system_operation/system_documents',
                query: {
                  MFOLDER_ID: row.MFOLDER_ID,
                },
              })
            "
          >
            {{ row.NAME }}<el-icon><ArrowRight /></el-icon>
          </el-button>
        </template>
      </el-table-column>
      <el-table-column v-if="MFOLDER_ID !== '0'" label="文件名">
        <template v-slot="{ row }">
          {{ row.NAME }}
          <el-button
            link
            type="primary"
            v-if="interceptTheSuffix(row.FILEPATH, '.txt')"
            @click="fnPreviewTxt(row.FILEPATH)"
          >
            [预览]
          </el-button>
          <el-button
            text
            link
            type="primary"
            v-if="interceptTheSuffix(row.FILEPATH, '.pdf')"
            @click="fnPreviewPdf(row.FILEPATH)"
          >
            [预览]
          </el-button>
          <el-button
            link
            type="primary"
            v-if="interceptTheSuffix(row.FILEPATH, '.mp4')"
            @click="fnPreviewVideo(row.FILEPATH)"
          >
            [预览]
          </el-button>
          <a
            v-if="
              interceptTheSuffix(row.FILEPATH, '.doc') ||
              interceptTheSuffix(row.FILEPATH, '.xls') ||
              interceptTheSuffix(row.FILEPATH, '.ppt') ||
              interceptTheSuffix(row.FILEPATH, '.docx') ||
              interceptTheSuffix(row.FILEPATH, '.xlsx') ||
              interceptTheSuffix(row.FILEPATH, '.pptx')
            "
            :href="
              'http://view.officeapps.live.com/op/view.aspx?src=' +
              VITE_FILE_URL +
              row.FILEPATH
            "
            target="_blank"
          >
            [预览]
          </a>
        </template>
      </el-table-column>
      <el-table-column v-if="MFOLDER_ID === '0'" prop="num" label="文件数量" />
      <el-table-column v-if="MFOLDER_ID !== '0'" label="文件大小">
        <template v-slot="{ row }">
          {{ calculateFileSize(row.FILESIZE) }}
        </template>
      </el-table-column>
      <el-table-column prop="CTIME" label="上传时间" />
      <el-table-column prop="UNAME" label="上传者" />
      <el-table-column label="是否共享">
        <template v-slot="{ row }">
          {{ row.SHARE === "no" ? "私有文件" : "公共文件" }}
        </template>
      </el-table-column>
      <el-table-column prop="REMARKS" label="备注说明" show-overflow-tooltip />
      <el-table-column label="操作" width="120">
        <template v-slot="{ row }">
          <el-button
            v-if="buttonJurisdiction.del && row.UNAME !== 'init'"
            type="primary"
            text
            link
            @click="fnDelete(row.MFOLDER_ID, row.FILEPATH)"
          >
            删除
          </el-button>
          <el-button
            v-show="MFOLDER_ID !== '0'"
            type="primary"
            text
            link
            @click="useDownloadFile(row.FILEPATH)"
          >
            下载
          </el-button>
        </template>
      </el-table-column>
      <template #button>
        <el-button
          v-if="MFOLDER_ID === '0' && buttonJurisdiction.add"
          type="primary"
          @click="data.addFolderDialogVisible = true"
        >
          新建文件夹
        </el-button>
        <template v-if="MFOLDER_ID !== '0'">
          <el-button
            v-if="buttonJurisdiction.add"
            type="primary"
            @click="data.uploadFileDialogVisible = true"
          >
            上传文件
          </el-button>
          <el-button
            v-if="buttonJurisdiction.add"
            type="primary"
            @click="data.batchUploadFileDialogVisible = true"
          >
            批量上传
          </el-button>
          <el-button @click="router.back"> 返回 </el-button>
        </template>
      </template>
    </layout-table>
    <layout-pdf
      :src="data.pdfDialog.src"
      v-model:visible="data.pdfDialog.visible"
    />
    <layout-txt
      :src="data.txtDialog.src"
      v-model:visible="data.txtDialog.visible"
    />
    <layout-video
      :src="data.videoDialog.src"
      v-model:visible="data.videoDialog.visible"
    />
    <add-folder
      v-model:visible="data.addFolderDialogVisible"
      :mfolder-id="MFOLDER_ID"
      @get-data="fnResetPaginationTransfer"
    />
    <upload-folder
      v-model:visible="data.uploadFileDialogVisible"
      :mfolder-id="MFOLDER_ID"
      @get-data="fnResetPaginationTransfer"
    />
    <batch-upload-file
      v-model:visible="data.batchUploadFileDialogVisible"
      :mfolder-id="MFOLDER_ID"
      @get-data="fnResetPaginationTransfer"
    />
  </layout-card>
</template>

<script setup>
import {
  getSystemDocumentsList,
  setSystemDocumentsDelete,
} from "@/request/system_operation.js";
import { reactive, ref } from "vue";
import LayoutPdf from "@/components/pdf/index";
import LayoutTxt from "@/components/txt/index.vue";
import LayoutVideo from "@/components/video/index";
import {
  serialNumber,
  calculateFileSize,
  interceptTheSuffix,
} from "@/assets/js/utils";
import useButtonJurisdiction from "@/assets/js/useButtonJurisdiction.js";
import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
import useListData from "@/assets/js/useListData.js";
import { useUserStore } from "@/pinia/user.js";
import { ArrowRight } from "@element-plus/icons-vue";
import { debounce } from "throttle-debounce";
import { ElMessage, ElMessageBox } from "element-plus";
import useDownloadFile from "@/assets/js/useDownloadFile.js";
import AddFolder from "./components/add_folder.vue";
import UploadFolder from "./components/upload_file.vue";
import BatchUploadFile from "./components/batch_upload_file.vue";

const VITE_FILE_URL = import.meta.env.VITE_FILE_URL;
const router = useRouter();
const route = useRoute();
const userStore = useUserStore();
const mfolderIdDefault = "0";
const MFOLDER_ID = ref(route.query.MFOLDER_ID || mfolderIdDefault);
const { list, pagination, fnGetData, fnResetPagination } = useListData(
  getSystemDocumentsList,
  {
    otherParams: {
      MFOLDER_ID: MFOLDER_ID.value,
      SHARE: "no",
      CORPINFO_ID: userStore.getUserInfo.CORPINFO_ID,
    },
  }
);
const data = reactive({
  pdfDialog: {
    visible: false,
    src: "",
  },
  videoDialog: {
    visible: false,
    src: "",
  },
  txtDialog: {
    visible: false,
    src: "",
  },
  addFolderDialogVisible: false,
  uploadFileDialogVisible: false,
  batchUploadFileDialogVisible: false,
});
const buttonJurisdiction = await useButtonJurisdiction("mfolder");
const fnGetDataTransfer = () => {
  fnGetData({
    MFOLDER_ID: MFOLDER_ID.value,
  });
};
const fnResetPaginationTransfer = () => {
  fnResetPagination({
    MFOLDER_ID: MFOLDER_ID.value,
  });
};
onBeforeRouteUpdate((to) => {
  MFOLDER_ID.value = to.query.MFOLDER_ID || mfolderIdDefault;
  fnResetPaginationTransfer();
});
const fnDelete = debounce(
  1000,
  async (MFOLDER_ID, FILEPATH) => {
    await ElMessageBox.confirm(`确定要删除吗？`, {
      type: "warning",
    });
    await setSystemDocumentsDelete({ MFOLDER_ID, FILEPATH: FILEPATH || "" });
    ElMessage.success("删除成功");
    fnResetPaginationTransfer();
  },
  { atBegin: true }
);
const fnPreviewTxt = async (FILEPATH) => {
  data.txtDialog.visible = true;
  data.txtDialog.src = FILEPATH;
};
const fnPreviewPdf = (FILEPATH) => {
  data.pdfDialog.visible = true;
  data.pdfDialog.src = FILEPATH;
};
const fnPreviewVideo = (FILEPATH) => {
  data.videoDialog.visible = true;
  data.videoDialog.src = FILEPATH;
};
</script>

<style scoped></style>
