<template>
  <div class="setting-page">
    <FileTable
      tableName="FILE_STORAGE_MANAGE_TABLE"
      ref="baseTableRef"
      :api="listBigFileApi"
      fullHeight
      showCheckbox
      v-model:searchParams="searchParams"
      :defaultSearchParams="{ fileSizeUnit: 'TB' }"
      :actionList="actionList"
      :defaultActions="['preview']"
      @checkbox-all="checkboxChangeFun"
      @checkbox-change="checkboxChangeFun"
      :searchAttrs="{
        startTime: {
          'disabled-date': disabledStartDateFun,
        },
        endTime: {
          'disabled-date': disabledEndDateFun,
        },
      }"
    >
      <template #form-fileSize>
        <div class="form-slot">
          <el-input v-model="searchParams.fileSize" class="input" type="number"></el-input>
          <el-select class="select" v-model="searchParams.fileSizeUnit">
            <el-option v-for="item in unitList" :label="item" :value="item" :key="item"></el-option>
          </el-select>
        </div>
      </template>
      <template #approveType="{ row }">
        <StatusDot
          :status="row.approveType === 0 ? 'success' : 'primary'"
          :title="KNOWLEDGE_APPROVE_TYPE.O[row.approveType]"
        />
      </template>
      <template #leftOptions>
        <el-button type="primary" @click="clickDeleteFun" :disabled="chosenData.length === 0"
          >批量删除</el-button
        >
      </template>
    </FileTable>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
// import BaseTable from '@/components/common/table/baseTable.vue';
import FileTable from '@/components/common/fileTable/index.vue';
import { listBigFileApi, batchDeleteBigFileApi } from '@/api/data/dataStorageAnalysis';
import StatusDot from '@/components/common/statusDot/index.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useI18n } from 'vue-i18n';
import { useDict } from '@/utils/useDict';

const { KNOWLEDGE_APPROVE_TYPE } = useDict('KNOWLEDGE_APPROVE_TYPE');

const baseTableRef = ref();
const { t } = useI18n();

const disabledStartDateFun = (time: any) => {
  const params = baseTableRef.value?.getSearchParamsFun();
  if (params.endTime) {
    const end = new Date(params.endTime).getTime();
    return time.getTime() > end;
  }
  return false;
};
const disabledEndDateFun = (time: any) => {
  const params = baseTableRef.value?.getSearchParamsFun();
  if (params.beginTime) {
    const start = new Date(params.beginTime).getTime();
    return time.getTime() < start;
  } else if (params.startTime) {
    const start = new Date(params.startTime).getTime();
    return time.getTime() < start;
  }
  return false;
};

// 操作栏
const actionList = computed(() => {
  return [
    {
      title: t('通用.删除'),
      type: 'danger',
      needConfirm: true,
      confirmTip: t('通用.确认删除吗'),
      click: (row: any) => {
        deleteFileFun(row);
      },
      hide: (row: any) => {
        return row.approvalStatus === 'pending';
      },
    },
  ];
});

// 多选的数据
const chosenData = ref<any>([]);
const checkboxChangeFun = (data: any) => {
  chosenData.value = data.records;
};

// 搜索项插槽的参数
/*
  当配置的搜索项无法满足需求时，可以自定义搜索项，
  （1）在参数配置中选择插槽
  （2）写插槽 插槽名称  #form-参数名
  （3）v-model:searchParams="searchParams" 中设置插槽部分的参数
  （4）重置后需要保留的默认项，或者不在搜索栏展示的默认搜索项，在 defaultSearchParams 中设置
*/
const searchParams = ref<any>({
  fileSize: '',
  fileSizeUnit: 'TB',
});
const unitList = ref(['TB', 'GB', 'MB', 'KB']);

// 点击批量删除
const clickDeleteFun = () => {
  ElMessageBox.confirm('是否确认删除该配置？', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    deleteFileBatchFun();
  });
};
// 批量删除操作
const deleteFileBatchFun = async () => {
  const param = chosenData.value.map((item: any) => {
    return item.id;
  });
  const res: any = await batchDeleteBigFileApi(param);
  if (res && res.code === 200) {
    ElMessage.success('删除成功');
    baseTableRef.value.resetFun({}); // 刷新数据
  }
};
// 单个删除操作
const deleteFileFun = async (row: any) => {
  const param = [row.id];
  const res: any = await batchDeleteBigFileApi(param);
  if (res && res.code === 200) {
    ElMessage.success('删除成功');
    baseTableRef.value.resetFun({}); // 刷新数据
  }
};
</script>

<style lang="scss" scoped>
.setting-page {
  width: 100%;
  height: 100%;
  margin-bottom: 0 !important;
  .form-slot {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .input {
      width: 63%;
    }
    .select {
      width: 35%;
    }
  }
}
</style>
