<template>
  <div class="cxls02-search-table">
    <!-- 搜索区域 -->
    <div class="search-head">
      <el-form :inline="true">
        <el-form-item label="委托编号" prop="sampleEntrNo">
          <el-input v-model="search.sampleEntrNo" placeholder="请输入委托编号" size="mini"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" size="mini" @click="searchData">查询</el-button>
          <el-button icon="el-icon-refresh" type="info" plain size="mini" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 数据表格 -->
    <div class="table-container">
      <el-table
        v-loading="dataLoading"
        border
        :height="tableHeight"
        highlight-current-row
        :data="tableData"
        :cell-class-name="tableRowClassName"
        :header-cell-style="tableHeaderCellStyle"
      >
        <el-table-column type="index" label="序号" fixed="left" align="center" width="50"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="tcNo" label="电文号" align="center" min-width="100"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="sampleEntrNo" label="试样委托号(委验单号)" align="center" min-width="180"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="dealTimeFormat" label="处理时间" align="center" min-width="160"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="flagText" label="处理标志" align="center" min-width="100"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="dealResult" label="处理结果" align="center" min-width="200"></el-table-column>
      </el-table>
    </div>

    <!-- 分页区域 -->
    <div class="pagination-container">
      <el-pagination
        @size-change="pageSizeChange"
        @current-change="pageCurrentChange"
        :current-page="page.pageNum"
        :page-sizes="[20, 50, 100, 200, 500]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        background
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 搜索条件
      search: {
        sampleEntrNo: ''
      },
      // 表格数据
      tableData: [],
      // 加载状态
      dataLoading: false,
      // 表格高度
      tableHeight: 0,
      // 分页配置
      page: {
        pageSize: 20,
        pageNum: 1,
        total: 0
      }
    }
  },
  created() {
    // 初始化表格高度
    this.tableHeight = window.innerHeight - 160;
  },
  mounted() {
    // 页面加载后查询数据
    this.searchData();
  },
  methods: {
    // 格式化14位处理时间为标准格式
    formatDealTime(timeStr) {
      if (!timeStr || timeStr.length !== 14) return timeStr;
      return `${timeStr.slice(0,4)}-${timeStr.slice(4,6)}-${timeStr.slice(6,8)} ${timeStr.slice(8,10)}:${timeStr.slice(10,12)}:${timeStr.slice(12,14)}`;
    },

    // 处理标志文本转换
    getFlagText(flag) {
      return flag === '0' ? '成功' : flag === '1' ? '不成功' : '未知';
    },

    // 数据查询主方法
    searchData() {
      // 重置分页为第一页
      this.page.pageNum = 1;
      this.mainData();
    },

    // 接口请求数据
    mainData() {
      this.dataLoading = true;
      // 接口请求参数
      const params = {
        pageIndex: this.page.pageNum,
        pageSize: this.page.pageSize,
        sampleEntrNo: this.search.sampleEntrNo || ''
      };

      // 修正后的接口请求（修正原路径双斜杠问题，适配实际接口地址）
      this.axios.post('pass/testManagement/v1/iotmsgress/like/', params, { individualType: 'json' })
        .then(res => {
          if (res.code == 0 || res.code == 200) {
            // 赋值表格数据
            this.tableData = res.data.list.map(item => ({
              ...item,
              // 格式化处理时间
              dealTimeFormat: this.formatDealTime(item.dealTime),
              // 转换处理标志文本
              flagText: this.getFlagText(item.flag)
            }));
            // 赋值分页总条数
            this.page.total = res.data.total;
            this.dataLoading = false;
          } else {
            this.dataLoading = false;
            this.$message.error(res.message || res.resultMessage || '查询失败');
          }
        })
        .catch(e => {
          this.dataLoading = false;
          this.$message.error('接口请求异常，请稍后重试');
        });
    },

    // 重置搜索条件
    reset() {
      this.search.sampleEntrNo = '';
      this.searchData();
    },

    // 分页条数改变
    pageSizeChange(size) {
      this.page.pageSize = size;
      this.mainData();
    },

    // 分页页码改变
    pageCurrentChange(index) {
      this.page.pageNum = index;
      this.mainData();
    },

    // 表格行样式（成功绿色，不成功红色）
    tableRowClassName({ row, columnIndex }) {
      // 处理标志列设置样式
      if (columnIndex === 4) {
        return row.flag === '0' ? 'success-row' : row.flag === '1' ? 'error-row' : '';
      }
      return '';
    },

    // 表格表头样式
    tableHeaderCellStyle() {
      return 'color: #fff; background-color: #409EFF; border-bottom: 1px solid #DCDFE7;';
    }
  }
}
</script>

<style scoped>
.cxls02-search-table {
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}

.search-head {
  margin-bottom: 10px;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.table-container {
  margin-bottom: 10px;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
}

/* 行状态样式 */
.success-row {
  color: #67C23A;
  font-weight: 500;
}

.error-row {
  color: #F56C6C;
  font-weight: 500;
}
</style>
