<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
          v-hasPermi="['dataCenter:dataSet:list']"
          @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-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['dataCenter:dataSet:create']"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['dataCenter:dataSet:delete']"
        >删除
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <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="序号" :index="indexMethod" 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,_t: Date.now() }
    }" class="link-type" @click=""
          >
            <span>{{ scope.row.datasetName }}</span>
          </router-link>
        </template>
      </el-table-column>
      <el-table-column label="版本名称" align="center" show-overflow-tooltip prop="latestVersionName"/>
      <el-table-column label="文件数量" align="center" show-overflow-tooltip prop="createBy" min-width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.annotatedCount }}</span>
        </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-column label="是否公开" show-overflow-tooltip align="center" prop="createBy">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.isPublic" active-value="1" inactive-value="0"
                     @change="change(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>

      <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"
            @click="handleImport(scope.row)"
            v-hasPermi="['dataCenter:dataSet:import']"
          >导入
          </el-button>
          <el-button
            size="mini"
            type="text"
            @click="handleAnnotation(scope.row)"
            v-hasPermi="['dataCenter:task:create']"
          >标注
          </el-button>
          <el-button
            size="mini"
            type="text"
            @click="downloadFile(scope.row)"
            v-hasPermi="['dataCenter:dataSet:export']"
          >导出
          </el-button>
          <el-button
            size="mini"
            type="text"
            @click="downloadDataset(scope.row)"
            v-hasPermi="['dataCenter:dataSet:export']"
          >导出数据集
          </el-button>
          <el-button
            size="mini"
            type="text"

            @click="handleVersion(scope.row)"
            v-hasPermi="['dataCenter:version:list']"
          >版本查看
          </el-button>
          <el-button
            size="mini"
            type="text"
            @click="handleDelete(scope.row)"
            v-hasPermi="['dataCenter:dataSet:delete']"
          >删除
          </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-data-set-dialog :get-list="getList" :open="addOpen" @dialog-cancel="handleCancel"/>
    <!--创建标注任务-->
    <annotation-task-dialog :datasetNum="datasetNum" :dataset-id="datasetId" :open="annotationOpen"
                            @dialog-cancel="handleCancel"
    />
    <!-- 导入 -->
    <import-dialog :get-list="getList" :open="importOpen" :data-type="dataType" :dataset-id="datasetId.toString()"
                   @dialog-cancel="handleCancel"
    />

    <export-dialog :get-list="getList" :open="exportOpen" :dataset-id="datasetId.toString()"
                   @dialog-cancel="handleCancel"
    />

  </div>
</template>
<script>

import addDataSetDialog from '../child/addDataSetDialog.vue'
import annotationTaskDialog from '../child/annotationTaskDialog.vue'
import importDialog from '../child/importDialog.vue'
import exportDialog from '../child/exportDialog.vue'
import { list, del, setPublic } from '@/api/dataCenter/dataSet'

export default {
  components: { addDataSetDialog, annotationTaskDialog, importDialog, exportDialog },
  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,
      exportOpen: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        datasetName: null
      }
    }
  },
  created() {
    this.getList()
    // 初始化表格高度
    this.updateTableHeight()
    // 监听窗口大小变化
    window.addEventListener('resize', this.updateTableHeight)
  },
  methods: {
    indexMethod(index) {
      return (this.queryParams.pageNum - 1) * this.queryParams.pageSize + index + 1
    },
    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
    },
    handleAnnotation(row) {
      this.annotationOpen = true
      this.datasetId = row.datasetId
      this.datasetNum = row.notAnnotatedCount
    },
    handleImport(row) {
      this.importOpen = true
      this.datasetId = row.datasetId
      this.dataType = row.dataType
    },
    handleUpdate() {

    },
    handleVersion(row) {
      this.$tab.openPage('数据集版本管理', '/dataCenter/dataSet-version/index/' + row.datasetId,
        { _t: Date.now() })
    },
    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(() => {
      })
    },
    change(row) {
      let text = row.isPublic === '0' ? '不公开' : '公开'
      this.$modal.confirm('确认要' + text + '吗？').then(function() {
        return setPublic(row.datasetId, row.isPublic)
      }).then(() => {
        this.$modal.msgSuccess('操作成功')
      }).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
    },
    // 处理取消事件
    handleCancel() {
      this.addOpen = false
      this.annotationOpen = false
      this.importOpen = false
      this.exportOpen = false
    },
    downloadFile(row) {
      this.exportOpen = true
      this.datasetId = row.datasetId
    },
    downloadDataset(row) {
      this.download('/ai/dataset/export/'+row.datasetId,{},`${new Date().getTime()}.zip`,{timeout: 600000})
    }
  }
}
</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>

