<template>
  <el-dialog v-model="visible" :width="width" append-to-body draggable show-close :close-on-click-modal = "false">
    <template #header>
      <div class="dialog-title-container">
        <span class="title-label" style="color: #fff;">
          <el-icon>
            <Document />
          </el-icon> 附件信息</span>
        <!-- <el-icon @click="close">
          <Close />
        </el-icon> -->
      </div>
    </template>
    <div class="dialog-list-container">
      <el-table ref="dbTable" :data="list" size="small" border height="400px" header-row-class-name="list-header-row"
        row-class-name="list-row" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="40" align="center" />
        <el-table-column type="index" label="序号" width="46" align="center" />
        <el-table-column label="文件名" prop="originalFileName" align="center" show-overflow-tooltip>
          <template #default="scope">
            <el-button size="small" type="primary" link @click="openFile(scope.row)">{{ scope.row.originalFileName
            }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination v-show="total > 0" :total="total" v-model:page="query.pageNum" v-model:limit="query.pageSize"
      @pagination="loadData" style="background-color: rgba(0, 0, 0, 0);" />
  </el-dialog>
</template>
<script setup>
import { reactive } from 'vue';
import { listFile } from '@/api/system/file'

const props = defineProps(
  {
    width: {
      type: String,
      default: '800px'
    }
  }
)

// import api from '@/api/biz/fileStorage'
const data = reactive({
  visible: false,
  list: [],
  total: 0,
  query: {
    name: '',
    total: 0,
    pageSize: 15,
    pageNum: 1
  },
  selection: [],
  baseUrl: import.meta.env.VITE_APP_BASE_API,
  options: {}
})
const { visible, list, query, selection, baseUrl, options, total } = toRefs(data)

function open(arg) {
  visible.value = true
  options.value = arg
  loadData()
}
/**
 * 对话框关闭 事件
 */
function close() {
  visible.value = false
}
/**
 * 加载数据
 */
const loadData = async () => {
  const res = await listFile({ ...query.value, ...options.value })
  list.value = res.rows
  total.value = res.total
}
/**
 * 列表checkbox列选择 事件
 */
function handleSelectionChange(selection) {
  selection.value = selection
}
/**
 * 搜索 事件
 */
function handleSearch() {
  loadData()
}
function openFile(attach) {
  window.open(`${baseUrl.value}/${attach.fileUrl}`, attach.fileName)
}

defineExpose({
  open
})
</script>
