<template>
  <div class="table-box">
    <ProTable ref="proTable" :columns="columns" row-key="ossId" :data-callback="dataCallback" :request-api="listOssApi">
      <!-- 表格 header 按钮 -->
      <template #tableHeader="scope">
        <el-button type="primary" v-auth="['system:oss:upload']" icon="Upload" plain @click="handleFile('file-upload-s3')"> 上传文件 </el-button>
        <el-button type="primary" v-auth="['system:oss:upload']" icon="Upload" plain @click="handleFile('img-upload-s3')"> 上传图片 </el-button>
        <el-button type="primary" v-auth="['system:oss:upload']" icon="Upload" plain @click="handleFile('img-upload')"> 本地图片 </el-button>
        <el-button type="primary" v-auth="['system:oss:upload']" icon="Upload" plain @click="handleFile('file-upload')"> 本地上传 </el-button>
        <el-button
          type="danger"
          v-auth="['system:oss:remove']"
          icon="Delete"
          plain
          :disabled="!scope.isSelected"
          @click="batchDelete(scope.selectedListIds)"
        >
          批量删除
        </el-button>
        <el-button
          :type="previewListResource ? 'danger' : 'warning'"
          v-auth="['system:oss:edit']"
          plain
          @click="handlePreviewListResource(!previewListResource)"
        >
          预览开关 : {{ previewListResource ? '禁用' : '启用' }}
        </el-button>
        <el-button type="info" v-auth="['system:oss:list']" icon="Operation" @click="handleOssConfig()"> 配置管理 </el-button>
      </template>
      <!-- 菜单图标 -->
      <template #url="scope">
        <ImagePreview
          v-if="previewListResource && checkFileSuffix(scope.row.fileSuffix)"
          :width="100"
          :height="100"
          :src="scope.row.url"
          :preview-src-list="[scope.row.url]"
        />
        <span v-if="!checkFileSuffix(scope.row.fileSuffix) || !previewListResource" v-text="scope.row.url" />
      </template>
      <!-- 表格操作 -->
      <template #operation="scope">
        <el-tooltip content="下载" placement="top">
          <el-button type="primary" link icon="Download" v-auth="['system:oss:download']" @click="handleDownload(scope.row)"> </el-button>
        </el-tooltip>
        <el-tooltip content="删除" placement="top">
          <el-button type="primary" link icon="Delete" v-auth="['system:oss:remove']" @click="deleteOss(scope.row)"> </el-button>
        </el-tooltip>
      </template>
    </ProTable>
    <UploadDialog ref="uploadDialogRef" />
  </div>
</template>

<script setup lang="tsx" name="Oss">
import { useHandleData } from '@/hooks/useHandleData'
import useDownload from '@/hooks/useDownload'
import UploadDialog from '@/components/UploadDialog/index.vue'

import ImagePreview from '@/components/ImagePreview/index.vue'
import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
import { listOssApi, delOssApi } from '@/api/modules/system/oss'

import { getConfigKeyApi, updateConfigByKeyApi } from '@/api/modules/system/config'
import { OssVO } from '@/api/interface/system/oss'
const router = useRouter()
// ProTable 实例
const proTable = ref<ProTableInstance>()

// 预览开关
const previewListResource = ref(true)

// dataCallback 是对于返回的表格数据做处理
const dataCallback = (res: any) => {
  getConfigKeyApi('sys.oss.previewListResource').then(
    res => (previewListResource.value = res?.data === undefined ? true : res.data.configValue === 'true')
  )
  return res
}

const handleOssConfig = () => {
  router.push('/system/oss-config/index')
}

const checkFileSuffix = (fileSuffix: string | string[]) => {
  const arr = ['.png', '.jpg', '.jpeg']
  const suffixArray = Array.isArray(fileSuffix) ? fileSuffix : [fileSuffix]
  return suffixArray.some(suffix => arr.includes(suffix.toLowerCase()))
}
const handlePreviewListResource = async (preview: boolean) => {
  const res = await getConfigKeyApi('sys.oss.previewListResource')
  let text = preview ? '启用' : '停用'
  getConfigKeyApi
  await useHandleData(
    updateConfigByKeyApi,
    { configKey: 'sys.oss.previewListResource', configValue: preview, version: res.data.version },
    `要${text}预览列表图片"配置吗?`
  )
  proTable.value?.getTableList()
}

// 删除OSS对象存储信息
const deleteOss = async (params: any) => {
  await useHandleData(delOssApi, params.ossId, `删除【${params.ossId}】OSS对象存储`)
  proTable.value?.getTableList()
}

// 批量删除OSS对象存储信息
const batchDelete = async (ids: string[]) => {
  await useHandleData(delOssApi, ids, '删除所选OSS对象存储信息')
  proTable.value?.clearSelection()
  proTable.value?.getTableList()
}

/** 下载按钮操作 */
const handleDownload = (row: OssVO) => {
  if (row.service === 'Local') {
    useDownload.localResource(row.url)
    return
  }
  useDownload.oss(row.ossId)
}

// 上传文件
const uploadDialogRef = ref<InstanceType<typeof UploadDialog> | null>(null)
const handleFile = (type: File.FileUploadType) => {
  const params = {
    title: '上传文件',
    type,
    getTableList: proTable.value?.getTableList
  }
  uploadDialogRef.value?.openDialog(params)
}

// 表格配置项
const columns = reactive<ColumnProps<any>[]>([
  { type: 'selection', fixed: 'left', width: 70 },
  {
    prop: 'fileName',
    label: '文件名',
    search: {
      el: 'input'
    },
    width: 420
  },
  {
    prop: 'originalName',
    label: '原名',
    search: {
      el: 'input'
    },
    width: 220
  },
  {
    prop: 'fileSuffix',
    label: '文件后缀名',
    search: {
      el: 'input'
    },
    width: 100
  },
  {
    prop: 'url',
    label: 'URL地址',
    showOverflowTooltip: false,
    search: {
      el: 'input'
    }
  },
  {
    prop: 'service',
    label: '服务商',
    search: {
      el: 'input'
    },
    width: 120
  },
  { prop: 'operation', label: '操作', width: 230, fixed: 'right' }
])
</script>
