<template>
  <div class="continuation">
    <br />
    <div class="head">
      <span> 根据上下文，为您推荐： </span>
      <el-select
        v-model="select"
        style="float: right; margin-top: 15px"
        @change="get"
      >
        <el-option label="通用" value="common" />
        <el-option label="新闻" value="news" />
        <el-option label="论文" value="paper" />
        <el-option label="公文" value="official" />
        <el-option label="小说" value="novel" />
      </el-select>
    </div>

    <div
      class="c_main"
      @click="() => seva(item)"
      v-for="(item, i) in list"
      :key="i"
      v-text="item.text"
    ></div>
  </div>
</template>

<script setup>
import { ref, defineEmits, defineProps } from 'vue';
import { checkContent } from '@/api/aleditor.js';
const emits = defineEmits(['closeType', 'setHtml', 'getImage']);
const select = ref('common');
const list = ref([]);
const seva = text => {
  emits('setHtml', text);
};
const load = ref(false);
const props = defineProps({
  headTitle: String,
  html: Function,
  text: Function,
});

const get = () => {
  load.value = true;
  checkContent({
    data: {
      content: props.html(),
      contentText: props.text(),
      docId: localStorage.getItem('fileId') || undefined,
      generationInfo: {
        sid: Date.now(),
        domain: select.value,
        data: [{ prefix: props.text(), title: props.headTitle }],
      },
      shouldGenerate: true,
    },
  })
    .then(r => {
      load.value = false;
      let li = r.data.result || [];
      let l = [];
      for (let i = 0; i < li.length; i++) {
        const v = li[i];
        if (v.candidate && v.candidate.length) l.push(...v.candidate);
      }
      list.value = l;
    })
    .catch(() => {
      load.value = false;
    });
};
get();
</script>

<style scoped>
.head {
  font-size: 14px;
  height: 60px;
  line-height: 60px;
  width: 95%;
}
.c_main {
  padding: 10px;
  line-height: 28px;
  font-size: 14px;
  border: 1px solid #e1e1e1;
  width: 95%;
  cursor: pointer;
  margin-bottom: 20px;
}
.c_main:hover {
  border-color: #93c8ff;
}
</style>
