<!-- 我的数据集 -->
<template>
  <div style="position: relative">
    <el-form
      ref="myDataSetPage"
      :model="myDataSetPage"
      label-width="75px"
      :size="defaultFormItemSize"
      label-position="right"
      @submit.native.prevent
    >
      <filter-box :item-width="350" @search="search()" @reset="onReset">
        <el-form-item label="标注类型" prop="formFilter.annotationType">
          <el-cascader
            v-model="myDataSetPage.formFilter.annotationType"
            :options="myDataSetPage.options"
            @change="handleChange"
          ></el-cascader>
        </el-form-item>
        <el-form-item
          label="数据集名称或id"
          prop="formFilter.dataName"
          label-width="120px"
        >
          <el-input
            class="filter-item"
            v-model="myDataSetPage.formFilter.dataName"
            :clearable="true"
            placeholder="数据集名称或id"
          />
        </el-form-item>
      </filter-box>
    </el-form>
    <div class="tableBox" :style="{ height: tableHeight }">
      <el-button
        class="add"
        type="primary"
        icon="el-icon-plus"
        :size="defaultFormItemSize"
        >创建数据集</el-button
      >
      <div class="tableItem">
        <div class="operation">
          <div>
            <span>数据集名称：{{ 111111111111 }}</span>
            <span style="margin-left: 20px">数据集ID：{{ 2222222222 }}</span>
          </div>

          <div>
            <el-button type="text" icon="el-icon-plus">新增版本</el-button>
            <el-button type="text" icon="el-icon-menu">全部版本</el-button>
            <el-button type="text" icon="el-icon-delete">删除</el-button>
          </div>
        </div>
        <vxe-table
          border
          show-header-overflow
          show-overflow
          :row-config="{ isHover: true }"
          :data="tableData"
          min-height="96"
        >
          <vxe-column field="versions" title="版本"></vxe-column>
          <vxe-column field="versionsId" title="版本ID"></vxe-column>
          <vxe-column field="importState" title="导入状态"></vxe-column>
          <vxe-column field="derivedState" title="导出状态"></vxe-column>
          <vxe-column field="cleanCondition" title="清洗状态"></vxe-column>
          <vxe-column field="enhancedState" title="增强状态"></vxe-column>
          <vxe-column field="publishStatus" title="发布状态"></vxe-column>
          <vxe-column field="AnnotationType" title="标注类型>模板"></vxe-column>
          <vxe-column field="operation" title="操作">
            <template slot-scope="scope">
              <el-button
                type="text"
                :size="defaultFormItemSize"
                @click="dataImport(scope.row)"
                >导入</el-button
              >
              <el-button
                type="text"
                :size="defaultFormItemSize"
                @click="del(scope.row)"
                >删除</el-button
              >
            </template>
          </vxe-column>
        </vxe-table>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
  data () {
    return {
      myDataSetPage: {
        formFilter: {
          annotationType: undefined,
          dataName: undefined
        },
        options: [
          {
            value: 'shejiyuanze',
            label: '设计原则'
          },
          {
            value: 'daohang',
            label: '导航',
            children: [
              {
                value: 'cexiangdaohang',
                label: '侧向导航'
              },
              {
                value: 'dingbudaohang',
                label: '顶部导航'
              }
            ]
          }
        ],
        isInit: false
      },
      filterBoxheight: 0,
      tableData: [
     
      ]
    };
  },

  components: {},

  computed: {
    ...mapGetters(['getMainContextHeight']),
    tableHeight () {
      return this.getMainContextHeight - this.filterBoxheight - 32 + 'px';
    }
  },

  mounted () {
    this.filterBoxheight = this.$refs.myDataSetPage?.$el.clientHeight;
    window.addEventListener('resize', () => {
      this.filterBoxheight = this.$refs.myDataSetPage?.$el.clientHeight;
    });
  },

  methods: {
    onReset () {},
    search () {},
    handleChange () {},
    dataImport () {

    },
    del () {
      
    }
  }
};
</script>
<style scoped>
.tableBox {
  background-color: white;
  width: 100%;
  padding: 20px;
}
.add {
  margin: 0 0 20px 0;
}
.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;
}
</style>
