<template>
  <div class="apaas-custom-report-check custom-page">
    <!-- 顶部筛选区域 -->
    <div class="page-search-panel">
      <el-form class="search-list">
        <el-form-item label="厂家:" class="search-component">
          <el-input v-model="searchPanelValue.manufacturer" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="型号:" class="search-component">
          <el-input v-model="searchPanelValue.model" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="产品编号:" class="search-component">
          <el-input v-model="searchPanelValue.productNo" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="板块:" class="search-component">
          <el-input v-model="searchPanelValue.module" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="平台:" class="search-component">
          <el-input v-model="searchPanelValue.platform" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="系列:" class="search-component">
          <el-input v-model="searchPanelValue.series" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="细分市场:" class="search-component">
          <el-input v-model="searchPanelValue.segmentMarket" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="项目名称:" class="search-component">
          <el-input v-model="searchPanelValue.projectName" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="项目编号:" class="search-component">
          <el-input v-model="searchPanelValue.projectNo" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="领域/模块:" class="search-component">
          <el-input v-model="searchPanelValue.fieldModule" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="标题:" class="search-component">
          <el-input v-model="searchPanelValue.title" placeholder="请输入" />
        </el-form-item>
      </el-form>

      <div class="search-button-group">
        <el-button @click="resetSearch">
          重置
        </el-button>
        <el-button type="primary" @click="handleSearch">
          查询
        </el-button>
        <span class="search-tip">//只展示审批完成的数据</span>
      </div>
    </div>

    <!-- 数据表格 -->
    <div class="page-data-list">
      <x-vxe-table
        ref="vxeTable"
        :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="rowClickEvent"
        @size-change="pageSizeChange"
        @current-page-change="currentChange"
        @select-data-change="selectDataChange"
      >
        <template
          v-for="(colConfig, index) in tableConfig.colConfigs"
          v-slot:[colConfig.customSlot]="{ row, rowIndex }"
        >
          <div v-if="colConfig.customSlot === 'fileName'" :key="index + '' + rowIndex">
            <a
              v-if="row.fileName"
              href="javascript:void(0)"
              class="el-link el-link--primary"
              @click.stop="handleFileClick(row)"
            >{{ row.fileName }}</a>
          </div>
          <div v-if="colConfig.customSlot === 'operation'" :key="index + '' + rowIndex">
            <a
              href="javascript:void(0)"
              class="el-link el-link--primary"
              @click.stop="handleDownload(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: 'ReportCheck',
  data() {
    return {
      searchPanelValue: {
        manufacturer: '',
        model: '',
        productNo: '',
        module: '',
        platform: '',
        series: '',
        segmentMarket: '',
        projectName: '',
        projectNo: '',
        fieldModule: '',
        title: ''
      },
      tableData: [],
      pagination: { currentPage: 1, pageSize: 10, total: 0 }
    }
  },
  computed: {
    tableConfig() {
      return {
        rowDraggable: false,
        colConfigs: [
          { prop: 'title', label: '标题', showOverflowTooltip: true, minWidth: '120' },
          { prop: 'manufacturerName', label: '厂家名称(全称)', showOverflowTooltip: true, minWidth: '150' },
          { prop: 'productModel', label: '产品型号(全称)', showOverflowTooltip: true, minWidth: '150' },
          { prop: 'fieldModule', 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: 'segmentMarket', label: '细分市场', showOverflowTooltip: true, minWidth: '120' },
          { prop: 'projectName', label: '项目名称', showOverflowTooltip: true, minWidth: '140' },
          { prop: 'projectNo', label: '项目编号', showOverflowTooltip: true, minWidth: '120' },
          { prop: 'uploadTime', label: '上传时间', showOverflowTooltip: true, minWidth: '150' },
          { prop: 'fileName', label: '文件名', customSlot: 'fileName', showOverflowTooltip: true, minWidth: '150' },
          { prop: 'operation', label: '操作', customSlot: 'operation', align: 'center', width: '80', fixed: 'right' }
        ],
        seqType: '',
        seqConfig: {},
        layout: 'total, prev, pager, next, sizes, jumper',
        pageConfig: {}
      }
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    pageSizeChange(size) {
      this.pagination.pageSize = size
      this.pagination.currentPage = 1
      this.loadData()
    },
    rowClickEvent(row) {
      console.warn(row)
    },
    handleFileClick(row) {
      this.$message && this.$message.info && this.$message.info('点击文件名：' + (row.fileName || ''))
    },
    handleDownload(row) {
      this.$message && this.$message.info && this.$message.info('下载：' + (row.fileName || ''))
    },
    currentChange(currentPage) {
      this.pagination.currentPage = currentPage
      this.loadData()
    },
    selectDataChange(data) {
      this.$emit('select-data-change', data)
    },
    resetSearch() {
      this.searchPanelValue = {
        manufacturer: '',
        model: '',
        productNo: '',
        module: '',
        platform: '',
        series: '',
        segmentMarket: '',
        projectName: '',
        projectNo: '',
        fieldModule: '',
        title: ''
      }
      this.handleSearch()
    },
    handleSearch() {
      this.pagination.currentPage = 1
      this.loadData()
    },
    loadData() {
      // 模拟数据
      const colConfigs = this.tableConfig.colConfigs
      const dataProps = colConfigs
        .filter(col => col.prop && col.prop !== 'operation')
        .map(col => col.prop)

      this.tableData = Array.from({ length: 50 }, (_, index) => {
        const row = {}

        dataProps.forEach(prop => {
          switch (prop) {
            case 'title':
              row[prop] = 'XXXX'
              break
            case 'manufacturerName':
              row[prop] = index % 2 === 0 ? 'XXXXXXXX' : 'XXXXX'
              break
            case 'productModel':
              row[prop] = ''
              break
            case 'fieldModule':
              row[prop] = ''
              break
            case 'productNo':
              row[prop] = ''
              break
            case 'module':
              row[prop] = ''
              break
            case 'platform':
              row[prop] = ''
              break
            case 'series':
              row[prop] = ''
              break
            case 'segmentMarket':
              row[prop] = ''
              break
            case 'projectName':
              row[prop] = ''
              break
            case 'projectNo':
              row[prop] = ''
              break
            case 'uploadTime':
              {
                const d = new Date()
                d.setDate(d.getDate() - index)
                row[prop] = d.toLocaleDateString('zh-CN').replace(/\//g, '-') + ' ' + d.toLocaleTimeString('zh-CN', { hour12: false }).slice(0, 8)
              }
              break
            case 'fileName':
              row[prop] = index % 3 === 2 ? '' : 'XXXXXX文件名'
              break
            default:
              row[prop] = ''
          }
        })

        return row
      })

      // 根据分页过滤数据
      const start = (this.pagination.currentPage - 1) * this.pagination.pageSize
      const end = start + this.pagination.pageSize
      this.tableData = this.tableData.slice(start, end)
      this.pagination.total = 50
    }
  }
}
</script>

<style lang="scss" scoped>
.apaas-custom-report-check {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;

  .page-search-panel {
    display: flex;
    background: white;
    padding: 8px 20px 24px 20px;
    position: relative;
    flex-shrink: 0;

    .search-list {
      display: flex;
      flex: 1;
      max-width: calc(100% - 140px);
      flex-wrap: wrap;

      .search-component {
        width: calc(25% - 32px);
        padding: 24px 0;
        padding-right: 32px;
        padding-bottom: 0;
        margin-bottom: 0;

        ::v-deep .el-form-item {
          margin-bottom: 0;

          .el-form-item__label {
            font-size: 12px;
            line-height: unset;
            margin-bottom: 8px;
            color: #303133;
          }
        }

        ::v-deep .el-form-item__content {
          font-size: 12px;
          line-height: 32px;
        }
      }
    }

    .search-button-group {
      position: absolute;
      bottom: 24px;
      right: 20px;
      display: flex;
      align-items: center;
      gap: 8px;

      .search-tip {
        color: #f56c6c;
        font-size: 12px;
        margin-left: 8px;
      }
    }
  }

  .page-data-list {
    display: flex;
    padding: 20px;
    flex: 1;
    overflow: hidden;

    .x-empty-page {
      top: 0;
    }

    ::v-deep .el-link--primary {
      color: #409eff;
      font-size: 14px;
      text-decoration: none;

      &:hover {
        color: #66b1ff;
        text-decoration: underline;
      }
    }
  }
}
</style>
