<!--Prompt模板-->
<template>
  <div style="position: relative">
    <div class="topBox">
      <div class="title">Prompt优化</div>
    </div>
    <div class="tableBox" :style="{ height: tableHeight }">
      <el-tabs v-model="activeName" style="width: 100%; height: 100%" >
        <el-tab-pane label="在线优化" name="onLineOptimization" style="width: 100%; height: 100%">
          <onLineOptimization />
            <!-- <router-view></router-view> -->
        </el-tab-pane>
        <el-tab-pane label="批量优化" name="batchOptimization" style="width: 100%; height: 100%">
          <batchOptimization />
          <!-- <router-view></router-view> -->
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import batchOptimization from './batchOptimization/index.vue';
import onLineOptimization from './onLineOptimization/index.vue';
export default {
  data () {
    return {
      myDataSetPage: {},
      topButtonBoxHeight: 0,
      activeName: 'onLineOptimization'
    };
  },

  components: { batchOptimization, onLineOptimization },

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

  mounted () {

  },

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

  },
  watch: {
    // activeName (now, old) {
    //   // console.log(now, old);
    //   this.$router.push({name: now})
    // }
    
  }
};
</script>
<style lang="scss" scoped>
@import "@/assets/style/element-variables.scss";
.topBox {
  background-color: white;
  width: 100%;
  // height: 130px;
  height: 45px;
  margin-bottom: 16px;
  .title {
    color: $--color-text-primary;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 8px;
    padding: 10px 20px 5px 20px;
  }
}

.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;
}
.tag:not(:last-child) {
  margin-right: 10px;
}
/deep/ .el-tabs__content {
  height: calc(100% - 40px);
}
</style>
