<!-- 预置数据集 -->
<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-select
            v-model="myDataSetPage.formFilter.annotationType"
            multiple
            placeholder="请选择"
          >
            <el-option
              v-for="item in myDataSetPage.annotationOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="任务类型" prop="formFilter.annotationType">
          <el-select
            v-model="myDataSetPage.formFilter.annotationType"
            multiple
            placeholder="请选择"
          >
            <el-option
              v-for="item in myDataSetPage.taskOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="领域类型" prop="formFilter.annotationType">
          <el-select
            v-model="myDataSetPage.formFilter.annotationType"
            multiple
            placeholder="请选择"
          >
            <el-option
              v-for="item in myDataSetPage.territoryOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="应用场景" prop="formFilter.annotationType">
          <el-select
            v-model="myDataSetPage.formFilter.annotationType"
            multiple
            placeholder="请选择"
          >
            <el-option
              v-for="item in myDataSetPage.sceneOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="数据集名称或描述"
          prop="formFilter.dataName"
          label-width="125px"
        >
          <el-input
            class="filter-item"
            v-model="myDataSetPage.formFilter.dataName"
            :clearable="true"
            placeholder="数据集名称或描述"
          />
        </el-form-item>
      </filter-box>
    </el-form>
    <div class="tableBox" :style="{ height: tableHeight }">
      <el-card class="box-card" v-for="item in 5" :key="item + 'a'">
        <div class="title omit">
          ChineseMedicalDialogueData中文医疗问答数据集
        </div>
        <div class="content omit_2">
          中文医疗对话数据集由792099个问答对组成，包括男科、内科、妇产科、肿瘤科、儿科和外科
        </div>

        <div class="tagBox">
          <el-tag class="tag" type="info" size="mini">文本对话非排序</el-tag>
        <el-tag class="tag" type="info" size="mini">限定式问答</el-tag>
        <el-tag class="tag" type="info" size="mini">调优</el-tag>
        </div>

        <el-divider style="margin: 14px 0"></el-divider>
        <div class="buttonBox">
          <div>
            <el-tooltip :content="'浏览量1890'" placement="top" >
              <el-button type="text" style="color:#333" icon="el-icon-view">1890</el-button>
            </el-tooltip>
               <el-tooltip :content="'引用量262'" placement="top" >
             <el-button type="text" style="color:#333"  icon="el-icon-date">262</el-button>
            </el-tooltip>
            
          </div>
          <el-button type="text">去训练</el-button>
        </div>
      </el-card>
      <div class="box-card-2" v-for="item in 3" :key="item"></div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
  data () {
    return {
      myDataSetPage: {
        formFilter: {
          annotationType: undefined,
          dataName: undefined
        },
        annotationOptions: [
          {
            value: 'cexiangdaohang',
            label: '侧向导航'
          },
          {
            value: 'dingbudaohang',
            label: '顶部导航'
          }
        ],
        taskOptions: [
          {
            value: 'cexiangdaohang',
            label: '侧向导航'
          },
          {
            value: 'dingbudaohang',
            label: '顶部导航'
          }
        ],
        territoryOptions: [
          {
            value: 'cexiangdaohang',
            label: '侧向导航'
          },
          {
            value: 'dingbudaohang',
            label: '顶部导航'
          }
        ],
        sceneOptions: [
          {
            value: 'cexiangdaohang',
            label: '侧向导航'
          },
          {
            value: 'dingbudaohang',
            label: '顶部导航'
          }
        ],
        isInit: false
      },
      filterBoxheight: 0,
      tableData: [
        {
          id: 10001,
          name: 'Test1',
          role: 'Develop',
          sex: 'Man',
          age: 28,
          address: 'test abc'
        }
      ]
    };
  },

  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 () {}
  }
};
</script>
<style lang="scss" scoped>
@import '@/assets/style/element-variables.scss';
.tableBox {
  background-color: white;
  width: 100%;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  overflow: auto;
  align-content: flex-start;
  justify-content: space-between;
}
.box-card {
  width: calc(100% / 4 - 20px);
  height: 180px;
  flex-shrink: 0;
  margin-bottom: 20px;
  min-width: 300px;
  background: linear-gradient(to bottom,#e7efff 10%, #fff 50%);
}
.box-card-2 {
  width: calc(100% / 4 - 20px);
  min-width: 300px;
  flex-shrink: 0;
}
div /deep/.el-divider--horizontal {
  margin: 14px 0 0 0;
}
.title {
  font-size: 16px;
  color: $--color-text-primary;
  margin-bottom: 16px;
}
.content {
  margin-bottom: 10px;
  color:$--color-text-secondary;
}
.buttonBox{
  display: flex;
  justify-content: space-between;
  position: absolute;
  bottom: 0;
 width: calc(100% - 32px);
}
.tag:not(:last-child){
  margin-right: 10px;
}
/deep/ .el-card__body{
  height: 100%;
  width: 100%;
  position: relative;
}

</style>
