<template>
  <div class="benchmark-report-tab tab-content">
    <!-- 搜索筛选区域 -->
    <div class="page-search-panel">
      <div class="search-fields">
        <div class="search-row">
          <div class="search-field">
            <span class="field-label">厂家</span>
            <el-input v-model="searchData.manufacturer" placeholder="请输入" />
          </div>
          <div class="search-field">
            <span class="field-label">型号</span>
            <el-input v-model="searchData.model" placeholder="请输入" />
          </div>
          <div class="search-field">
            <span class="field-label">产品编号</span>
            <el-input v-model="searchData.productNo" placeholder="请输入" />
          </div>
          <div class="search-field">
            <span class="field-label">版块</span>
            <el-input v-model="searchData.module" placeholder="请输入" />
          </div>
        </div>
        <div class="search-row">
          <div class="search-field">
            <span class="field-label">平台</span>
            <el-input v-model="searchData.platform" placeholder="请输入" />
          </div>
          <div class="search-field">
            <span class="field-label">系列</span>
            <el-input v-model="searchData.series" placeholder="请输入" />
          </div>
          <div class="search-field">
            <span class="field-label">细分市场</span>
            <el-input v-model="searchData.subMarket" placeholder="请输入" />
          </div>
          <div class="search-field">
            <span class="field-label">项目名称</span>
            <el-input v-model="searchData.projectName" placeholder="请输入" />
          </div>
        </div>
        <div class="search-row">
          <div class="search-field">
            <span class="field-label">项目编号</span>
            <el-input v-model="searchData.projectNo" placeholder="请输入" />
          </div>
          <div class="search-field">
            <span class="field-label">领域/模块</span>
            <el-select v-model="searchData.domain" placeholder="请选择" clearable>
              <el-option label="选项1" value="1" />
              <el-option label="选项2" value="2" />
            </el-select>
          </div>
          <div class="search-field">
            <span class="field-label">标题</span>
            <el-input v-model="searchData.title" placeholder="请输入" />
          </div>
          <div class="search-actions">
            <el-button type="primary" @click="handleSearch">
              查询
            </el-button>
            <el-button @click="resetSearch">
              重置
            </el-button>
          </div>
        </div>
      </div>
    </div>


    <!-- 数据表格 -->
    <div class="page-data-list">
      <x-vxe-table
        ref="reportTable"
        :border="true"
        :seqWidth="40"
        :colConfigs="tableConfig.colConfigs"
        :tableData="tableData"
        :rowDraggable="tableConfig.rowDraggable"
        :seqType="tableConfig.seqType"
        :pagination="pagination"
        :layout="tableConfig.layout"
        :seqConfig="tableConfig.seqConfig"
        :autoSize="tableConfig.autoSize"
        :pageConfig="tableConfig.pageConfig"
        class="block-table"
        @table-row-click="handleRowClick"
        @size-change="handlePageSizeChange"
        @current-page-change="handleCurrentChange"
        @select-data-change="handleSelectChange"
      >
        <template
          v-for="(colConfig, index) in tableConfig.colConfigs"
          v-slot:[colConfig.customSlot]="{ row }"
        >
          <div v-if="colConfig.customSlot === 'options'" :key="index" class="operation-links">
            <a
              href="javascript:void(0)"
              class="el-link el-link--primary"
              @click.stop="handleQueryReport(row)"
            >查询</a>
            <span style="margin: 0 8px;">|</span>
            <a
              href="javascript:void(0)"
              class="el-link el-link--primary"
              @click.stop="handleDownloadReport(row)"
            >下载</a>
          </div>
        </template>
        <template slot="empty">
          <div class="table-empty">
            <x-empty-page></x-empty-page>
          </div>
        </template>
      </x-vxe-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BenchmarkReport',
  data() {
    return {
      searchData: {
        manufacturer: '',
        model: '',
        productNo: '',
        module: '',
        platform: '',
        series: '',
        subMarket: '',
        projectName: '',
        projectNo: '',
        domain: '',
        title: ''
      },
      tableData: [],
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      selectedRows: []
    }
  },
  computed: {
    tableConfig() {
      return {
        rowDraggable: false,
        colConfigs: [
          { prop: 'title', label: '标题', showOverflowTooltip: true, minWidth: '100' },
          { prop: 'manufacturerFullName', label: '厂家名称(全称)', showOverflowTooltip: true, minWidth: '150' },
          { prop: 'productFullName', label: '产品型号(全称)', showOverflowTooltip: true, minWidth: '150' },
          { prop: 'domain', label: '领域/模块', showOverflowTooltip: true, minWidth: '120' },
          { prop: 'productNo', label: '产品编号', showOverflowTooltip: true, minWidth: '120' },
          { prop: 'module', label: '板块', showOverflowTooltip: true, minWidth: '100' },
          { prop: 'platform', label: '平台', showOverflowTooltip: true, minWidth: '100' },
          { prop: 'series', label: '系列', showOverflowTooltip: true, minWidth: '100' },
          { prop: 'subMarket', label: '细分市场', showOverflowTooltip: true, minWidth: '120' },
          { prop: 'projectName', label: '项目名称', showOverflowTooltip: true, minWidth: '120' },
          { prop: 'projectNo', label: '项目编号', showOverflowTooltip: true, minWidth: '120' },
          { prop: 'uploadTime', label: '上传时间', showOverflowTooltip: true, minWidth: '150' },
          { prop: 'fileName', label: '文件名', showOverflowTooltip: true, minWidth: '150' },
          { prop: 'options', label: '操作', customSlot: 'options', align: 'center', width: '120', fixed: 'right' }
        ],
        seqType: 'checkbox',
        seqConfig: { fixed: true },
        layout: 'total, prev, pager, next, jumper, sizes',
        autoSize: false,
        pageConfig: {}
      }
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    resetSearch() {
      this.searchData = {
        manufacturer: '',
        model: '',
        productNo: '',
        module: '',
        platform: '',
        series: '',
        subMarket: '',
        projectName: '',
        projectNo: '',
        domain: '',
        title: ''
      }
      this.handleSearch()
    },
    handleSearch() {
      this.loadData()
    },
    handleBatchDownload() {
      if (this.selectedRows.length === 0) {
        this.$message({
          type: 'warning',
          message: '请先选择要下载的报告'
        })
        return
      }
      this.$message({
        type: 'info',
        message: `批量下载 ${this.selectedRows.length} 个报告`
      })
    },
    handleRowClick(row) {
      this.$message({
        type: 'info',
        message: `点击行: ${row.title}`
      })
    },
    handlePageSizeChange(size) {
      this.pagination.pageSize = size
      this.loadData()
    },
    handleCurrentChange(currentPage) {
      this.pagination.currentPage = currentPage
      this.loadData()
    },
    handleSelectChange(selectedRows) {
      this.selectedRows = selectedRows
    },
    loadData() {
      const mockData = []
      const titles = ['Y1001', 'Y1002', 'Y1003', 'Y1004', 'Y1005', 'Y1006', 'Y1007', 'Y1008', 'Y1009', 'Y1010']
      const manufacturers = ['XXXXXX', 'XXXX']

      for (let i = 0; i < 10; i++) {
        mockData.push({
          id: i + 1,
          title: titles[i] || `Y${1000 + i + 1}`,
          manufacturerFullName: manufacturers[i % 2] || 'XXXXXX',
          productFullName: '-',
          domain: '-',
          productNo: '-',
          module: '-',
          platform: '-',
          series: '-',
          subMarket: '-',
          projectName: '-',
          projectNo: '-',
          uploadTime: '-',
          fileName: `XXXXX文件名${i + 1}`
        })
      }

      this.tableData = mockData
    }
  }
}
</script>

