<template>
  <div class="segment-split-view">
    <div class="segment-list">
      <div
        v-for="(segment, index) in descriptions.data"
        :key="index"
        class="segment-list-item"
        :class="{ active: activeSegment === index }"
        @click="handleSegmentClick(index)"
      >
        <div class="flex align-items-c justify-content-b" style="gap: 8px">
          <div class="flex align-items-c " style="gap: 8px">
            <span class="el-icon-s-unfold"></span>
            <span class="segment-number">分段 - {{ index + 1 }}</span
            >·
            <span v-if="segment.word_count > 0"
              >{{ segment.word_count }}个字符</span
            >
          </div>

          <div
            class="actions ml10 flex align-items-c mr10"
            style="gap: 10px"
            v-if="!noEdit"
          >
            <!--             删除 编辑-->
            <el-icon
              class="el-icon-edit mr10"
              @click.native.stop="handleSegmentClick(index)"
            ></el-icon>
            <el-icon
              class="el-icon-delete"
              @click.native.stop="deleteSegment(segment, index)"
            ></el-icon>
            <!--            <el-switch-->
            <!--              size="mini"-->
            <!--              @click.native.stop=""-->
            <!--              v-model="segment.enabled"-->
            <!--            ></el-switch>-->
          </div>
        </div>

        <div>
          <div class="context">
            <p>Q {{ segment.content }}</p>
            <p>A {{ segment.answer }}</p>
          </div>
        </div>

        <!--            <div class="segment-keywords flex" v-if="segment.keywords && segment.keywords.length">-->
        <!--              <p v-for="(item, index) in segment.keywords" :key="index" class="mr10">#{{ item }}</p>-->
        <!--            </div>-->
        <!--                  <span class="segment-chars">{{ segment.characters || 0 }} characters</span>-->
      </div>
    </div>

    <!-- 弹窗 -->
    <el-drawer
      title="问答详情"
      :visible.sync="dialogVisible"
      :wrapperClosable="false"
      width="50%"
      append-to-body
      :modal="false"
      :before-close="handleClose"
    >
      <div
        style="height:calc(100% - 32px);overflow-x: hidden;overflow-y: auto"
        v-if="
          activeSegment !== null &&
            descriptions.data &&
            descriptions.data.length > 0
        "
      >
        <div class="segment-content">
          <div>
            <div>
              <p class="">QUESTION：</p>
              <p contenteditable class="resetHtml fs13" ref="content">
                {{ descriptions.data[activeSegment].content }}
              </p>
            </div>
            <div>
              <p class="">ANSWER：</p>
              <p contenteditable class="resetHtml fs13" ref="answer">
                {{ descriptions.data[activeSegment].answer }}
              </p>
            </div>
          </div>
          <div
            class="flex align-items-c mt20 fs13"
            v-if="
              descriptions.data[activeSegment].keywords &&
                descriptions.data[activeSegment].keywords.length
            "
            style="flex-wrap: wrap"
          >
            <span>关键词 ：</span>
            <el-tag
              v-for="(item, index) in descriptions.data[activeSegment].keywords"
              :key="index"
              class="mr10"
              size="medium"
              type="info"
              :closable="
                descriptions.data[activeSegment].keywords.length > 1 && !noEdit
              "
              @close="tagClose(item, index)"
            >
              {{ item }}
            </el-tag>
            <el-input
              class="input-new-tag"
              v-if="createdTag"
              v-model="inputValue"
              ref="saveTagInput"
              size="small"
              @keyup.enter.native="handleInputConfirm"
            />
            <el-button
              v-if="!noEdit && !createdTag"
              size="medium"
              @click="showInput"
              class="fs12"
              style="padding: 7px;border-radius: 4px;font-size: 12px"
              >添加标签</el-button
            >
          </div>
        </div>
      </div>
      <div class="dialog-footer text-right">
        <el-button @click="dialogVisible = false" size="medium">关闭</el-button>
        <el-button @click="saveUS" size="medium" type="primary" v-if="!noEdit"
          >保存</el-button
        >
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { segmentUpdate, segmentDelete } from '@/api/generatedApi'

