<template>
  <div>
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="85px">
      <el-form-item label="任务标题" prop="datasetName">
        <el-input
          v-model="queryParams.taskName"
          placeholder="请输入任务标题"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="时间" prop="time">
        <el-date-picker
          v-model="queryParams.time"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
      <el-button
        style="float: right"
        type="primary"
        plain
        icon="el-icon-plus"
        size="mini"
        @click="handleAdd"
        v-hasPermi="['dataCenter:dataSet:add']"
      >新建</el-button>
    </el-form>

    <el-table  style="width: 100%" v-loading="loading"  :data="list"  :height="tableHeight"  @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50" align="center" />
      <el-table-column type="index" label="序号" align="center" min-width="50" />
      <el-table-column label="开始时间-结束时间" align="center" show-overflow-tooltip prop="datasetName"/>
      <el-table-column label="任务标题" align="center" show-overflow-tooltip prop="taskName" />
      <el-table-column label="负责人员" align="center" show-overflow-tooltip prop="createBy" min-width="100"/>
      <el-table-column label="任务状态" show-overflow-tooltip align="center" prop="annotateTaskStatus" width="160"/>
      <el-table-column label="所属数据集" show-overflow-tooltip align="center" prop="datasetDesc" />
      <el-table-column label="标注进度（已标注个数/总数）" show-overflow-tooltip min-width="140" align="center" prop="createBy" />
      <el-table-column label="待审核个数" show-overflow-tooltip align="center" prop="createBy" />
      <el-table-column label="操作" align="center" min-width="140" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleExamine(scope.row)"
            v-hasPermi="['dataCenter:sample:edit']"
          >审核</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleDimension(scope.row)"
            v-hasPermi="['dataCenter:sample:edit']"
          >智能标注</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleAnnotation(scope.row)"
            v-hasPermi="['dataCenter:sample:edit']"
          >标注</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleRelease(scope.row)"
            v-hasPermi="['dataCenter:sample:edit']"
          >发布</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 新建数据集弹窗 -->
    <add-task-dialog :open="addOpen" :get-list="getList" @dialog-cancel="handleCancel"></add-task-dialog>

    <release-version-dialog :dataset-id="datasetId" :open="releaseOpen" @dialog-cancel="handleCancel"></release-version-dialog>

  </div>
</template>
<script>



import { list,del,setPublic} from '@/api/dataCenter/annotationTask'
import addTaskDialog from '../dialog/addTaskDialog'
import releaseVersionDialog from '../dialog/releaseVersionDialog.vue'
export default {
  components: { releaseVersionDialog, addTaskDialog},
  name: "allTasks",
  data() {
    return {
      datasetId: 0,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      tableHeight: 0,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      // 是否显示弹出层
      addOpen: false,
      releaseOpen: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        datasetName: null,
      },
    };
  },
  created() {
    this.getList();
    // 初始化表格高度
    this.updateTableHeight();
    // 监听窗口大小变化
    window.addEventListener("resize", this.updateTableHeight);
  },
  methods: {
    updateTableHeight() {
      // 设置表格高度为窗口高度减去其他元素高度
      const headerHeight = 300; // 头部高度，可以调整
      const footerHeight = 80; // 底部高度，可以调整
      this.tableHeight = window.innerHeight - headerHeight - footerHeight;
    },
    /**获取数据 **/
    getList(){
      this.loading =true
      list(this.queryParams).then(response => {
        console.log(response);
        this.list = response.rows;
        this.total = response.total;
        this.loading =false
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleAdd(){
      this.addOpen = true;
    },
    handleRelease(row){
      this.releaseOpen = true;
      this.datasetId = row.datasetId;
    },
    handleDimension(row){

    },
    handleAnnotation(row){
      this.$tab.openPage("数据标注", '/dataCenter/annotationTask/dataAnnotations/index/' + row.taskId);
    },
    handleExamine(row){
      this.$tab.openPage("数据审核", '/dataCenter/annotationTask/examine/index/' + row.taskId);
    },
    getPercentage(row) {
      if (row.annotatedCount > 0 && row.notAnnotatedCount >= 0) {
        let percentage = ((row.annotatedCount - row.notAnnotatedCount) / row.annotatedCount) * 100;
        // 确保 percentage 在 0 到 100 之间
        return Math.min(Math.max(percentage, 0), 100);
      }
      return 0; // 如果没有标注数据，返回 0%
    },
    handleDelete(row){
      const ids = row.datasetId || this.ids;
      this.$modal.confirm('是否确认删除数据项？').then(function() {
        return del(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.datasetId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    // 处理取消事件
    handleCancel() {
      this.addOpen = false;
      this.releaseOpen =false;
    },
  }
}
</script>
<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>

