<!--Prompt模板-->
<template>
  <div style="position: relative">
    <div class="topBox">
      <div class="title">Prompt 模板</div>
      <div class="instructions">
        管理和查看prompt模板，支持在服务调用时组合prompt输入推理。
      </div>
    </div>
    <div class="topButtonBox">
      <div class="button">
        <div class="icon">
          <img src="@/assets/img/addPrompt.png" alt="" />
        </div>
        <div>
          <div class="topTitle">创建您的Prompt</div>
          <div class="topContent">创建您的Prompt</div>
        </div>
      </div>
      <div class="button">
        <div class="icon">
          <img src="@/assets/img/optimizePrompt.png" alt="" />
        </div>
        <div>
          <div class="topTitle">优化Prompt</div>
          <div class="topContent">
            对Prompt进行内容质量和结构上的优化获得更符合期望的大模型推理结果。
          </div>
        </div>
      </div>
      <div class="button">
        <div class="icon">
          <img src="@/assets/img/batchOptimizePrompt.png" alt="" />
        </div>
        <div>
          <div class="topTitle">批量优化Prompt</div>
          <div class="topContent">
            对智能数据中的Prompt数据集进行优化，批量获取优质的Prompt语料。
          </div>
        </div>
      </div>
    </div>
    <div class="tableBox" :style="{ height: tableHeight }">
      <el-tabs v-model="activeName" style="width:100%;height:100%" @tab-click="handleClick">
        <!-- <el-tab-pane label="预置模版" name="presetTemplate" style="width:100%;height:100%">
<presetTemplate/>
    </el-tab-pane> -->
        <el-tab-pane label="自制模版" name="homemadeTemplate" style="width:100%;height:100%">
          <homemadeTemplate />
        </el-tab-pane>
        <el-tab-pane label="我的收藏" name="myCollection" style="width:100%;height:100%">
          <myCollection />
        </el-tab-pane>

      </el-tabs>

    </div>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import homemadeTemplate from './homemadeTemplate/index.vue'
import myCollection from './myCollection/index.vue'
// import presetTemplate from './presetTemplate/index.vue'
import createTemplate from './components/dialog/createTemplate'

export default {
  data() {
    return {
      myDataSetPage: {},
      topButtonBoxHeight: 0,
      activeName: 'homemadeTemplate'
    }
  },

  components: { homemadeTemplate, myCollection },

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

  mounted() {},

  methods: {
    ...mapMutations(['setCurrentMenuId']),
    onReset() {},
    search() {},
    handleChange() {},
    handleClick(tab, event) {
      tab.$children[0].refresh()
    },
    add() {
      this.$dialog
        .show(
          '创建模版',
          createTemplate,
          {
            area: ['100%', '100%']
          },
          { isEdit: false }
        )
        .then((res) => {
          this.refresh()
        })
        .catch((e) => {})
    },
    toPromptOptimization() {
      this.setCurrentMenuId('1719248636136656896')
    },
    tobatchOptimizePrompt() {
      this.setCurrentMenuId('1719248636136656896')
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/style/element-variables.scss';
.topBox {
  background-color: white;
  width: 100%;
  // height: 130px;
  height: 75px;
  margin-bottom: 16px;
  .title {
    color: $--color-text-primary;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 8px;
    padding: 10px 20px 5px 20px;
  }
  .instructions {
    padding: 0px 20px 10px 20px;
  }
}
.topButtonBox {
  display: flex;
  margin-bottom: 20px;
  height: 100px;

  .icon {
    width: 56px;
    height: 56px;
    background: #eef3fe;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    img {
      width: 32px;
      height: 32px;
    }
  }
  .button {
    flex: 1;
    border: none;
    cursor: pointer;
    padding: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #ffffff;
    border-radius: 6px;
  }
  .button + .button {
    margin-left: 16px;
  }
  .button:hover {
    box-shadow: 0 2px 8px #070c141f;
  }
  .topTitle {
    padding: 0 24px 10px 24px;
    font-size: 16px;
  }
  .topContent {
    padding-left: 24px;
  }
}
.tableBox {
  background-color: white;
  width: 100%;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;

  align-content: flex-start;
  justify-content: space-between;
  overflow: auto;
}
.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>
