<!-- 资料查询 -->
<template>
  <div class="app-container">
    <!-- start: 查询条件 -->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="文件名称" prop="wjmc">
        <el-input v-model="queryParams.wjmc" placeholder="请输入文件名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="资料类型" prop="zllx">
        <el-select v-model="queryParams.zllx" placeholder="请选择资料类型" clearable>
          <el-option
            v-for="item in zllxOptions"
            :key="item.id"
            :label="item.lxmc"
            :value="item.lxmc">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="项目名称" prop="xmmc">
        <el-input v-model="queryParams.xmmc" placeholder="请输入项目名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- end: 查询条件 -->

    <!-- start: 数据表格 -->
    <el-table border v-loading="loading" :data="zlcxList">
      <el-table-column label="项目名称" align="center" prop="xmmc" min-width="150" show-overflow-tooltip />
      <el-table-column label="文件名称" align="center" prop="wjmc" min-width="200" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-button type="text" @click="handleDownload(scope.row)" style="padding: 0; color: #409EFF;">
            {{ scope.row.wjmc }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="资料类型" align="center" prop="zllx" min-width="120" show-overflow-tooltip />

      <el-table-column label="上传时间" align="center" prop="createdTime" min-width="170" show-overflow-tooltip />
      <el-table-column label="修改时间" align="center" prop="updateTime" min-width="170" show-overflow-tooltip />
    </el-table>
    <!-- end: 数据表格 -->

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

<script>
import { listZlcx } from "@/api/zlcx/zlcx"
import { selectZllx } from "@/api/yscgZllx/zllx"

export default {
  name: 'ZlcxIndex',
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 资料查询表格数据
      zlcxList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        wjmc: null,
        zllx: null,
        xmmc: null
      },
      // 资料类型选项
      zllxOptions: []
    }
  },
  created() {
    // 初始化资料类型选项
    this.getZllxOptions()
    // 获取列表数据
    this.getList()
  },
  methods: {
    /** 查询资料列表 */
    getList() {
      this.loading = true
      listZlcx(this.queryParams).then(response => {
        this.zlcxList = response.rows || []
        this.total = response.total || 0
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    /** 获取资料类型选项 */
    getZllxOptions() {
      selectZllx().then(response => {
        this.zllxOptions = response.rows || []
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        wjmc: null,
        zllx: null,
        xmmc: null
      }
      this.handleQuery()
    },
    /** 下载文件 */
    handleDownload(row) {
      // 检查是否有文件链接
      if (!row.wjlj) {
        this.$modal.msgWarning('该文件没有下载链接')
        return
      }
      
      // 处理多个文件的情况（逗号分隔）
      const fileNames = row.wjmc ? String(row.wjmc).split(',').filter(Boolean) : []
      const fileLinks = String(row.wjlj).split(',').filter(Boolean)
      
      if (fileLinks.length === 0) {
        this.$modal.msgWarning('该文件没有下载链接')
        return
      }
      
      // 如果只有一个文件，直接下载
      if (fileLinks.length === 1) {
        this.downloadFile(fileLinks[0], fileNames[0] || '文件')
        return
      }
      
      // 如果有多个文件，显示选择列表
      const fileOptions = fileLinks.map((link, index) => {
        return {
          name: fileNames[index] || `文件${index + 1}`,
          link: link
        }
      })
      
      // 使用MessageBox选择要下载的文件
      const h = this.$createElement
      const fileListHtml = fileOptions.map((file, index) => {
        return h('div', {
          style: {
            padding: '8px 0',
            cursor: 'pointer',
            color: '#409EFF'
          },
          on: {
            click: () => {
              this.downloadFile(file.link, file.name)
              this.$msgbox.close()
            }
          }
        }, file.name)
      })
      
      this.$msgbox({
        title: '请选择要下载的文件',
        message: h('div', null, fileListHtml),
        showCancelButton: false,
        confirmButtonText: '取消'
      }).catch(() => {})
    },
    /** 执行文件下载 */
    downloadFile(url, fileName) {
      if (!url) {
        this.$modal.msgWarning('文件链接无效')
        return
      }
      
      // 如果wjlj是文件名（不含路径），使用download插件
      // 如果wjlj是完整路径，直接下载
      if (url.includes('/') || url.startsWith('http')) {
        // 完整路径，创建a标签进行下载
        const link = document.createElement('a')
        link.style.display = 'none'
        const fullUrl = url.startsWith('http') ? url : (process.env.VUE_APP_BASE_API + url)
        link.href = fullUrl
        link.setAttribute('download', fileName)
        link.setAttribute('target', '_blank')
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        this.$modal.msgSuccess('开始下载文件')
      } else {
        // 文件名，使用下载插件
        this.$download.name(url)
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