export default {
  name: 'QAModel',
  props: {
    noEdit: {
      type: Boolean,
      default: false
    },
    visible: Boolean,
    descriptions: {
      type: Object,
      default: () => ({ data: [] })
    },
    parentForm: {
      type: Object,
      default: () => ({})
    }
  },
  watch: {},
  data() {
    return {
      createdTag: false,
      inputValue: '',
      activeSegment: null,
      dialogVisible: false
    }
  },
  mounted() {},
  methods: {
    deleteSegment(segment, index) {
      this.$messageBox(
        () => {
          segmentDelete({
            documentId: this.parentForm.id,
            segmentId: segment.id
          }).then(res => {
            if (res) {
              this.$message.success('删除成功')

              this.descriptions.data.splice(index, 1)
            }
          })
        },
        '是否删除当前分段,删除后不可恢复',
        'warning',
        '提示'
      )
    },
    saveUS() {
      let params = {
        keywords: this.descriptions.data[this.activeSegment].keywords,
        content: this.$refs.content.innerHTML,
        answer: this.$refs.answer.innerHTML
      }
      this.saveSegment(params, () => {
        this.$message.success('保存成功')
      })
    },

    showInput() {
      this.createdTag = true
    },
    tagClose(item, index) {
      this.descriptions.data[this.activeSegment].keywords.splice(index, 1)
      // console.log(this.descriptions.data[this.activeSegment].keywords)
      let params = {
        keywords: this.descriptions.data[this.activeSegment].keywords,
        content: this.$refs.content.innerHTML,
        answer: this.$refs.answer.innerHTML
      }
      // this.saveSegment(params)
    },

    handleInputConfirm() {
      let params = {
        keywords: [
          ...this.descriptions.data[this.activeSegment].keywords,
          this.inputValue
        ],
        content: this.$refs.content.innerHTML,
        answer: this.$refs.answer.innerHTML
      }
      this.saveSegment(params)
    },

    saveSegment(params, fun) {
      params.documentId = this.parentForm.id
      params.segmentId = this.descriptions.data[this.activeSegment].id
      segmentUpdate(params).then(res => {
        if (res) {
          this.descriptions.data[this.activeSegment] = JSON.parse(
            JSON.stringify(res.content.content)
          )
          // res.content.content.keywords
          // this.descriptions.data[this.activeSegment].content =
          //   res.content.content.content
          // this.descriptions.data[this.activeSegment].answer =
          //   res.content.content.answer
          this.createdTag = false
          this.inputValue = ''
          if (fun) {
            fun()
          }
        }
      })
    },

    handleSegmentClick(index) {
      this.activeSegment = index
      this.dialogVisible = true
    },
    handleClose() {
      this.dialogVisible = false
    }
  }
}
</script>
<style scoped lang="scss">
.segment-split-view {
  display: block;
}

.segment-list {
  width: 100%;
  //height: 400px;
  overflow-y: auto;
}
.context {
  color: #3a3f4f;
  font-size: 14px;
}
.segment-list-item {
  color: #70778d;
  font-size: 14px;
  cursor: pointer;
  padding: 15px 0 20px 15px;
  border-radius: 2px;
  transition: background-color 0.3s;
  border-bottom: 1px solid #f3f5f7;
  position: relative;
  .actions {
    position: absolute;
    display: none; /* 默认隐藏 */
    background: #fff;
    padding: 3px 5px;
    border-radius: 5px;
    right: 10px;
    top: 15px;
  }

  &:hover .actions {
    display: flex; /* 悬停或激活时显示操作按钮 */
    gap: 10px;
  }
  &:hover {
    background: #f3f5f7;
  }

  &.active {
    background: #f3f5f7;
  }

  p {
    margin: 15px 0;
  }
  .segment-number {
    //color: #0a84ff;
  }
  .segment-keywords {
    font-weight: 400;
    font-size: 12px;
    color: #70778d;
    flex-wrap: wrap;
    p {
      margin: 0 10px 0 0;
    }
  }
}

.segment-content {
  padding: 20px;
  background: #f9f9f9;
  border-radius: 15px;
  //white-space: pre-wrap;
  line-height: 35px;
  color: #666;
}
.input-new-tag {
  width: 100px;
}
</style>
