<script lang="ts" setup>
import { showToast } from 'vant'

interface Props {
  answerList: any[]
  showIndex: number
  isLastAnswer: boolean
}

const props = defineProps<Props>()

const emits = defineEmits([
  'onAnswerConcatEnd', // Answer的stream拼接完成
  'onAttachmentConcatEnd', // Attachment的stream拼接完成
  'onTypingEnd', // Answer打字机输出结束
  'onClickBoxProductItem', // 点击产品列表中的产品
  'onClickLikeItem', // 点击了猜你想问
  'onClickStop', // 点击停止生成
  'onClickReload', // 点击重新生成
  'onLastAnswer', // 上一条答案
  'onNextAnswer', // 下一条答案
  'onFullEnd', // 所有内容输出完成
])

const curIdx = ref(0)

// const curAnswer = computed(() => props.answerList[curIdx.value] || {})

function getCurIdx() {
  return curIdx.value
}

function setCurIdx(idx: number) {
  curIdx.value = idx
}

function onFullEnd() {
  emits('onFullEnd', {
    data: null,
    curAnswerIdx: curIdx.value,
  })
}

function onClickLikeItem(data: any) {
  emits('onClickLikeItem', data)
}

function onClickBoxProductItem(data: any) {
  emits('onClickBoxProductItem', data)
}

function onClickStop() {
  emits('onClickStop', {
    data: props.answerList[curIdx.value],
    curAnswerIdx: curIdx.value,
  })
}

function onClickReload() {
  const appConfig = JSON.parse(window.localStorage.getItem('__APP_CONFIG__') || '')
  if (props.answerList.length === (appConfig?.repeatGenerateAnswerNum)) {
    showToast(`当前最多支持 ${appConfig?.repeatGenerateAnswerNum} 次回答`)
    return
  }
  const params = {
    data: props.answerList[curIdx.value],
    curAnswerIdx: curIdx.value,
  }
  emits('onClickReload', params)
}

function onLastAnswer() {
  if (curIdx.value === 0)
    return
  const idx = curIdx.value
  curIdx.value--
  emits('onLastAnswer', {
    data: props.answerList[curIdx.value],
    curAnswerIdx: idx,
    afterAnswerIdx: curIdx.value,
  })
}

function onNextAnswer() {
  if (curIdx.value === props.answerList.length - 1)
    return
  const idx = curIdx.value
  curIdx.value++
  emits('onLastAnswer', {
    data: null,
    curAnswerIdx: idx,
    afterAnswerIdx: curIdx.value,
  })
}

watch(() => props.showIndex, (val) => {
  setCurIdx(val || 0)
}, {
  immediate: true,
})

defineExpose({
  getCurIdx,
  setCurIdx,
})
</script>

<template>
  <div class="ai-answer-box">
    <div v-for="(item, index) in props.answerList" :key="index" class="ai-answer-item-wrap">
      <AiAnswer
        v-show="index === curIdx"
        :conversation-id="item.conversationId"
        :record-id="item.recordId"
        :stream-data="item.streamData"
        :is-show="item.isShow"
        :is-last-answer="props.isLastAnswer"
        :answer-list="props.answerList"
        :cur-idx="index"
        @on-full-end="onFullEnd"
        @on-click-like-item="onClickLikeItem"
        @on-click-box-product-item="onClickBoxProductItem"
        @on-click-stop="onClickStop"
        @on-click-reload="onClickReload"
        @on-next-answer="onNextAnswer"
        @on-last-answer="onLastAnswer"
      />
    </div>
    <!-- <div v-if="props.answerList.length !== 1" class="pagination-wrap">
      <SvgIcon :style="{ opacity: curIdx === 0 ? 0.3 : 1 }" size="10px" name="arrowGreen" @click="onLastAnswer" />
      <span>{{ curIdx + 1 }}/{{ props.answerList.length }}</span>
      <SvgIcon :style="{ opacity: curIdx === props.answerList.length - 1 ? 0.3 : 1 }" style="transform: rotate(180deg);" size="10px" name="arrowGreen" @click="onNextAnswer" />
    </div> -->
  </div>
</template>

<style lang="scss" scoped>
.ai-answer-box {
  position: relative;
}
.pagination-wrap {
  font-family: alir, AlibabaPuHuiTi_2_55_Regular;
  font-size: 12px;
  color: rgba(57, 61, 70, 0.7);
  line-height: 16px;
  text-align: left;
  font-style: normal;
  position: absolute;
  right: 12px;
  bottom: 22px;
  display: flex;
  align-items: center;
  > span {
    margin: 0 6px;
  }
}
</style>
