<template>
  <div class="splitConfig mt20">
    <p class="title">
      文件拆分规则：
    </p>
    <ul>
      <!-- 自动拆分 -->
      <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>

    <!-- 添加预览组件 -->
    <split-preview
      :visible.sync="previewVisible"
      :preview-data="previewData"
      :is-auto-split="activeIndex === 0"
      :loading="previewLoading"
      @confirm="handlePreviewConfirm"
      @handleReUpload="handleReUpload"
      @handleClose="handleClose"
    />
  </div>
</template>

<script>
import CustomSplitDialog from './CustomSplitDialog.vue'
import SplitPreview from './SplitPreview.vue' // 引入预览组件
import { execSplit, splitResultPreview } from '@/api/generatedApi'

export default {
  name: 'splitConfig',
  components: {
    CustomSplitDialog,
    SplitPreview // 注册预览组件
  },
  data() {
    return {
      dialogVisible: false,
      activeIndex: 0,
      previewVisible: false, // 控制预览组件显示
      previewData: null, // 预览数据
      previewLoading: false, // 预览加载状态
      splitOptions: [
        {
          icon: 'el-icon-setting',
          title: '自动拆分',
          description: '使用系统默认的拆分方式，适合新手或紧急任务，直接使用系统优化后的算法处理文本。',
          tip: '提示：首次使用时建议先用自动拆分测试效果，再决定是否调整。'
        },
        {
          icon: 'el-icon-medal',
          title: '自定义拆分',
          description: '使用自定义拆分方式可以根据具体需求灵活调整文本分割逻辑，但需要权衡灵活性与复杂度，需要用户具备一定的规则定制经验。',
          tip: ''
        }
      ]
    }
  },
  props: {},
  watch: {},
  filters: {},
  methods: {
    handleClick(index) {
      this.activeIndex = index
      if (index === 1) {
        this.$refs.customTable.init()
      } else {
        this.$refs.customTable.close()
      }
    },

    // 构建API请求参数
    buildExecSplitParams(documentId) {
      const params = {
        documentId: documentId,
        beAuto: this.activeIndex === 0
      }

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

      return params
    },

    // 执行拆分
    async execSplitOperation(params) {
      if (!params.beAuto && !params.rulesId) {
        this.$message.error('请勾选数据')
        return false
      }
      const res = await execSplit(params)
      console.log('execSplit result:', res.content)

      if (res.content.result !== '0') {
        const errorMsg = '执行拆分失败: ' + (res.content.resultMessage || '未知错误')
        this.$message.error(errorMsg)
        throw new Error(errorMsg)
      }

      return res.content.content
    },

    // 获取拆分预览
    async getPreviewOperation(documentId) {
      const res = await splitResultPreview({ documentId })
      console.log('splitResultPreview result:', res.content)

      if (res.content.result !== '0') {
        const errorMsg = '获取拆分预览失败: ' + (res.content.resultMessage || '未知错误')
        this.$message.error(errorMsg)
        throw new Error(errorMsg)
      }

      return res.content.content
    },

    // 处理成功响应
    handleSuccessResponse(execSplitData, previewData) {
      this.$message.success('拆分和预览获取成功！')
      return {
        success: true,
        data: {
          execSplitData,
          previewData
        }
      }
    },

    // 处理错误
    handleOperationError(error) {
      const errorMsg = '操作失败: ' + (error.message || '未知网络错误')
      this.$message.error(errorMsg)
      return {
        success: false,
        message: errorMsg
      }
    },

    // 显示预览
    showPreview(previewData) {
      this.previewData = previewData
      console.log(previewData)
      this.previewVisible = true
    },

    // 处理预览确认
    handlePreviewConfirm() {
      this.previewVisible = false
      // 预览确认后的操作，例如进入下一步
      this.$emit('previewConfirmed')
    },
    handleReUpload() {
      this.previewVisible = false
      // 预览确认后的操作，例如进入下一步
      this.$emit('handleReUpload')
    },
    handleClose() {
      this.previewVisible = false
    },
    // 修改主方法，添加预览功能
    nextStep(documentId) {
      return new Promise(async (resolve, reject) => {
        try {
          this.previewLoading = true
          // 1. 构建参数
          const params = this.buildExecSplitParams(documentId)

          // 2. 执行拆分
          this.execSplitOperation(params).then(async res => {
            if (res) {
              // 3. 获取预览
              const previewData = await this.getPreviewOperation(documentId)
              // 4. 显示预览组件
              this.showPreview(previewData)
            }
          })
        } catch (error) {
          // 6. 处理错误
          const errorResult = this.handleOperationError(error)
          reject(errorResult)
        } finally {
          this.previewLoading = false
        }
      })
    }
  },
  created() {},
  mounted() {},
  computed: {}
}
</script>

<style scoped lang="scss">
.splitConfig {
  .title {
    font-size: 20px;
    margin: 10px 0;
    font-weight: bold;
  }
  ul {
    list-style-type: none;
    padding: 10px;

    li {
      margin-bottom: 20px;
      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 #409eff;
    }
  }
}
</style>
