<template>
  <!-- 新增根div：包裹所有内容，解决Vue2单根元素限制 -->
  <div class="labeling-task-root">
    <!-- 标注任务管理 -->
    <el-card class="labeling-task-container">
      <!-- 表格容器 -->
      <div class="table-container">
        <TableModel
          :formLabel="formLabel"
          :showOperation="true"
          :showRightTools="false"
          ref="taskTableRef"
          :columnsList="columnsList"
          :request-api="currentTaskAPI"
          :sendParams="sendParams"
          :handleColWidth="250"
        >
          <!-- 表格操作区：包含tab标签页 + 新建按钮 -->
          <template slot="tableActions">
            <!-- 修改为卡片样式的tab -->
            <el-tabs
              v-model="activeTab"
              class="tab-container"
              type="card"
              @tab-click="handleTabChange"
            >
              <el-tab-pane label="全部任务" name="all"></el-tab-pane>
              <el-tab-pane label="我发起的" name="myCreate"></el-tab-pane>
              <el-tab-pane label="我参与的" name="myJoin"></el-tab-pane>
            </el-tabs>
            <el-button
              type="primary"
              icon="el-icon-plus"
              @click="handleAdd"
              v-hasPermi="['labeling:task:add']"
              class="add-btn"
            >
              新建任务
            </el-button>
          </template>

          <!-- 自定义列：所在节点 -->
          <template slot="labeling_task_node" slot-scope="{ data }">
            <span>{{ getNodeLabel(data.labelingTaskNode) }}</span>
          </template>

          <!-- 自定义列：审核流程 -->
          <template slot="labeling_task_Audit_Process" slot-scope="{ data }">
            <span>{{ getAuditProcessLabel(data.labelingTaskAuditProcess) }}</span>
          </template>

          <!-- 自定义列：进度 -->
          <template slot="progress" slot-scope="{ data }">
            <a
              href="javascript:;"
              class="progress-link"
              @click="handleProgressClick(data)"
            >
              {{ getProgressLabel(data) }}
            </a>
          </template>

          <!-- 自定义列：状态 -->
          <template slot="labeling_task_status" slot-scope="{ data }">
            <span>{{ getStatusLabel(data.labelingTaskStatus) }}</span>
          </template>

          <!-- 自定义列：完成时间 -->
          <template slot="complete_time" slot-scope="{ data }">
            {{ formatDate(data.completeTime) || '-' }}
          </template>

          <!-- 操作列：核心修改 - 根据发布状态和当前tab控制按钮显示 -->
          <template slot="handle" slot-scope="{ data }">
            <!-- 查看按钮：始终显示 -->
            <el-button
              type="text"
              v-hasPermi="['labeling:task:view']"
              class="action-btn view-btn"
              @click="handleView(data)"
            >
              查看
            </el-button>

            <!-- 标注按钮：仅在"我参与的"标签页显示 -->
            <el-button
              v-if="activeTab === 'myJoin'"
              type="text"
              v-hasPermi="['labeling:task:label']"
              class="action-btn label-btn"
              @click="handleLabel(data)"
            >
              标注
            </el-button>

            <!-- 编辑按钮：仅未发布且非"我参与的"标签页时显示 -->
            <el-button
              v-if="data.labelingTaskPublishStatus !== '1' && activeTab !== 'myJoin'"
              type="text"
              v-hasPermi="['labeling:task:edit']"
              class="action-btn edit-btn"
              @click="handleEdit(data)"
            >
              编辑
            </el-button>

            <!-- 发布按钮：仅未发布且非"我参与的"标签页时显示 -->
            <el-button
              v-if="data.labelingTaskPublishStatus !== '1' && activeTab !== 'myJoin'"
              type="text"
              v-hasPermi="['labeling:task:publish']"
              class="action-btn publish-btn"
              @click="handlePublish(data)"
            >
              发布
            </el-button>

            <!-- 导出按钮：始终显示 -->
            <el-button
              type="text"
              v-hasPermi="['labeling:task:export']"
              class="action-btn export-btn"
              @click="handleExport(data)"
            >
              导出
            </el-button>

            <!-- 删除按钮：仅未发布且非"我参与的"标签页时显示 -->
            <el-button
              v-if="data.labelingTaskPublishStatus !== '1' && activeTab !== 'myJoin'"
              type="text"
              v-hasPermi="['labeling:task:del']"
              class="action-btn delete-btn"
              @click="handleDelete(data)"
            >
              删除
            </el-button>
          </template>
        </TableModel>
      </div>
    </el-card>

    <!-- 新增：导出弹窗 - 优化宽度和样式 -->
    <el-dialog
      title="导出标注数据"
      :visible.sync="exportDialogVisible"
      width="500px"
      :close-on-click-modal="false"
      destroy-on-close
      class="export-dialog"
    >
      <el-form
        ref="exportFormRef"
        :model="exportForm"
        label-width="100px"
        label-position="top"
        :rules="exportFormRules"
        class="export-form"
      >
        <el-form-item label="选择导出格式" prop="exportFormat" class="format-item">
          <el-radio-group v-model="exportForm.exportFormat" class="format-radio-group">
            <el-radio label="xml" class="format-radio">xml (VOC格式)</el-radio>
            <el-radio label="json" class="format-radio">json (COCO格式)</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="exportDialogVisible = false" class="cancel-btn">取消</el-button>
        <el-button type="primary" @click="handleExportConfirm" class="confirm-btn">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TableModel from '@/components/TableModel2'
