<!-- ChatItem.vue -->
<template>
  <div
      v-if="getQuestion"
      :class="['chat-card', 'chat-q']"
  >
    <div
        class="chat-card_item"
        style="display: flex;flex-direction: column;align-items: flex-end;"
    >
      <div
          v-if="item.questionType == 'img'"
          class="loading-img"
      >
        <div
            v-if="questionRe.isLoading && !answerRe.interrupted"
            class="loading-img_bg"
        >
          <img
              src="../../../src/assets/animation/rotating.gif"
          >
        </div>
        <a-image
            class="query_img"
            :src="item.img"
        />
      </div>
      <span @click="handleInterrupted">
        {{ getQuestion }}
        <img
            v-if="questionRe.isLoading && !answerRe.interrupted"
            class="loading-icon"
            src="../../../src/assets/animation/user-q-loading.gif"
        >
      </span>
    </div>
  </div>
  <!--  v-if="answerRe.isAnswerStart || answerRe.interrupted"-->
  <div
      v-if="!questionRe.isLoading || answerRe.interrupted"
      :class="['chat-card', 'chat-a']"
  >
    <div class="chat-card_item">
      <span @click="handleInterrupted">
        {{ showAnswerStr }}
        <template v-if="!answerRe.interrupted">
          <img
              v-if="answerRe.isLoading || !answerRe.isAnswerStart"
              class="loading-icon"
              src="../../../src/assets/animation/a-loading.gif"
          >
        </template>
      </span>
      <template v-if="!item?.sysDefault">
        <!--      被打断-->
        <div
            v-if="answerRe.interrupted"
            class="interrupted"
        >
          <img
              src="../../../src/assets/close.png"
              style="margin-right: 5px"
          >已取消思考
        </div>
        <div
            v-else-if="!answerRe.interrupted && answerRe.isAnswerEnd"
            class="playback"
            @click="handlePlay"
        >
          <img
              v-if="answerRe.play"
              class="play-icon"
              src="../../../src/assets/animation/repeat-a-loading.gif"
          >
          <img
              v-else
              class="repeat-play-icon"
              src="../../../src/assets/animation/play.png"
          >
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
import { computed, reactive, ref, toRefs, unref, watch, watchEffect } from 'vue'

const props = defineProps({
  item: {
    type: Object,
    required: true
  },
  newSessionId: {
    type: String,
    required: true
  },
  mapKey: {
    type: String,
    required: true
  },
  answerStr: {
    type: String,
    required: false
  }
})
const { item } = toRefs(props)
const questionRe = reactive({
  isLoading: false, //是否正在播放问题
  displayedText: '' // 展示的文本
})
const answerRe = reactive({
  displayedText: '', // 展示的文本
  interrupted: false, //是否被打断
  play: false, //是否播放
  isLoading: false, //是否正在播放答案
  isAnswerStart: true, // 是否已经回答开始
  isAnswerEnd: true // 是否已经回答结束
})
const answerList = ref([])
// 使用 defineEmits 定义事件
const emit = defineEmits([ 'interrupted' ])
const getQuestion = computed(() => {
  return props.item?.question || ''
})
const showAnswerStr = computed(() => {
  console.log('【Lynn-ChatItem】', props.answerStr, answerRe.isLoading)
  /*  if (answerRe.isLoading) {
      if (answerRe.interrupted){
        return  answerRe.displayedText
      } else{
        return props.answerStr
      }
    } else if (answerRe.isAnswerEnd){
      return (unref(answerList) || []).sort((a, b) => a.textIndex - b.textIndex).map(v=>v.oriText).join('')
    }*/
  if (answerRe.interrupted) {
    return answerRe.displayedText
  }else {
    if (answerRe.isLoading) {
      return props.answerStr
    } else if (answerRe.isAnswerEnd){
      return (unref(answerList) || []).sort((a, b) => a.textIndex - b.textIndex).map(v=>v.oriText).join('')
    }
  }
})

// 回答问题总时间
const totalDuration = computed(() => {
  return unref(answerList).reduce((sum, item) => sum + item.duration, 0)
})

// 监听队列变化，开始逐字展示
watchEffect(async () => {
  if (props?.item) {
    answerList.value = props?.item?.answer || []
    console.log('【Lynn-ChatItem】',props,unref(answerList), props?.item, props?.item?.isAnswerStart , !props?.item?.isAnswerEnd)
    questionRe.isLoading = !!props?.item?.isQuestionLoading
    answerRe.isAnswerStart = props?.item?.isAnswerStart
    answerRe.isAnswerEnd = props?.item?.isAnswerEnd
    answerRe.isLoading = props?.item?.isAnswerStart && !props?.item?.isAnswerEnd
    answerRe.interrupted = !!props?.item?.interrupted
    answerRe.displayedText = props?.item?.displayedText || ''
  }
})

function handlePlay() {
  if (answerRe.play) {
    answerRe.play = false
  } else {
    answerRe.play = true
    setTimeout(() => {
      answerRe.play = false
    }, unref(totalDuration))
  }
  // emit('change', { ...props.item, play: !props.item.play })
}

function handleInterrupted() {
  if (answerRe.isLoading && !answerRe.interrupted) {
    emit('interrupted', props?.mapKey, unref(showAnswerStr))
  }
}
</script>

<style scoped lang="less">
.chat-q {
  display: flex;
  justify-content: flex-end;

  .chat-card_item {
    text-align: right;
    color: #28715E;
  }
}

.chat-a {
  display: flex;
  justify-content: flex-start;

  .chat-card_item {
    text-align: left;
    color: #111111;
  }
}

.chat-card {
  padding: 10px 0;
  //border: 1px solid #ccc;
  position: relative;

  &_item {
    width: calc(100% - 40px);
    line-height: 24px;

    .loading-img {
      width: 166px;
      max-height: 224px;
      object-fit: cover;
      overflow: hidden;
      position: relative;
      margin-bottom: 5px;

      :deep(.ant-image) {
        border-radius: 8px !important;
        width: 100%;
        height: 100%;
        overflow: hidden !important;
      }
      :deep(.ant-image .ant-image-img) {
        width: 100%;
        height: 100%;
        vertical-align: middle;
      }

      &_bg {
        position: absolute;
        width: 100%;
        height: 100%;
        background: #000000;
        opacity: 0.6;
        z-index: 999;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 70px;
          height: 70px;
        }
      }
    }

    .interrupted {
      background: #B7B4B44D;
      border-radius: 8px;
      line-height: 24px;
      padding: 2px 8px 2px 8px;
      color: #676565;
      font-size: 13px;
      width: 95px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 5px;

      img {
        width: 15px;
        height: 15px;
      }
    }

    .playback {
      width: 44px;
      height: 24px;
      background: #CBE5E1;
      border-radius: 8px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 5px;
      cursor: pointer;

      .repeat-play-icon {
        width: 20px;
        height: 20px;
      }

      .play-icon {
        width: 20px;
        height: 20px;
      }
    }

    span {
      display: inline-block;
      vertical-align: middle;
    }

    .loading-icon {
      width: 16.67px;
      height: 18px;
      vertical-align: middle;
    }
  }
}
</style>
