<template>
  <div class="splitConfig mt20">
    <ul class="flex">
      <!-- 自动题词 -->
      <li
        class="flex"
        :class="activeIndex === index ? 'active' : ''"
        v-for="(item, index) in splitOptions"
        :key="index"
        @click="handleClick(index)"
      >
        <div>
          <svg
            v-if="index === 0"
            t="1744335709188"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2464"
            width="32"
            height="32"
          >
            <path
              d="M933.868272 511.691752a140.807706 140.807706 0 0 1 90.131728-131.067068 525.562914 525.562914 0 0 0-57.334136-138.64997 139.882962 139.882962 0 0 1-184.948826-184.948826A525.562914 525.562914 0 0 0 643.067068 0a140.376159 140.376159 0 0 1-262.134136 0A525.562914 525.562914 0 0 0 242.282962 57.334136a139.882962 139.882962 0 0 1-184.948826 184.948826A506.698134 506.698134 0 0 0 0 380.932932a140.376159 140.376159 0 0 1 0 262.134136 525.562914 525.562914 0 0 0 57.334136 138.64997 139.882962 139.882962 0 0 1 184.948826 184.948826 525.562914 525.562914 0 0 0 138.64997 57.334136 140.376159 140.376159 0 0 1 262.134136 0 525.562914 525.562914 0 0 0 138.64997-57.334136 139.882962 139.882962 0 0 1 184.948826-184.948826 506.698134 506.698134 0 0 0 57.334136-138.64997A140.807706 140.807706 0 0 1 933.868272 511.691752zM511.691752 652.437809A140.437809 140.437809 0 1 1 652.437809 511.691752 140.499458 140.499458 0 0 1 511.691752 652.437809z"
              fill="#1D85ED"
              p-id="2465"
            ></path>
          </svg>
          <svg
            v-if="index === 1"
            t="1744335834635"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="7994"
            width="32"
            height="32"
          >
            <path
              d="M746 181.1c10.3 0 19.4 6.1 23.3 15.6l1 2.3 1.2 2.2 110.4 210c2.9 8.6 0.9 18.3-5.3 25l-0.6 0.7-0.6 0.7-344.5 401.9c-6.4 6.7-14.1 7.7-18.2 7.7s-11.7-1-18.2-7.7L150.1 437.6l-0.6-0.7-0.6-0.7c-6.2-6.8-8.2-16.4-5.3-25l110.4-210 1.2-2.2 1-2.3c3.9-9.5 13.1-15.6 23.3-15.6H746m0-54.6H279.4c-32.3 0-61.4 19.5-73.8 49.3L93.8 388.7c-11.9 28.7-6 61.6 14.9 84.4l345.2 402.7c15.8 17.3 37.3 25.9 58.9 25.9 21.5 0 43-8.6 58.9-25.9l345.2-402.7c20.9-22.9 26.8-55.8 14.9-84.4l-112-212.9c-12.3-29.8-41.5-49.3-73.8-49.3z"
              p-id="7995"
              fill="#d81e06"
            ></path>
            <path
              d="M513.9 524.6c-19.1 0-37.5-8.1-50.4-22.2l-97.7-106.7c-10.2-11.1-9.4-28.4 1.7-38.5 11.1-10.2 28.4-9.4 38.5 1.7l97.7 106.7c3.6 3.9 7.9 4.5 10.2 4.5 2.3 0 6.6-0.6 10.2-4.5l95.5-104.2c10.2-11.1 27.4-11.9 38.5-1.7 11.1 10.2 11.9 27.4 1.7 38.5l-95.5 104.2c-13 14.1-31.3 22.2-50.4 22.2z"
              p-id="7996"
              fill="#d81e06"
            ></path>
          </svg>
        </div>
        <div class="block">
          <h3>{{ item.title }}</h3>
          <p class="tips">{{ item.description }}</p>
          <p v-if="item.tip" class="tips">{{ item.tip }}</p>
        </div>
      </li>
    </ul>
    <!-- 弹窗组件 -->
    <custom-split-dialog class="active" ref="customTable">
    </custom-split-dialog>

    <!-- 添加题词预览组件 -->
    <extract-preview
      :visible.sync="previewVisible"
      :extract-results="extractResults"
      :is-auto-extract="activeIndex === 0"
      :loading="previewLoading"
      :documentList="documentList"
      @confirm="handlePreviewConfirm"
    />
  </div>
</template>

<script>
import CustomSplitDialog from './CustomWords.vue'
import ExtractPreview from './ExtractPreview.vue'
import {
  execExtract,
  getExtractResultList,
  saveContentToDocument
} from '@/api/generatedApi'

