<template>
  <div class="add-segment-container">
    <div class="add-segment-content">
      <div class="add-segment-text fs13">
        <!--        Q&A-->
        <div v-if="descriptions.doc_form === 'qa_model'">
          <div class="mv10">Question</div>
          <el-input
            type="textarea"
            class="text-input-q-a"
            v-model="question"
            placeholder="请填写分段内容"
          ></el-input>

          <div class="mv10">Answer</div>

          <el-input
            type="textarea"
            class="text-input-q-a"
            v-model="answer"
            placeholder="请填写分段内容"
          ></el-input>
        </div>
        <!--        model-->
        <div v-else>
          <el-input
            type="textarea"
            class="text-input"
            v-model="question"
            placeholder="请填写分段内容"
          ></el-input>
        </div>
      </div>
    </div>
    <div class="add-segment-bottom ">
      <div class=" mt5 fs13 mb5" style="flex:none">关键词：</div>

      <div
        class="add-segment-tags mb10 fs14 flex align-items-s justify-content-s "
      >
        <div
          class="flex  align-items-s mb10"
          style="max-height: 80px;overflow: auto;gap: 10px;flex-wrap: wrap;align-items: self-start"
        >
          <el-tag
            v-for="(item, index) in keywords"
            size="medium"
            :closable="keywords.length > 1"
            type="info"
            @close="keywords.splice(index, 1)"
            >{{ item }}</el-tag
          >

          <el-input
            class="input-new-tag"
            v-if="createdTag"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="pushKeyWords"
          />
          <el-button
            v-if="!createdTag"
            size="small"
            @click="showInput"
            class="fs12"
            style="padding: 7px;border-radius: 4px;font-size: 12px"
            >添加标签</el-button
          >
        </div>
      </div>

      <div class="flex align-items-c justify-content-b">
        <el-checkbox v-model="continueAdd">连续新增</el-checkbox>
        <div>
          <el-button size="medium" @click="close">取消</el-button>
          <el-button
            class="line-button"
            size="medium"
            @click="handleInputConfirm"
            >保存</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { segmentCreate } from '@/api/generatedApi'

export default {
  name: 'addSegment',
  data() {
    return {
      continueAdd: false,
      question: '',
      answer: '',
      createdTag: false,
      inputValue: '',
      keywords: []
    }
  },
  props: {
    descriptions: {
      type: Object,
      default: () => ({ data: [] })
    },
    documentId: {
      type: String,
      default: () => ''
    }
  },
  methods: {
    pushKeyWords() {
      this.keywords.push(this.inputValue)
      this.createdTag = false
    },
    showInput() {
      this.createdTag = true
    },
    handleInputConfirm() {
      let params = {
        documentId: this.documentId,
        segment: {
          keywords: this.keywords,
          content: this.question,
          answer: this.answer
        }
      }
      segmentCreate(params).then(res => {
        if (res) {
          this.$message.success('新增分段成功')
          this.descriptions.data.push({
            ...res.content.content
          })

          if (!this.continueAdd) {
            this.close()
          }
        }
      })
      // this.saveSegment(params)
    },

    close() {
      this.$emit('close', true)
    },
    addSegment() {
      this.$emit('addSegment', this.text)
      this.text = ''
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .text-input {
  height: 100%;
  .el-textarea__inner {
    padding: 5px 8px;
    height: calc(100vh - 310px);
    //border: unset;
    //resize: unset;
    //height: 100%;
  }
}

::v-deep .text-input-q-a {
  height: 100%;
  .el-textarea__inner {
    padding: 5px 8px;
    height: calc(100vh - 700px);
    //border: unset;
    //resize: unset;
    //height: 100%;
  }
}
.add-segment-container {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  &::-webkit-scrollbar {
    width: 0;
  }

  & .add-segment-content {
    //background: rebeccapurple;

    //overflow-y: hidden;
    overflow-x: hidden;
    & .add-segment-text {
      height: calc(100vh - 310px);
      //height: 100%;
      //height: 999px;
      //background: blue;
    }
  }

  & .add-segment-bottom {
    width: 100%;
    padding: 10px 0 0 0;
    position: sticky;
    background: #fff;
    bottom: 0;
    & .add-segment-tags {
      height: 100px;
      //background: red;
    }
  }
}
.input-new-tag {
  width: 100px;
}
</style>
