<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="文件名称" prop="fileViewname">
        <el-input v-model="queryParams.fileViewname" placeholder="请输入文件名称" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="文件类型" prop="fileType">
        <el-select v-model="queryParams.fileType" placeholder="请选择文件类型" clearable>
          <el-option label="水量" value="水量" />
          <el-option label="水质" value="水质" />
        </el-select>
      </el-form-item>
      <el-form-item label="业务类型" prop="bizType">
        <el-select v-model="queryParams.bizType" placeholder="请选择业务类型" clearable>
          <el-option label="江苏(JS)" value="JS" />
          <el-option label="上海(SH)" value="SH" />
          <el-option label="浙江(ZJ)" value="ZJ" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">查询</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
    </el-row>

    <el-table v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column prop="fileViewname" label="文件名称" width="450" />
      <el-table-column prop="fileType" label="文件类型" width="100">
        <template #default="scope">{{ getFileTypeLabel(scope.row.fileType) }}</template>
      </el-table-column>
      <el-table-column prop="bizType" label="业务类型" width="100">
        <template #default="scope">{{ getBizTypeLabel(scope.row.bizType) }}</template>
      </el-table-column>
      <el-table-column prop="fileSize" label="文件大小" width="120">
        <template #default="scope">{{ formatFileSize(scope.row.fileSize) }}</template>
      </el-table-column>
      <el-table-column prop="uploadBy" label="上传人" width="100" />
      <el-table-column prop="uploadTime" label="上传时间" width="180">
        <template #default="scope">{{ formatDate(scope.row.uploadTime) }}</template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" width="200" />
      <el-table-column label="操作" width="200 " align="center">
        <template #default="scope">
          <el-button size="mini" type="primary" icon="Download" @click="handleDownload(scope.row)" v-hasPermi="['yjjtgl:file:download']">下载</el-button>
          <el-button size="mini" type="text" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['yjjtgl:file:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script setup name="YjjtFile">
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { listFile, delFile, downloadFile } from '@/api/yjjt/file'

const loading = ref(false)
const tableData = ref([])
const total = ref(0)
const showSearch = ref(true)

const queryParams = reactive({
  pageNum: 1,
  pageSize: 15,
  fileViewname: '',
  fileType: '',
  bizType: ''
})

const getList = async () => {
  loading.value = true
  try {
    const response = await listFile(queryParams)
    tableData.value = response.rows
    total.value = response.total
  } catch (error) {
    console.error(error)
  } finally {
    loading.value = false
  }
}

const handleQuery = () => {
  queryParams.pageNum = 1
  getList()
}

const resetQuery = () => {
  queryParams.fileViewname = ''
  queryParams.fileType = ''
  queryParams.bizType = ''
  handleQuery()
}

const handleDelete = async (row) => {
  try {
    await ElMessageBox.confirm('确定删除该文件记录吗?', '提示', { type: 'warning' })
    await delFile(row.id)
    ElMessage.success('删除成功')
    getList()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除失败')
    }
  }
}

const handleDownload = async (row) => {
  try {
    const response = await downloadFile(row.id)
    const blob = new Blob([response])
    const url = window.URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url
    link.download = row.fileViewname
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    window.URL.revokeObjectURL(url)
    ElMessage.success('文件下载成功')
  } catch (error) {
    ElMessage.error('文件下载失败')
  }
}

const formatDate = (date) => {
  if (!date) return ''
  return new Date(date).toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

const formatFileSize = (size) => {
  if (!size || size === 0) return '0 B'
  const units = ['B', 'KB', 'MB', 'GB']
  let index = 0
  let fileSize = size
  while (fileSize >= 1024 && index < units.length - 1) {
    fileSize /= 1024
    index++
  }
  return fileSize.toFixed(2) + ' ' + units[index]
}

const getFileTypeLabel = (value) => {
  const labels = {
    '水量': '水量',
    '水质': '水质'
  }
  return labels[value] || value
}

const getBizTypeLabel = (value) => {
  const labels = {
    'SL': '水量数据',
    'SZ': '水质数据',
    'JS': '江苏',
    'SH': '上海',
    'ZJ': '浙江'
  }
  return labels[value] || value
}

const handleSelectionChange = () => {}

getList()
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.year-picker {
  width: 150px;
}

.source-select {
  width: 150px;
}

.type-select {
  width: 150px;
}

.mb8 {
  margin-bottom: 8px;
}

:deep(.el-table) {
  font-size: 14px;
}

:deep(.el-table th) {
  font-size: 14px;
  font-weight: bold;
}

:deep(.el-table td) {
  font-size: 14px;
}

:deep(.el-form-item__label) {
  font-size: 14px;
}

:deep(.el-input__inner) {
  font-size: 14px;
}

:deep(.el-button) {
  font-size: 14px;
}

:deep(.el-pagination) {
  font-size: 14px;
  margin-top: 15px;
}
</style>