<template>
  <div class="gl-page-content setting-page">
    <FileTable
      tableName="RECYCLE_BIN_FILE"
      ref="baseTableRef"
      fullHeight
      showCheckbox
      :api="listRecycleBinApi"
      :actionList="actionList"
      :default-actions="[]"
      @checkbox-all="checkboxChangeFun"
      @checkbox-change="checkboxChangeFun"
    >
      <template #objectKey="{ row }">
        {{ formatObjectKey(row.objectKey) }}
      </template>
      <template #fileSize="{ row }">
        {{ row.fileSize ? formatFileSize(row.fileSize) : '--' }}
      </template>
      <template #leftOptions>
        <el-button type="default" :loading="deleteAllLoading" icon="delete" @click="clearAll"
          >清空回收站</el-button
        >
        <el-button
          type="default"
          icon="delete"
          @click="clickDeleteFun"
          :disabled="chosenData.length === 0"
        >
          批量删除
        </el-button>
        <el-button
          type="primary"
          icon="RefreshLeft"
          :disabled="chosenData.length === 0"
          @click="clickRestore"
        >
          还原选定文件</el-button
        >
      </template>
    </FileTable>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
// import BaseTable from '@/components/common/table/baseTable.vue';
import FileTable from '@/components/common/fileTable/index.vue';
import { formatFileSize } from '@/utils/file';
import {
  listRecycleBinApi,
  restoreFromRecycleApi,
  permanentDeleteFromRecycleApi,
} from '@/api/data/data';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useI18n } from 'vue-i18n';

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

const formatObjectKey = (key: string) => {
  const parts = key.split('/');
  return '/' + parts.slice(1, -1).join('/');
};

// 操作栏
const actionList = [
  {
    title: t('通用.还原'),
    type: 'primary',
    click: (row: any) => {
      clickRestore('single', row);
    },
  },
  {
    title: t('通用.删除'),
    type: 'danger',
    needConfirm: true,
    confirmTip: t('通用.确认删除吗'),
    confirmTipFun: (row: any) => {
      return `该操作将会永久删除“${row.originalName}”，是否确认删除？`;
    },
    click: (row: any) => {
      deleteFileFun(row);
    },
  },
];

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

// 点击批量删除
const clickDeleteFun = () => {
  ElMessageBox.confirm('是否确认永久删除所选文件？', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    const ids = chosenData.value.map((item: any) => {
      return item.id;
    });
    deleteFileBatchFun(ids);
  });
};
// 清空回收站
const deleteAllLoading = ref(false);
const clearAll = () => {
  ElMessageBox.confirm('该操作会删除回收站中所有文件，是否继续？', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    deleteAllLoading.value = true;
    deleteFileBatchFun([]);
  });
};
// 删除操作
const deleteFileBatchFun = async (arr: any) => {
  const param = { ids: arr };
  permanentDeleteFromRecycleApi(param)
    .then((res: any) => {
      if (res && res.code === 200) {
        ElMessage.success('删除成功');
        deleteAllLoading.value = false;
        chosenData.value = [];
        baseTableRef.value.resetFun(); // 刷新数据
      }
    })
    .catch(() => {
      deleteAllLoading.value = false;
    });
};
// 单个删除操作
const deleteFileFun = async (row: any) => {
  const param = {
    ids: [row.id],
  };
  const res: any = await permanentDeleteFromRecycleApi(param);
  if (res && res.code === 200) {
    ElMessage.success('删除成功');
    baseTableRef.value.resetFun(); // 刷新数据
  }
};

// 参数:type  single 单个还原, row当前行
const clickRestore = (type?: any, row?: any) => {
  ElMessageBox.confirm('是否确认还原？', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    const ids = type === 'single' ? [row.id] : chosenData.value.map((item: any) => item.id);
    const params = { ids };
    restoreFromRecycleApi(params).then((res: any) => {
      if (res && res.code === 200) {
        ElMessage.success('还原成功');
        chosenData.value = [];
        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%;
    }
  }
  .icon-img {
    width: 14px;
    height: 14px;
  }
}
.radio-nomal {
  height: 36px;
  margin-top: 10px;
  // background-color: var(--el-color-primary-light-9);
  font-size: 16px;
  border-radius: 4px;
  line-height: 30px;
  padding-left: 10px;
  border-radius: 4px;
  cursor: pointer;
  background-color: var(--el-color-info-light-9);
  border: 1px solid transparent;
  .icon-img-all {
    width: 20px;
    height: 20px;
    transform: translateY(3px);
  }
  .ignore {
    transform: translateY(2px) rotate(-45deg);
  }
}
.active {
  background-color: var(--el-color-primary-light-9);
  border: 1px solid var(--el-color-primary);
}
</style>
