<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.datasetName"
          placeholder="请输入数据集名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </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-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="序号" min-width="50" />
      <el-table-column label="名称" align="center" show-overflow-tooltip prop="datasetName">
        <template slot-scope="scope">
          <router-link :to="{
      path: '/dataCenter/dataSet-details/index/' + scope.row.datasetId,
      query: { dataType: scope.row.dataType }
    }" class="link-type">
            <span>{{ scope.row.datasetName }}</span>
          </router-link>
        </template>
      </el-table-column>
      <el-table-column label="版本名称" align="center" show-overflow-tooltip prop="sampleFormat" />
      <el-table-column label="标注进度" align="center" show-overflow-tooltip prop="createBy" min-width="100">
        <template slot-scope="scope">
          <div style="display: flex;align-items: center;justify-content: center;">
            <!-- 使用 v-if 确保当 annotatedCount > 0 时渲染进度条 -->
            <el-progress
              v-if="scope.row.annotatedCount > 0"
              color="#13ce66"
              :percentage="getPercentage(scope.row)"
              style="width: 150px;"/>
            <!-- 显示标注进度 -->
            <span>({{ (scope.row.annotatedCount - scope.row.notAnnotatedCount) + '/' + scope.row.annotatedCount }})</span>
          </div>
        </template>

      </el-table-column>

      <el-table-column label="创建时间" show-overflow-tooltip align="center" prop="createTime" width="160">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="描述" show-overflow-tooltip align="center" prop="datasetDesc" />
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>
<script>



import { list,setPublic} from '@/api/dataCenter/dataSet'
export default {
  name: "DataSet",
  data() {
    return {
      dataType:'0',
      datasetNum:0,
      datasetId: 0,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      tableHeight: 0,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      // 是否显示弹出层
      addOpen: false,
      releaseOpen: false,
      annotationOpen:false,
      importOpen:false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        datasetName: null,
        isPublic:'1'
      },
    };
  },
  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;
    },
    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%
    },
    change(row){
      let text = row.isPublic === '0' ? '不公开' : '公开'
      this.$modal.confirm('确认要' + text + '吗？').then(function() {
        return setPublic(row.datasetId, row.isPublic)
      }).then(() => {
        this.$modal.msgSuccess('操作成功')
        this.getList();
      }).catch(function() {
        row.isPublic = row.isPublic === '0' ? '1' : '0'

      })
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.datasetId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    }
  }
}
</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>

