<!--  -->
<template>
  <div class="box">
    <div class="versionsList">
      <div class="title">版本列表</div>
      <el-button type="text" icon="el-icon-plus" @click="addVersions()">新增版本</el-button>
      <div :class="['versionsItem','omit',item?.versionId===nowVersion?.versionId?'isActive':'']" v-for="item in versionList" :key="item.versionId" @click="cutVersions(item)">{{ item.versionName }}</div>
    </div>

    <el-tabs v-model="activeName" style="width:calc(100% - 200px)" v-if="nowVersion">
      <div style="position: absolute; top: -55px; right: 0;">
        <el-button type="text" :size="defaultFormItemSize" @click="dataImport(nowVersion)">导入</el-button>
        <el-button type="text" :size="defaultFormItemSize" @click="del(nowVersion)">删除</el-button>
        <template v-if="nowVersion.inputStatus !== 0">
          <el-dropdown style="margin-left:15px;font-size: 12px;color: #0092FF;" :size="defaultFormItemSize">
            <span class="el-dropdown-link">
              更多<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-if="nowVersion.releaseStatus!==1" @click.native="putOut(nowVersion)">发布</el-dropdown-item>
              <el-dropdown-item @click.native="derived(nowVersion)">导出</el-dropdown-item>
              <!-- <el-dropdown-item @click.native="analyse(nowVersion)">分析</el-dropdown-item>
              <el-dropdown-item @click.native="enhance(nowVersion)">增强</el-dropdown-item> -->
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </div>

      <el-tab-pane label="数据详情" name="dataDetail" style="height: 100%;">
        <particulars :versionItem='nowVersion' />
      </el-tab-pane>
      <el-tab-pane label="版本信息" name="versionInformation" style="padding-left: 20px;">
        <div class="dataBox">
          <div class="dataItem">
            <div class="title">版本:</div>
            <div class="content"> V{{ nowVersion.datasetVersion }}</div>
          </div>
        </div>
        <div class="dataItem">
          <div class="title">版本ID:</div>
          <div class="content"> {{ nowVersion.versionId }}</div>
        </div>
        <div class="dataItem">
          <div class="title">导入状态:</div>
          <div class="content"> {{ ImportStatus.getValue(nowVersion.inputStatus) }}</div>
        </div>
        <div class="dataItem">
          <div class="title">清洗状态:</div>
          <div class="content"> {{  CleanStatus.getValue(nowVersion.cleanStatus) }}</div>
        </div>
        <div class="dataItem">
          <div class="title">发布状态:</div>
          <div class="content"> {{ ReleaseStatus.getValue(nowVersion.releaseStatus) }}</div>
        </div>
        <div class="dataItem">
          <div class="title">标注类型>模板:</div>
          <div class="content">{{ LabelType.getValue(nowVersion.dimensionType ) }}</div>
        </div>
        <div class="dataItem">
          <div class="title">数据量:</div>
          <div class="content"> {{ nowVersion.dataVolume }}</div>
        </div>
        <div class="dataItem">
          <div class="title">创建时间:</div>
          <div class="content"> {{ nowVersion.createTime }}</div>
        </div>
        <div class="dataItem">
          <div class="title">最后更新时间:</div>
          <div class="content"> {{ nowVersion.updateTime }}</div>
        </div>

      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
import derived from './dialog/derived.vue'
import dataImport from './dialog/dataImport.vue'
import particulars from './dialog/particulars.vue'
import { DatasetVersion } from '@/api/gptController.js'
import addVersions from './dialog/add.vue'
export default {
  data() {
    return {
      activeName: 'dataDetail',
      versionList: [],
      nowVersion: undefined
    }
  },
  props: ['tableData', 'refresh'],
  components: { particulars },

  computed: {},

  mounted() {
    this.getList()
  },

  methods: {
    addVersions() {
      this.$dialog
        .show(
          '新增数据集版本',
          addVersions,
          {
            area: ['600px', 'auto']
          },
          { isEdit: false, datasetId: this.tableData.datasetId }
        )
        .then((res) => {
          this.refresh()
          this.getList()
        })
        .catch((e) => {})
    },
    dataImport(data) {
      this.$dialog
        .show(
          '导入',
          dataImport,
          {
            area: ['600px', '200px']
          },
          { row: data }
        )
        .then((res) => {
          this.refresh()
          this.getList()
        })
        .catch((e) => {})
    },
    del(data) {
      if (this.versionList.length === 1) {
        this.$message.warning('必须存在一个版本')
        return
      }
      this.$confirm('是否确认删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = { versionId: data.versionId }
        DatasetVersion.delete(this, params)
          .then((res) => {
            this.$message.success('删除成功')
            this.refresh()
            this.getList()
          })
          .catch((e) => {
            console.log(e)
          })
      })
    },
    getList() {
      let params = {
        datasetVersionDtoFilter: { datasetId: this.tableData.datasetId },
        pageParam: {
          pageNum: 0,
          pageSize: 100
        }
      }
      DatasetVersion.list(this, params)
        .then((res) => {
          this.versionList = res.data.dataList
          this.nowVersion = this.versionList[0]
        })
        .catch((e) => {})
    },
    particulars(data) {
      // 详情
      this.$dialog
        .show(
          '详情',
          particulars,
          {
            area: ['100%', '100%']
          },
          { row: data }
        )
        .then((res) => {
          this.refresh()
        })
        .catch((e) => {})
    },
    label(data) {
      // 标注
    },
    derived(data) {
      // 导出
      this.$dialog
        .show(
          '导出',
          derived,
          {
            area: ['100%', '100%']
          },
          { row: data }
        )
        .then((res) => {
          this.refresh()
        })
        .catch((e) => {})
    },
    analyse(data) {
      // 分析
    },
    enhance(data) {
      // 增强
    },
    putOut(data) {
      console.log(data)
      this.$confirm('是否确认发布', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = { versionId: data.versionId }
        DatasetVersion.publish(this, params)
          .then((res) => {
            this.$message.success('发布成功')
            this.refresh()
            this.getList()
          })
          .catch((e) => {
            console.log(e)
          })
      })
    },
    cutVersions(item) {
      // 切换版本
      this.nowVersion = item
    }
  }
}
</script>
<style scoped>
.box {
  display: flex;
  height: 100%;
}
.versionsList {
  width: 200px;
  height: 100%;
  border-right: 1px solid #dddee0;
  margin-right: 10px;
  overflow: auto;
}
.versionsItem {
  height: 35px;
  line-height: 35px;
  width: 150px;
  padding: 0 10px 0 10px;
  border-radius: 5px;
  margin-bottom: 10px;
  cursor: pointer;
}
.isActive {
  background: #0092ff;
  color: #fff;
}
div /deep/ .el-tabs__content {
  height: calc(100% - 50px);
}
.dataItem {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 40px;
}
.title {
  width: 100px;
}
</style>
