<!--  -->
<template>
  <div class="tableItem">
    <div class="operation">
      <div>
        <span  @dblclick="checkName">
          数据集名称：
          <span v-if="!value.isEdit">{{ value.datasetName }}</span>
          <el-input ref="inputName" v-else v-model="value.datasetName" placeholder="请输入内容" :size="defaultFormItemSize" style="width:200px" @change="editName()" @blur="editName()" ></el-input>

        </span>
        <span style="margin-left: 20px">数据集ID：{{ value.datasetId }}</span>

      </div>
      <div>
        <el-button type="text" icon="el-icon-plus" @click="addVersions">新增版本</el-button>
        <el-button type="text" icon="el-icon-menu" @click="all">全部版本</el-button>
        <el-button type="text" icon="el-icon-delete" @click="delDataset(value)">删除</el-button>
      </div>
    </div>
    <tableBox :tableData="value" :refresh="refresh"  />

  </div>
</template>

<script>
import { MyDataSet } from '@/api/gptController.js';
import addVersions from './dialog/add.vue'
import tableBox from './tableBox/index.vue'

export default {
  data () {
    return {
      dialogVisible: false,
      dialogTitle: ''
    };
  },
  
  inject: ['refresh'],
  props: {
    value: {
      type: Object,
      default: () => { }
    }
  },
  components: { tableBox },

  computed: {},

  mounted () {
  },

  methods: {
    addVersions () {
      this.$dialog.show('新增数据集版本', addVersions, {
        area: ['600px', 'auto']
      }, { isEdit: false, tableData: this.value }).then(res => {
        this.refresh()
      }).catch(e => { });
    },
    delDataset (item) {
      this.$confirm('是否确认删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = { datasetId: item.datasetId }
        MyDataSet.delete(this, params).then(res => {
          this.$message.success('删除成功');
          this.refresh()
        }).catch(e => {
          console.log(e);
        });
      }
      );
    },

    all () {
      // this.dialogTitle = this.value.datasetName
      // this.dialogVisible = true
      this.$dialog.show(this.value.datasetName, tableBox, {
        area: ['100%', '100%']
      }, { tableData: this.value, refresh: this.refresh }).then(res => {
        this.refresh()
      }).catch(e => { });
    },
    editName () {
      this.value.isEdit = false
      let params = {
        datasetManageDto: {
          datasetName: this.value.datasetName,
          datasetId: this.value.datasetId
        }
      }
      MyDataSet.update(this, params).then(res => {
        this.$message.success('修改成功');
        this.refresh()
      }).catch(e => {
        console.log(e);
      });
    },
    checkName () {
      this.value.isEdit = true;
      this.$nextTick(() => {
        this.$refs.inputName.focus()
      })
    }
  }

}

</script>
<style scoped>
.operation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f8f8f9;
  border-bottom: 1px solid #eee;
  height: 50px;
}
.operation > div {
  margin: 0 20px 0 20px;
}
.tableItem {
  margin-bottom: 10px;
}
</style>
