<template>
  <!-- 标注样本列表页面 -->
  <el-card class="labeling-sample-container">
    <!-- 表格容器 -->
    <div class="table-container">
      <TableModel
        :formLabel="formLabel"
        :showOperation="false"
        :showRightTools="false"
        :handleShow="false"
        ref="sampleTableRef"
        :columnsList="columnsList"
        :request-api="labelingListAPI"
        :sendParams="sendParams"
        :handleColWidth="0"
      >
        <template slot="tableActions">
          <el-button
            type="default"
            class="action-btn view-btn"
            v-hasPermi="['labeling:sample:view']"
            @click="handleView"
          >
            查看
          </el-button>
          <el-button
            type="primary"
            class="action-btn label-btn"
            v-hasPermi="['labeling:sample:label']"
            @click="handleLabel"
          >
            标注
          </el-button>
        </template>

        <!-- 自定义列：标注状态 -->
        <template slot="labelingStatus" slot-scope="{ data }">
          <span>{{ getStatusText('labelingStatus', data.labelingStatus) }}</span>
        </template>

        <!-- 自定义列：审核状态 -->
        <template slot="auditStatus" slot-scope="{ data }">
          <span>{{ getStatusText('auditStatus', data.auditStatus) }}</span>
        </template>

        <!-- 自定义列：是否为无效数据 -->
        <template slot="isInvalidData" slot-scope="{ data }">
          <span>{{ getStatusText('isInvalidData', data.isInvalidData) }}</span>
        </template>
      </TableModel>
    </div>
  </el-card>
</template>

<script>
import TableModel from '@/components/TableModel2'
import { columnsList, formLabel, statusDict } from './config'
import { labelingListAPI } from '@/api/data/labeling'
import {decryptWithSM4, encryptWithSM4} from '@/utils/sm' // 解密路由中的任务ID

export default {
  name: 'LabelingSampleList',
  components: { TableModel },
  data() {
    return {
      labelingTaskId: this.convertToNumber(decryptWithSM4(this.$route.query.labelingTaskId || '')),
      labelingTemplate: decryptWithSM4(this.$route.query.labelingTemplate || ''),

      // 表格配置
      formLabel,
      columnsList,
      labelingListAPI,
      // 接口请求参数（含路由传参的任务ID）
      sendParams: {
        labelingTaskId: '', // 标注任务ID（从路由解密获取）
        labelingStatus: '', // 标注状态筛选
        auditStatus: ''     // 审核状态筛选
      }
    }
  },
  created() {
    // 初始化：从路由获取加密的任务ID并解密
    this.initTaskId()
  },
  methods: {
    convertToNumber(value) {
      if (!value || value === '' || value === 'undefined' || value === 'null') {
        return '';
      }
      const num = Number(value);
      return isNaN(num) ? '' : num;
    },
    // 从路由参数解密获取标注任务ID
    initTaskId() {
      const { labelingTaskId } = this.$route.query
      if (labelingTaskId) {
        // 解密SM4加密的任务ID（和任务列表页的加密逻辑一致）
        this.sendParams.labelingTaskId = this.convertToNumber(decryptWithSM4(this.$route.query.labelingTaskId || ''))
        console.log('sendParams',this.sendParams)
        // 初始化后刷新表格
        this.refreshTable()
      }
    },

    // 获取状态文本（通用方法）
    getStatusText(type, value) {
      return statusDict[type][value] || '/'
    },

    // 刷新表格数据
    refreshTable() {
      if (this.$refs.sampleTableRef) {
        this.$refs.sampleTableRef.getTableList()
      }
    },

    // 查看按钮点击事件（支持选中行/批量查看）
    handleView() {
      const labelingTaskIdStr = String(this.labelingTaskId)
      if (this.labelingTemplate === '1' || this.labelingTemplate === '2') {
        this.$router.push({
          name: 'ClassificationDetail',
          query: {
            labelingTaskId: encryptWithSM4(labelingTaskIdStr),
          }
        });
      } else if (this.labelingTemplate === '3' || this.labelingTemplate === '4' || this.labelingTemplate === '5') {
        this.$router.push({
          name: 'LabelingDetail',
          query: {
            labelingTaskId: encryptWithSM4(labelingTaskIdStr),
          }
        });
      } else if (this.labelingTemplate === '8' || this.labelingTemplate === '9') {
        this.$router.push({
          name: 'OcrLabelingDetail',
          query: {
            labelingTaskId: encryptWithSM4(labelingTaskIdStr),
          }
        });
      }
    },

    // 标注按钮点击事件
    handleLabel() {
      const labelingTaskIdStr = String(this.labelingTaskId)
      if (this.labelingTemplate === '1' || this.labelingTemplate === '2') {
        this.$router.push({
          name: 'Classification',
          query: {
            labelingTaskId: encryptWithSM4(labelingTaskIdStr),
            labelingTemplate: encryptWithSM4(this.labelingTemplate)
          }
        });
      } else if (this.labelingTemplate === '3' || this.labelingTemplate === '4' || this.labelingTemplate === '5') {
        this.$router.push({
          name: 'LabelingAdd',
          query: {
            labelingTaskId: encryptWithSM4(labelingTaskIdStr),
            labelingTemplate: encryptWithSM4(this.labelingTemplate)
          }
        });
      } else if (this.labelingTemplate === '8') {
        this.$router.push({
          name: 'OcrLabeling',
          query: {
            labelingTaskId: encryptWithSM4(labelingTaskIdStr),
            labelingTemplate: encryptWithSM4(this.labelingTemplate)
          }
        });
      }
    }
  }
}
</script>

