<template>
  <layout-card>
    <layout-table
      v-model:pagination="pagination"
      :data="list"
      @get-data="fnGetDataTransfer"
    >
      <el-table-column label="序号" width="60">
        <template #default="{ $index }">
          {{ serialNumber(pagination, $index) }}
        </template>
      </el-table-column>
      <template v-if="levelType !== '2'">
        <el-table-column label="目录名" width="220">
          <template #default="{ row }">
            <el-button
              link
              type="primary"
              @click="
                router.push({
                  path: '/learning_garden/regulatory_library',
                  query: {
                    MFOLDER_ID: row.MFOLDER_ID,
                  },
                })
              "
            >
              {{ row.NAME }}<el-icon><arrow-right /></el-icon>
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="CTIME" label="创建时间" />
        <el-table-column label="是否共享">
          <template #default="{ row }">
            {{ row.SHARE === "no" ? "私有文件" : "公共文件" }}
          </template>
        </el-table-column>
        <el-table-column prop="REMARKS" label="备注说明" />
      </template>
      <template v-if="levelType === '2'">
        <el-table-column label="文件名">
          <template #default="{ row }">
            {{ row.NAME }}
            <layout-multiple-attachment-previews :file-path="row.FILEPATH" />
          </template>
        </el-table-column>
        <el-table-column prop="POSTNO" label="发文号" />
        <el-table-column label="文件大小" width="100">
          <template #default="{ row }">
            {{ calculateFileSize(row.FILESIZE) }}
          </template>
        </el-table-column>
        <el-table-column prop="CTIME" label="上传时间" width="150" />
        <el-table-column prop="STARTTIME" label="颁布日期" width="150" />
        <el-table-column prop="UNIT" label="颁布单位" />
        <el-table-column prop="ENDTIME" label="实施日期" width="150" />
        <el-table-column label="时效状态" width="100">
          <template #default="{ row }">
            {{ row.ISVALID === "0" ? "无效" : "有效" }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="80">
          <template #default="{ row }">
            <el-button
              v-show="MFOLDER_ID !== '0'"
              type="primary"
              text
              link
              @click="useDownloadFile(row.FILEPATH)"
            >
              下载
            </el-button>
          </template>
        </el-table-column>
      </template>
      <template #button>
        <el-button v-if="MFOLDER_ID !== '0'" @click="router.back">
          返回
        </el-button>
      </template>
    </layout-table>
  </layout-card>
</template>

<script setup>
import { ref } from "vue";
import { serialNumber, calculateFileSize } from "@/assets/js/utils";
import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
import useListData from "@/assets/js/useListData.js";
import { ArrowRight } from "@element-plus/icons-vue";
import useDownloadFile from "@/assets/js/useDownloadFile.js";
import LayoutMultipleAttachmentPreviews from "@/components/multiple_attachment_previews/index.vue";
import { getRegulatoryLibraryList } from "@/request/learning_garden.js";

const router = useRouter();
const route = useRoute();
const mfolderIdDefault = "0";
const MFOLDER_ID = ref(route.query.MFOLDER_ID || mfolderIdDefault);
const levelType = ref("0");
const { list, pagination, fnGetData, fnResetPagination } = useListData(
  getRegulatoryLibraryList,
  {
    otherParams: { MFOLDER_ID: MFOLDER_ID.value, SHARE: "yes" },
    callbackFn: (list) => {
      levelType.value = list?.[0]?.TYPE || "0";
    },
  }
);
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();
});
</script>

<style scoped></style>
