<template>
  <div class="app-container">
    <el-card shadow="never">
      <template #header>
        <div class="card-header">
          <el-space>
            <el-button text @click="$router.back()">← 返回</el-button>
            <span>工程附件</span>
          </el-space>
          <el-upload
            ref="uploadRef"
            :action="uploadUrl"
            :data="{ fileCate: stcd }"
            :show-file-list="false"
            :before-upload="beforeUpload"
            :on-success="handleUploadSuccess"
            :on-error="handleUploadError">
            <el-button type="primary" size="small">上传文件</el-button>
          </el-upload>
        </div>
      </template>
      <div v-if="fileList.length === 0" class="empty-tip">
        <el-empty description="暂无附件文件" />
      </div>
      <div v-else class="file-list">
        <div v-for="file in fileList" :key="file.fileId" class="file-item" @mouseover="hoverId=file.fileId" @mouseout="hoverId=''">
          <el-icon size="16" color="#409EFF"><Document /></el-icon>
          <a :href="getDownloadUrl(file)" target="_blank" class="file-name">{{ file.fileName }}</a>
          <span class="file-size">{{ formatSize(file.fileSize) }}</span>
          <el-button v-show="hoverId===file.fileId" type="danger" link size="small" @click.stop="handleDeleteFile(file)">删除</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script setup name="StationFile">
import { getDocFileList, delDocFile } from '@/api/slgc/doc/index'
const route = useRoute()
const { proxy } = getCurrentInstance()
const uploadRef = ref(null)
const stcd = ref(route.query.stcd || '')
const fileList = ref([])
const hoverId = ref('')
const uploadUrl = ref('/slgc/doc-file/upload')

function loadFiles() {
  getDocFileList({ fileCate: stcd.value }).then(r => { fileList.value = r.rows || [] })
}
function getDownloadUrl(file) { return `/common/download?fileName=${encodeURIComponent(file.filePath)}` }
function formatSize(size) {
  if (!size) return ''
  const s = Number(size)
  if (s < 1024) return s + ' B'
  if (s < 1048576) return (s / 1024).toFixed(1) + ' KB'
  return (s / 1048576).toFixed(1) + ' MB'
}
function beforeUpload(file) {
  const maxSize = 50 * 1024 * 1024
  if (file.size > maxSize) {
    ElMessage.error('文件大小不能超过 50MB')
    return false
  }
  return true
}
function handleUploadSuccess(res) {
  if (res.code === 200) {
    ElMessage.success('上传成功')
    loadFiles()
  } else {
    ElMessage.error(res.msg || '上传失败')
  }
}
function handleUploadError() { ElMessage.error('上传失败') }
function handleDeleteFile(file) {
  proxy.$modal.confirm('确认删除"' + file.fileName + '"？').then(() => {
    delDocFile(file.fileId).then(() => { ElMessage.success('删除成功'); loadFiles() })
  })
}
onMounted(() => { loadFiles() })
</script>
<style scoped>
.card-header { font-weight:600;font-size:16px;display:flex;justify-content:space-between;align-items:center; }
.file-list { padding: 8px 0; }
.file-item { display: flex; align-items: center; padding: 8px 12px; border-bottom: 1px solid #f0f0f0; }
.file-item:hover { background: #fafafa; }
.file-name { margin-left: 8px; flex: 1; color: #409EFF; text-decoration: none; font-size: 14px; }
.file-name:hover { text-decoration: underline; }
.file-size { color: #999; font-size: 12px; margin-right: 12px; }
</style>
