<script lang="ts" setup>
import { onMounted } from 'vue'
import { PullRefresh as VanPullRefresh } from 'vant'
import SceneTips from './SceneTips.vue'
import AiAnswerBox from '@/components/AiAnswerBox/index.vue'
import AiAnswer from '@/components/AiAnswer/index.vue'

interface Props {
  messageList: any[]
  toolListShow: boolean
  historyMode: boolean
}

withDefaults(defineProps<Props>(), {
  messageList: [] as any,
  toolListShow: false,
})

const emits = defineEmits([
  'onClickBoxProductItem', // 产品盒子
  'onClickLikeItem', // 猜你喜欢
  'onFullEnd', // 答案结束
  'refreshList', // 获取更多历史记录
  'onClickReload', // 重新回答
  'onClickStop', // 停止回答
])


function onFullEnd() {
  emits('onFullEnd')
}

// 重新回答
function onClickReload(e: any) {
  console.log(1)
  emits('onClickReload', e)
}

// 停止回答
function onClickStop() {
  emits('onClickStop')
}


function onClickLikeItem(q: string) {
  emits('onClickLikeItem', q)
}

function onClickBoxProductItem(productInfo: {
  productCode: string
  productName: string
}) {
  emits('onClickBoxProductItem', productInfo)
}

const loading = ref(false)
const loadEnd = ref(true)
function onRefresh() {
    loading.value = false
  // console.log('下拉', loadEnd.value)
  // if (loadEnd.value)
  //   loading.value = false
  // else
  //   emits('refreshList')
}

function loadMoreCompleted(status: string) {
  loading.value = false
  loadEnd.value = status === 'END'
}

defineExpose({
  loadMoreCompleted,
  // nextPage
})

onMounted(() => {})
</script>

<template>
  <VanPullRefresh v-model="loading" @refresh="onRefresh">
    <!-- 下拉提示，通过 scale 实现一个缩放效果 -->
    <template #pulling="props" />

    <!-- 释放提示 -->
    <template #loosing />

    <!-- 加载提示 -->
    <template #loading />
    <div class="cps-message-box-container" :class="{ 'open-tool': toolListShow, 'history-mode': historyMode }">
      <div v-for="(item, index) in messageList" :key="index">
        <div class="qa-time">
          {{ item.qaTime }}
        </div>
        <div v-if="item.role === 'user'" class="user-question-wrap">
          <div class="user-question">
            <div v-html="item.message"></div>
          </div>
        </div>
        <div v-if="item.role === 'system'" class="system-answer-wrap">
          <AiAnswerBox
            :ref="`aiAnswerBoxRef-${item.groupId}`"
            :answer-list="item.answerList"
            :show-index="item.showIndex"
            :is-last-answer="item.isLastAnswer"
            @on-full-end="onFullEnd"
            @on-click-like-item="onClickLikeItem"
            @on-click-reload="onClickReload"
            @on-click-stop="onClickStop"
            @on-click-box-product-item="onClickBoxProductItem"
          />
          <!-- <AiAnswer
            ref="aiAnswerBoxRef"
            :conversation-id="item.conversationId"
            :stream-data="item.streamData"
            :is-show="item.isShow"
            @on-full-end="onFullEnd"
            @on-click-like-item="onClickLikeItem"
            @on-reload="onReload"
            @on-stop="onStop"
            @on-click-box-product-item="onClickBoxProductItem"
          /> -->
        </div>
        <div v-if="item.role === 'scene'" class="scene-wrap">
          <SceneTips :select-active="item.select" />
        </div>
      </div>
    </div>
  </VanPullRefresh>
</template>

<style lang="scss" scoped>
.cps-message-box-container {
  padding-top: 20px;
  padding-bottom: calc(100px + constant(safe-area-inset-bottom));
  padding-bottom: calc(100px + env(safe-area-inset-bottom));
  &.open-tool {
    padding-bottom: calc(200px + constant(safe-area-inset-bottom));
    padding-bottom: calc(200px + env(safe-area-inset-bottom));
  }
  &.history-mode {
    padding-bottom: calc(constant(safe-area-inset-bottom));
    padding-bottom: calc(env(safe-area-inset-bottom));
    // padding-bottom: 0;
  }
  .qa-time {
    font-size: 13px;
    color: #b2b8c1;
    line-height: 18px;
    text-align: center;
    margin-bottom: 20px;
  }
  .user-question-wrap {
    display: flex;
    justify-content: flex-end;
    padding-right: 23px;
    margin-bottom: 20px;
    .user-question {
      max-width: 290px;
      padding: 12px;
      background: linear-gradient( 153deg, #54DDFF 0%, #29B6FD 100%);
      box-shadow: 0px 2px 4px 0px rgba(236,242,248,0.3);
      border-radius: 0px 16px 16px 16px;
      font-size: 14px;
      color: #ffffff;
      line-height: 20px;
    }
  }
  // .user-question-wrap::after {
  //   content: '';
  //   display: inline-block;
  //   background-image: url('./images/q-triangle.png');
  //   width: 6px;
  //   height: 12px;
  //   vertical-align: middle;
  //   margin: auto 0;
  // }
  .system-answer-wrap {
    padding: 0 20px;
    margin-bottom: 20px;
  }
  .scene-wrap {
    margin-bottom: 20px;
  }
}
</style>
