<template>
  <div class="setting-page">
    <BaseTable
      tableName="FILE_STORAGE_MANAGE_TABLE"
      ref="baseTableRef"
      :api="listBigFileApi"
      :params="{
        fileName,
        createTime,
        fileSize,
        fileSizeUnit
      }"
      showCheckbox
      showIndex
    >
      <template #leftOptions>
        <div>
          <el-form :inline="true" class="filter-form" :model="filterFormData">
            <el-form-item label="文件名称：">
              <el-input v-model="filterFormData.fileName"></el-input>
            </el-form-item>
            <el-form-item label="文件大小(≥)：">
              <el-input class="w80 mr5" v-model="filterFormData.fileSize"></el-input>
              <el-select class="w80" v-model="filterFormData.fileSizeUnit">
                <el-option v-for="item in unitList" :label="item" :value="item" :key="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="文件生成时间：" >
              <el-date-picker
                v-model="filterFormData.createTime"
                type="datetime"
                placeholder="选择具体的时间"
                format="YYYY-MM-DD HH:mm:ss"
                date-format="MMM DD, YYYY"
                time-format="HH:mm"
              />
            </el-form-item>

            <el-form-item >
              <el-button type="" @click="searchFun">搜索</el-button>
              <el-button type="primary" @click="deleteFileBatchFun">批量删除</el-button>
            </el-form-item>
          </el-form>
        </div>
      </template>

      <template #operate="{row}">
        <el-button link type="dnager" @click="deleteFileFun(row)">删除</el-button>
      </template>

    </BaseTable>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import BaseTable from '@/components/common/table/baseTable.vue';
import { listBigFileApi, batchDeleteBigFileApi } from '@/api/data/data';
import { ElMessage } from 'element-plus';

const baseTableRef = ref();

const filterFormData = reactive<any>({
  fileName: '',
  fileSize: '',
  fileSizeUnit: 'TB',
  createTime: '',
});

const fileName = ref('');
const createTime = ref('');
const fileSize = ref('');
const fileSizeUnit = ref('');

const unitList = ref(['TB', 'GB', 'MB', 'KB']);

const searchFun = () => {
  fileName.value = filterFormData.fileName;
  createTime.value = filterFormData.createTime;
  fileSize.value = filterFormData.fileSize;
  fileSizeUnit.value = filterFormData.fileSizeUnit;
};

const deleteFileBatchFun = async () => {
  const checkList:any = baseTableRef.value?.tableRef?.getCheckboxRecords() || [];

  if (checkList.length) {
    const param = checkList.map((item:any) => {
      return item.id;
    });

    const res:any = await batchDeleteBigFileApi(param.join(','));
    if (res && res.code === 200) {
      ElMessage.success('删除成功');
      searchFun();
    }

  } else {
    ElMessage.warning('请选择文件');

  }

};

const deleteFileFun = async (row:any) => {
  const param = [row.id];

  const res:any = await batchDeleteBigFileApi(param);
  if (res && res.code === 200) {
    ElMessage.success('删除成功');
    searchFun();
  }

};

</script>

<style lang="scss" scoped>
.setting-page{
  width: 100%;
  height: 100%;

  .filter-form{

.el-form-item{
  margin-bottom: 0 !important;

  .w80{
    width: 80px;
  }

  .mr5{
    margin-right: 5px;
  }
}
}

  }
</style>