import { columnsList, formLabel } from './config'
import {
  labelingTaskListAPI,
  myCreateLabelingTaskListAPI,
  myJoinLabelingTaskListAPI,
  delLabelingTaskAPI,
  publishLabelingTaskAPI
} from '@/api/data/labeling'
// 新增：导入COCO和XML/VOC导出接口
import { exportCocoZipAPI, exportVocZipAPI } from '@/api/data/labeling'
import { encryptWithSM4 } from '@/utils/sm'

export default {
  name: 'LabelingTaskList',
  components: { TableModel },
  data() {
    return {
      currentTaskAPI: labelingTaskListAPI,
      // 2. 标签页-接口 映射字典（key对应tab的name，value对应接口）
      tabApiMap: {
        all: labelingTaskListAPI, // 全部任务接口
        myCreate: myCreateLabelingTaskListAPI,   // 替换为实际的「我发起的」接口
        myJoin: myJoinLabelingTaskListAPI      // 替换为实际的「我参与的」接口
      },
      // 标签页激活状态
      activeTab: 'all',
      // 表格配置
      formLabel,
      columnsList,
      taskListAPI: labelingTaskListAPI,
      // 传递给TableModel的参数（替代原searchForm）
      sendParams: {},
      // 节点/状态字典
      nodeDict: {
        '0': '标注',
        '1': '审核1',
        '2': '审核2',
        '3': '审核3'
      },
      statusDict: {
        '0': '未开始',
        '1': '进行中',
        '2': '已结束'
      },
      // 新增：导出弹窗相关
      exportDialogVisible: false, // 弹窗显示状态
      currentExportTask: null, // 当前要导出的任务数据
      exportForm: {
        exportFormat: 'xml' // 默认选中xml格式
      },
      // 导出表单校验规则
      exportFormRules: {
        exportFormat: [
          { required: true, message: '请选择标注格式', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.currentTaskAPI = this.tabApiMap[this.activeTab]
  },

  methods: {

    // 进度列点击跳转处理
    handleProgressClick(data) {
      const labelingTaskIdStr = String(data.labelingTaskId)
      this.$router.push({
        name: 'LabelingList',
        query: {
          labelingTaskId: encryptWithSM4(labelingTaskIdStr),
          labelingTemplate: encryptWithSM4(data.labelingTemplateValue)

        }
      });
    },

    getProgressLabel(data) {
      // 解构获取已标注/未标注数量，默认值为0避免空值报错
      const labeledCount = Number(data.labeledCount) || 0;
      const unLabelCount = Number(data.unLabelCount) || 0;
      // 计算总数量
      const totalCount = labeledCount + unLabelCount;

      // 无数据时显示默认文案
      if (totalCount === 0) {
        return '0%(0/0)';
      }

      // 计算进度百分比（保留1位小数）
      const progressPercent = ((labeledCount / totalCount) * 100).toFixed(0);
      // 拼接最终展示文本，格式：百分比(已标注/总数)
      return `${progressPercent}%(${labeledCount}/${totalCount})`;
    },

    getAuditProcessLabel(processValue) {
      if (processValue === '0' || processValue === 0) {
        return '无审核';
      }
      // 数字转中文（1→单、2→双、3→三、4→四...）
      const numToCn = ['', '单', '双', '三', '四', '五', '六', '七', '八', '九'];
      const cnNum = numToCn[Number(processValue)] || processValue;
      return `${cnNum}审核`;
    },

    // 标签页切换处理
    handleTabChange(tab) {
      const tabName = tab.name;
      this.currentTaskAPI = this.tabApiMap[tabName];
      this.sendParams = { tabType: tabName };
      this.$nextTick(() => {
        this.refreshTable();
      });
    },

    // 时间格式化
    formatDate(dateStr, format = 'YYYY-MM-DD HH:mm:ss') {
      if (!dateStr) return '-';
      const date = new Date(dateStr);
      if (isNaN(date.getTime())) return '-';
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return format.replace('YYYY', year)
        .replace('MM', month)
        .replace('DD', day)
        .replace('HH', hours)
        .replace('mm', minutes)
        .replace('ss', seconds);
    },

    // 获取节点名称
    getNodeLabel(nodeValue) {
      return this.nodeDict[nodeValue] || '-';
    },

    // 获取状态名称
    getStatusLabel(statusValue) {
      return this.statusDict[statusValue] || '-';
    },

    // 刷新表格数据（供外部调用或内部操作后刷新）
    refreshTable() {
      if (this.$refs.taskTableRef) {
        this.$refs.taskTableRef.getTableList();
      }
    },

    // 新建任务（路由跳转）
    handleAdd() {
      this.$router.push({ name: 'LabelingTaskAdd' });
    },

    // 查看任务
    handleView(data) {
      const labelingTaskIdStr = String(data.labelingTaskId)
      this.$router.push({
        name: 'TaskDetail',
        query: {
          labelingTaskId: encryptWithSM4(labelingTaskIdStr)
        }
      });
    },

    // 标注任务
    handleLabel(data) {
      const labelingTaskIdStr = String(data.labelingTaskId)
      if (data.labelingTemplateValue === '1' || data.labelingTemplateValue === '2') {
        this.$router.push({
          name: 'Classification',
          query: {
            labelingTaskId: encryptWithSM4(labelingTaskIdStr),
            labelingTemplate: encryptWithSM4(data.labelingTemplateValue)
          }
        });
      } else if (data.labelingTemplateValue === '3' || data.labelingTemplateValue === '4' || data.labelingTemplateValue === '5') {
        this.$router.push({
          name: 'LabelingAdd',
          query: {
            labelingTaskId: encryptWithSM4(labelingTaskIdStr),
            labelingTemplate: encryptWithSM4(data.labelingTemplateValue)
          }
        });
      } else if (data.labelingTemplateValue === '8') {
        this.$router.push({
          name: 'OcrLabeling',
          query: {
            labelingTaskId: encryptWithSM4(labelingTaskIdStr),
            labelingTemplate: encryptWithSM4(data.labelingTemplateValue)
          }
        });
      }
    },

    // 编辑任务（路由跳转并传参）
    handleEdit(data) {
      const labelingTaskIdStr = String(data.labelingTaskId)
      this.$router.push({
        name: 'LabelingTaskAdd',
        query: {
          type: 'edit',
          labelingTaskId: encryptWithSM4(labelingTaskIdStr)
        }
      });
    },

    // 发布任务
    handlePublish(data) {
      this.$confirm('确定发布该任务吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          const res = await publishLabelingTaskAPI({ labelingTaskId: data.labelingTaskId });
          if (res.code === 200) {
            this.$message.success('发布成功');
            this.refreshTable(); // 发布后刷新表格，按钮会自动隐藏
          } else {
            this.$message.error(res.msg || '发布失败');
          }
        } catch (error) {
          this.$message.error('发布请求异常，请重试');
          console.error('发布任务失败：', error);
        }
      }).catch(() => {
        this.$message.info('已取消发布');
      });
    },

    // 打开导出弹窗
    handleExport(data) {
      this.currentExportTask = data; // 保存当前要导出的任务数据
      this.exportForm.exportFormat = 'xml'; // 重置默认选中格式
      this.exportDialogVisible = true; // 打开弹窗
    },

    async handleExportConfirm() {
      // 表单校验
      try {
        await this.$refs.exportFormRef.validate();
      } catch (error) {
        this.$message.warning('请选择标注格式');
        return;
      }

      // 获取当前任务ID
      const labelingTaskId = this.currentExportTask.labelingTaskId;
      if (!labelingTaskId) {
        this.$message.error('任务ID异常，无法导出');
        return;
      }

      // 根据选择的格式处理导出
      try {
        let blob, fileName;
        if (this.exportForm.exportFormat === 'json') {
          // COCO格式导出
          blob = await exportCocoZipAPI({ labelingTaskId });
          fileName = `标注任务_${labelingTaskId}_COCO格式.zip`;
        } else {
          // XML/VOC格式导出 - 调用新增的VOC导出接口
          blob = await exportVocZipAPI({ labelingTaskId });
          fileName = `标注任务_${labelingTaskId}_VOC格式.zip`;
        }
        // 处理文件下载
        this.downloadFile(blob, fileName);
        this.$message.success('导出成功，正在下载...');
        // 关闭弹窗
        this.exportDialogVisible = false;
      } catch (error) {
        // 异常处理（兼容blob格式的错误信息）
        console.error('导出失败：', error);
        if (error.response?.data instanceof Blob) {
          const text = await new Response(error.response.data).text();
          const res = JSON.parse(text);
          this.$message.error(res.msg || '导出失败，无可用数据');
        } else {
          this.$message.error(error.msg || '导出失败，请稍后重试');
        }
      }
    },

    // 新增：通用文件下载方法
    downloadFile(blob, fileName) {
      // 创建下载链接
      const url = window.URL.createObjectURL(new Blob([blob]));
      const a = document.createElement('a');
      a.href = url;
      a.download = fileName;
      document.body.appendChild(a);
      a.click();
      // 释放URL对象，清理临时标签
      window.URL.revokeObjectURL(url);
      document.body.removeChild(a);
    },

    // 删除任务
    handleDelete(data) {
      this.$confirm(
        `确定要删除"${data.labelingTaskName}"吗？删除后将无法恢复！`,
        '操作提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(async () => {
        try {
          const res = await delLabelingTaskAPI({
            labelingTaskId: data.labelingTaskId
          });
          if (res.code === 200) {
            this.$message.success('删除成功');
            this.refreshTable();
          } else {
            this.$message.error(res.msg || '删除失败');
          }
        } catch (error) {
          this.$message.error('删除请求异常，请重试');
          console.error('删除任务失败：', error);
        }
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    }
  }
}
</script>

<style scoped lang="scss">
// 新增根容器样式：继承原有容器的高度和背景
.labeling-task-root {
  height: 100%;
  width: 100%;
  background: #fff;
}

::v-deep .progress-link {
  color: #1f72ea !important;
  text-decoration: none;
  cursor: pointer;
}

// 容器样式
.labeling-task-container {
  height: calc(100vh - 84px);
  overflow: hidden;
  background: #fff;
  padding: 16px 20px;
}

// 表格容器
.table-container {
  height: calc(100vh - 100px);
  ::v-deep .table-card {
    height: 100% !important;
    border: 1px solid #ebeef5;
    border-radius: 4px;
  }

  // 表格操作区样式（tab + 新建按钮）
  ::v-deep .table-actions {
    // 关键修改：flex布局调整，让tab在左，按钮在右
    display: flex;
    justify-content: flex-start; // 改为左对齐
    align-items: center;
    margin-bottom: 16px;
    width: 100%; // 确保占满宽度

    .tab-container {
      // 卡片样式tab的自定义样式
      ::v-deep .el-tabs--card {
        border: none;

        .el-tabs__header {
          margin: 0;
        }

        .el-tabs__nav-wrap {
          margin: 0;
          width: auto;
        }

        .el-tabs__nav {
          border: 1px solid #e4e7ed;
          border-radius: 4px 4px 0 0;
          background-color: #f5f7fa;
        }

        .el-tabs__item {
          border-right: 1px solid #e4e7ed;
          padding: 0 20px;
          height: 36px;
          line-height: 36px;
          margin: 0;
        }

        .el-tabs__item:last-child {
          border-right: none;
        }

        .el-tabs__item.is-active {
          background-color: #fff;
          color: #1f72ea;
        }

        .el-tabs__active-bar {
          display: none;
        }
      }
    }

    // 新增：给新建按钮添加margin-left:auto，强制推到右侧
    .add-btn {
      margin-left: auto;
      width: 128px;
      height: 36px;
      background: #1f72ea;
      border-radius: 4px;
      color: #fff;
      border: none;
      font-size: 14px;
      position: relative;
      z-index: 2;

      &:hover {
        background: #4a8bff;
      }
    }
  }
}

// 操作按钮样式
::v-deep .action-btn {
  margin-right: 5px;
  font-size: 13px;
  padding: 0;
  height: auto;

  &:last-child {
    margin-right: 0;
  }

  // 查看按钮（默认蓝色）
  &.view-btn {
    color: #1f72ea;
  }

  // 标注按钮（绿色）
  &.label-btn {
    color: #67c23a;
  }

  // 编辑按钮（橙色）
  &.edit-btn {
    color: #ff9800;
  }

  // 发布按钮（蓝色）
  &.publish-btn {
    color: #1f72ea;
  }

  // 导出按钮（蓝色）
  &.export-btn {
    color: #1f72ea;
  }

  // 删除按钮（红色）
  &.delete-btn {
    color: #f56c6c;
  }
}

// ********** 优化：导出弹窗样式 **********
::v-deep .export-dialog {
  // 弹窗整体圆角
  .el-dialog__wrapper {
    .el-dialog {
      border-radius: 8px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid #f0f2f5;
    }
    // 弹窗标题样式
    .el-dialog__header {
      padding: 24px 24px 16px;
      border-bottom: 1px solid #f0f2f5;
      .el-dialog__title {
        font-size: 16px;
        font-weight: 600;
        color: #333;
      }
      .el-dialog__close {
        font-size: 18px;
        color: #909399;
        &:hover {
          color: #666;
        }
      }
    }
    // 弹窗内容区
    .el-dialog__body {
      padding: 24px;
      background: #fafafa;
    }
    // 弹窗底部按钮区
    .el-dialog__footer {
      padding: 16px 24px 24px;
      text-align: right;
      border-top: 1px solid #f0f2f5;
    }
  }
}
// 导出表单样式
.export-form {
  width: 100%;
}
// 格式选择表单项
.format-item {
  margin-bottom: 0 !important;
  .el-form-item__label {
    font-size: 14px;
    color: #666;
    font-weight: 500;
  }
}
// 单选框组样式
.format-radio-group {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 4px;
}
// 单选框样式
.format-radio {
  font-size: 14px;
  color: #333;
  ::v-deep .el-radio__input {
    margin-right: 8px;
    .el-radio__inner {
      width: 16px;
      height: 16px;
    }
    .el-radio__inner::after {
      width: 8px;
      height: 8px;
    }
  }
}
// 弹窗按钮样式
.dialog-footer {
  .cancel-btn {
    margin-right: 16px;
    padding: 6px 20px;
    font-size: 14px;
  }
  .confirm-btn {
    padding: 6px 20px;
    font-size: 14px;
    background: #1f72ea;
    border-color: #1f72ea;
    &:hover {
      background: #4a8bff;
      border-color: #4a8bff;
    }
  }
}
</style>