<style scoped lang="scss">
// 容器样式
.labeling-sample-container {
  height: calc(100vh - 84px);
  overflow: hidden;
  background: #fff;
  padding: 16px 20px;
}

// 表格容器
.table-container {
  height: calc(100vh - 100px);

  // 适配TableModel2的表格样式
  ::v-deep .table-card {
    height: 100% !important;
    border: 1px solid #ebeef5;
    border-radius: 4px;
  }

  // 搜索表单样式（匹配截图）
  ::v-deep .search-form {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;

    .el-form-item {
      margin-bottom: 0;
    }

    // 查询按钮样式
    .el-button--primary {
      background: #1f72ea;
      border-color: #1f72ea;
    }

    // 重置按钮样式
    .el-button--default {
      margin-left: 8px;
    }
  }

  // ========== 核心：仿照任务列表的按钮样式 ==========
  ::v-deep .table-actions {
    gap: 8px !important;
    display: flex;
    align-items: center;

    // 通用操作按钮样式
    .action-btn {
      width: 80px;
      height: 36px;
      padding: 0 16px;
      border-radius: 4px;
      font-size: 14px;
      transition: all 0.3s;
      position: relative;

      // 查看按钮样式（匹配任务列表的view-btn）
      &.view-btn {
        background: #fff;
        color: #1f72ea;
        border: 1px solid #dcdfe6;

        &:hover {
          background: #f5f7fa;
          border-color: #c0c4cc;
          color: #1f72ea;
        }
      }

      // 标注按钮样式（匹配任务列表的label-btn）
      &.label-btn {
        background: #1f72ea;
        color: #fff;
        border: 1px solid #1f72ea;

        &:hover {
          background: #4a8bff;
          border-color: #4a8bff;
        }

        // 小红点角标样式
        .badge {
          position: absolute;
          top: -5px;
          right: -5px;
        }
      }
    }
  }

  // 表格样式优化
  ::v-deep .el-table {
    --el-table-row-hover-bg-color: #f8f9fa;

    .el-table__header th {
      background-color: #f5f7fa;
      color: #333;
      font-weight: 500;
    }

    .el-table__body td {
      color: #666;
    }

    // 序号列居中
    .el-table-column--index {
      text-align: center;
    }
  }

  // 分页样式（匹配截图）
  ::v-deep .el-pagination {
    margin-top: 16px;
    text-align: right;

    .el-pagination__total {
      margin-right: 8px;
    }
  }
}
</style>
