<template>
  <div class="custom-gpt-message narrow-scrollbar">
    <div class="gpt-line" v-for="item in list" :key="item.message">
      <GptIcon></GptIcon>
      <span class="message">
        <template v-if="item.message">
          {{ item.message }}
        </template>
        <template v-else>
          <!-- loading -->
          <span v-show="loading">|</span>
        </template>
      </span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onBeforeUnmount, onMounted, ref } from 'vue';
import GptIcon from '@/assets/svg/gpt/gpt-icon.svg';

const props = withDefaults(
  defineProps<{
    computed?: boolean;
    list: any[];
  }>(),
  {}
);
const loading = ref(false);
let input_interval: any = null;
// 开启定时显示任务
const openInterval = () => {
  input_interval = window.setInterval(() => {
    loading.value = !loading.value;
  }, 800);
};
// 关闭定时器
const closeInterval = () => {
  if (input_interval) {
    window.clearInterval(input_interval);
    clearInterval(input_interval);
    input_interval = null;
  }
};
onMounted(() => {
  if (props.computed) {
    // 计算最大高度
  }
  openInterval();
});

onBeforeUnmount(() => {
  closeInterval();
});
</script>

<style lang="less">
.custom-gpt-message {
  width: 100%;
  flex: 1;
  background: #181818;
  border-radius: 8px;
  padding: 12px;
  box-sizing: border-box;
  overflow-y: auto;
  max-height: 500px;
  .gpt-line {
    display: flex;
    .message {
      flex: 1;
      padding-left: 12px;
    }
  }
  & > :not(:first-child) {
    margin-top: 12px;
  }
}
</style>
