<script setup lang="ts">
import AiAnswer from '@/components/AiAnswer/index.vue'
import MindMap from '@/components/MindMap/index.vue'

const data = [
  // 第一段
  {
    answer: '您询问的“共同富裕产品”是以下哪个?',
    endAnswerFlag: false,
    endAttachmentFlag: false,
    productCode: '00001',
    attachmentList: [
      {
        type: 'box',
        content: {
          productList: [
            {
              productCode: '00001',
              productName: '产品A产品A产品A产品A产品A产品A产品A产品A产品A',
            },
            {
              productCode: '00002',
              productName: '产品B产品B产品B产品B产品B产品B产品B产品B产品B产品B产品B产品B产品B产品B产品B',
            },
            {
              productCode: '00003',
              productName: '产品C',
            },
          ],
        },
      },
    ],
  },
  // 第二段
  {
    answer: '',
    endAnswerFlag: true,
    endAttachmentFlag: false,
    attachmentList: [],
  },
]

const data2 = ref<any>({
  answerList: [
    {
      isShow: true,
      streamData: [{
        recordId: '1801583317759791106',
        groupId: '1801569545407287297',
        sceneCode: '',
        question: '购买保险产品有什么年龄限制',
        productCode: '',
        answer: '您好，购买保险产品的年龄限制因产品而异。不同的保险产品根据其设计初衷和风险承受能力，会有不同的投保年龄范围。例如，一些少儿保险产品可能主要针对未成年人，而一些养老保险或终身保险产品则可能允许更广泛的年龄范围进行投保。\n\n在国民养老保险股份有限公司，我们提供多样化的保险产品以满足不同年龄段客户的需求。对于具体的共同富裕B产品，其投保年龄限制会在产品说明或合同中明确标注。为了确保您能选择到最适合自己的保险产品，建议您直接查阅相关产品的官方资料或联系我们的专业客服进行咨询。\n\n我们的客服团队具备丰富的保险知识和专业的服务技能，他们将竭诚为您解答关于投保年龄限制以及其他任何与保险产品相关的问题。同时，我们也提醒您在购买保险产品时，务必充分了解产品的保障范围、责任免除等重要条款，以确保您的权益得到充分保障。\n\n感谢您对国民养老保险股份有限公司的关注与信任，我们将持续为您提供优质的保险服务。',
        toolName: '',
        attachmentList: null,
        collectionFlag: false,
        feedbackStatus: '00',
        terminateFlag: false,
        qaTime: '2024-06-14T19:52:04',
      }],
    },
  ],
})

const pageName = ref('demo')
const router = useRouter()

const streamData = ref<any>([])

const idx = ref(0)

const aiAnswerBoxRef = ref()
function onReload() {
  // 加一条新的空的数据
  data2.value.answerList.push({
    isShow: false,
    streamData: [
    ],
    groupId: 'xxx',
    conversationId: 'xxx',
  })
  // 手动往后翻一页
  aiAnswerBoxRef.value.setCurIdx(data2.value.answerList.length - 1)

  // 模拟接口请求
  setTimeout(() => {
    data2.value.answerList[data2.value.answerList.length - 1].streamData.push({
      answer: '你好',
    })
  }, 2000)
}

function onStop(data: any) {
  // 手动设置isShow
  data2.value.answerList[data.curAnswerIdx].isShow = true
  // 这里请求接口，停止生成 todo
  // ...
}

onMounted(() => {
  setInterval(() => {
    if (idx.value >= data.length)
      return
    streamData.value.push(data[idx.value])
    idx.value++
  }, 400)
})

const mindmapData = {
  nodes: [
    {
      id: 'node1',
      label: 'Circle1',
      x: 150,
      y: 150,
    },
    {
      id: 'node2',
      label: 'Circle2',
      x: 400,
      y: 150,
    },
  ],
  edges: [
    {
      source: 'node1',
      target: 'node2',
    },
  ],
}
</script>

<template>
  <div class="page-demo-container">
    <MindMap :data="mindmapData" />

    <SvgIcon name="collectionD" color="#666" />
    <div class="inner">
      <div>{{ pageName }}</div>
      <div>
        <van-button @click="router.push('/collection')">
          收藏页
        </van-button>
      </div>
      <br>
      <!-- <AiAnswer
        :is-show="true"
        :is-collectionned="false"
        box-active-product-code="00001"
        :stream-data="streamData"
      /> -->

      <AiAnswerBox
        ref="aiAnswerBoxRef"
        :answer-list="data2.answerList"
        @on-reload="onReload"
        @on-stop="onStop"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.page-demo-container {
  box-sizing: border-box;
  padding: 46px 23px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
</style>
