<!--在线优化-->
<template>
  <div class="onLineOptimization">
    <div class="content">
      对Prompt语料进行内容质量和结构上的优化，便于获得更符合期望的大模型推理结果
    </div>
    <el-input
      type="textarea"
      :rows="3"
      placeholder="请输入原始Prompt"
      v-model="textarea"
      maxlength="1500"
    ></el-input>
    <div class="operationBox">
      <div @click="operation" class="operation">优化参数配置 迭代轮次</div>
      <el-divider direction="vertical"></el-divider>
      <el-cascader
        v-model="value"
        placeholder="请选择服务"
        :size="defaultFormItemSize"
        :options="options"
        @change="handleChange"
      ></el-cascader>
      <el-divider direction="vertical"></el-divider>
      <el-cascader
        v-model="value"
        placeholder="请选择应用"
        :size="defaultFormItemSize"
        :options="options"
        @change="handleChange"
      ></el-cascader>
  
       <el-button  :size="defaultFormItemSize" type="primary">优化</el-button>
      <el-button  :size="defaultFormItemSize" type="primary">推理</el-button>
  
    </div>
    <div class="resultPanel">
      <div class="leftBox">
        <div class="titleBox left">原始</div>
        <div class="leftContent">
          <div class="prompt">Prompt：{{ undefined }}</div>
          <div class="result">推理结果：{{ undefined }}</div>
        </div>
      </div>
      <div class="rightBox">
        <div class="titleBox right">优化后
          <div  style="float: right;">
            <el-button type="primary"  :size="defaultFormItemSize" >复制</el-button>
            <el-button type="primary"  :size="defaultFormItemSize">保存为模板</el-button>
          </div>
        </div>
        <div class="rightContent">
          <div class="prompt">Prompt：{{ undefined }}</div>
          <div class="result">推理结果：{{ undefined }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      textarea: '',
      value: [],
      options: [
        {
          value: 'shejiyuanze',
          label: '设计原则',
          children: [
            {
              value: 'yizhi',
              label: '一致'
            },
            {
              value: 'fankui',
              label: '反馈'
            },
            {
              value: 'xiaolv',
              label: '效率'
            },
            {
              value: 'kekong',
              label: '可控'
            }
          ]
        }
      ]
    };
  },

  components: {},

  computed: {},

  mounted () {},

  methods: {
    handleChange () {},
    operation () {}
  }
};
</script>
<style scoped>
.onLineOptimization {
  overflow: auto;
  height: calc(100% - 40px);
}
.content {
  margin-bottom: 20px;
}
.operationBox {
  display: flex;
  align-items: center;
  height: 50px;
  margin-bottom: 10px;
  margin-top: 10px;
  width: 100%;
}
.operation {
  cursor: pointer;
}
.resultPanel {
  width: 100%;
  margin-top: 20px;
  border-radius: 6px;
  border: 1px solid #d4d6d9;
  overflow: hidden;
  height: calc(100% - 200px);
  background: linear-gradient(#e7efff, #f6f8fe);
  display: flex;
}
.titleBox {
  padding: 18px 25px;
  font-size: 20px;
}
.leftBox {
  width: 50%;
  border-right: 1px solid #d4d6d9;
}
.rightBox {
  width: 50%;
}
.leftContent,.rightContent{
    padding: 18px 25px;
    height:calc(100% - 62px) ;
}
.prompt{
height: 50%;
border-bottom:1px dashed #a8caff;
margin-bottom: 10px;
}
.result{
height: 50%;
}
</style>