<style lang="scss" scoped>
.benchmark-report-tab {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;

  .page-search-panel {
    background: white;
    padding: 16px 24px;
    border-bottom: 1px solid #ebeef5;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;

    .search-fields {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
    }

    .search-row {
      display: flex;
      align-items: flex-end;
      gap: 40px;
      flex-wrap: nowrap;
      width: 100%;
    }

    .search-field {
      display: flex;
      align-items: center;
      gap: 12px;

      .field-label {
        font-size: 14px;
        font-weight: 600;
        color: #303133;
        white-space: nowrap;
        min-width: 64px;
        text-align: right;
      }

      .el-input,
      .el-select {
        width: 160px;
      }

      :deep(.el-input__inner),
      :deep(.el-select .el-input__inner) {
        height: 32px;
        line-height: 32px;
      }
    }

    .search-actions {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-left: auto;

      :deep(.el-button) {
        padding: 0 16px;
        font-size: 14px;
        border-radius: 4px;
        height: 32px;
        line-height: 32px;
      }
    }

    .search-row:not(:last-child) {
      align-items: center;
    }
  }

  .batch-action-panel {
    background: white;
    padding: 16px 20px;
    margin-top: 0;
    border-bottom: 1px solid #ebeef5;

    .el-button {
      padding: 8px 16px;
      font-size: 14px;
      border-radius: 4px;
      height: 32px;
      line-height: 1;
    }
  }

  .page-data-list {
    padding: 20px;
    background: #f5f7fa;
    flex: 1;
    overflow-y: auto;

    .operation-links {
      display: flex;
      align-items: center;
      justify-content: center;

      .el-link {
        font-size: 14px;
      }
    }
  }
}
</style>