export default {
  name: 'splitConfig',
  components: {
    CustomSplitDialog,
    ExtractPreview
  },
  data() {
    return {
      dialogVisible: false,
      activeIndex: 0,
      previewVisible: false,
      extractResults: [],
      previewLoading: false,
      splitOptions: [
        {
          icon: 'el-icon-setting',
          title: '自动题词',
          description:
            '使用系统默认的题词方式，适合新手或紧急任务，直接使用系统预设题词规则处理文本。',
          tip: '提示：首次使用时建议先用自动题词测试效果，再决定是否调整。'
        },
        {
          icon: 'el-icon-medal',
          title: '自定义题词',
          description:
            '使用自定义题词方式可以根据具体需求灵活调整文本分割逻辑。',
          tip: '但需要权衡灵活性与复杂度，需要用户具备一定的题词经验。'
        }
      ],
      documentId: ''
    }
  },
  props: {
    documentList: {
      type: Array,
      default: () => []
    }
  },
  watch: {},
  filters: {},
  methods: {
    handleClick(index) {
      this.activeIndex = index
      if (index === 1) {
        this.$refs.customTable.init()
      } else {
        this.$refs.customTable.close()
      }
    },

    // 构建执行题词的参数
    buildExecExtractParams(documentId) {
      let params = {
        documentId: documentId,
        beAuto: this.activeIndex === 0
      }
      let splitDocIds = documentId.split(',')
      if (splitDocIds.length > 1) {
        params.documentId = undefined
        params.documentIds = splitDocIds
      }

      if (!params.beAuto && this.$refs.customTable.ruleId) {
        params.rulesId = this.$refs.customTable.ruleId
      }

      return params
    },

    // 执行题词操作
    async execExtractOperation(params) {
      if (!params.beAuto && !params.rulesId) {
        this.$message.error('请勾选数据')
        return false
      }
      const res = await execExtract(params)
      if (res.content.result !== '0') {
        throw new Error(res.content.resultMessage || '执行题词失败')
      }

      return res.content.content
    },

    // 显示预览
    showExtractPreview(results) {
      this.extractResults = results || []
      this.previewVisible = true
    },

    // 获取题词结果列表 - 修改后的方法
    async getExtractResultOperation(documentId) {
      if (documentId) {
        this.documentId = documentId
      }
      this.previewLoading = true
      const params = { documentId }
      const res = await getExtractResultList(params)
      if (res.content.result !== '0') {
        throw new Error(res.content.resultMessage || '获取题词结果失败')
      }

      const results = res.content.content || []

      // 显示预览弹窗
      this.showExtractPreview(results)
    },
    // 处理预览确认
    handlePreviewConfirm(extractResults) {
      this.$router.push({
        path: '/knowledge/reviewKnowledge',
        query: {
          documentId: this.documentId,
          datasetId: this.$route.query.datasetId,
          active: '3'
        }
      })

      // this.saveContentToDocumentOperation(this.documentId, extractResults)
    },
    // 保存题词内容到文档
    async saveContentToDocumentOperation(documentId, resultList) {
      const params = {
        documentId,
        resultDTOList: resultList.map(item => ({
          id: item.id,
          attribute: item.attribute,
          attributeContent: item.attributeContent
        }))
      }
      const res = await saveContentToDocument(params)
      // 使用 push 的方式返回，防止出现页面异常跳转的问题
      // this.$router.go(-1)
      this.$router.push({
        path: '/knowledge/detail',
        query: { ...this.$route.query }
      })
    },

    // 主方法
    nextStep(documentId) {
      this.documentId = documentId

      return new Promise(async (resolve, reject) => {
        try {
          // 1. 执行题词
          const params = this.buildExecExtractParams(documentId)
          this.execExtractOperation(params).then(async res => {
            if (res) {
              // await this.getExtractResultOperation(documentId)
              // 显示预览弹窗
              this.showExtractPreview(res)
            }
          })
        } catch (error) {
          console.error('题词操作失败:', error)
          reject({
            success: false,
            message: error.message || '题词操作失败'
          })
        }
      })
    }
  },
  created() {},
  mounted() {},
  computed: {}
}
</script>

<style scoped lang="scss">
@import '@/assets/sass/renderSass/theme.scss';
.splitConfig {
  .title {
    font-size: 20px;
    margin: 10px 0;
    font-weight: bold;
  }
  ul {
    list-style-type: none;
    padding: 10px;

    & li {
      flex: 1;
      border: 1px solid #d9d9d9;
      padding: 15px;
      border-radius: 6px;
      list-style-type: none;
      //width: 80%;

      p {
        margin: 10px 0;
        font-size: 14px;
        color: #666;
      }
      .block {
        margin-left: 20px;
        h3 {
          margin-bottom: 20px;
          font-size: 16px;
          color: #333;
        }
        .tips {
          color: #9e9e9e;
        }
      }
      &.active {
        border: 1px solid var(--color-primary);
        //background: #fefefe;
        transition: all 1s ease;
        //color: #fff;
        & .tips {
          //color: #fff;
          //transition: all 1s ease;
        }
      }
    }

    li + li {
      margin-left: 20px;
    }
  }
}
</style>
