<template>
  <show-time />
  <view class="inquire-group">
    <image class="avatar" :src="projectConfig.Al_avatar"></image>
    <view class="group-wrap">
      <view class="group-item" v-for="item in recommendList" :key="item.id" @click="clickKeywordSearch(item.title)">
        <view class="item-title">{{item.title}} </view>
        <view class="item-content">{{item.content}}</view>
      </view>
    </view>
  </view>
  <view class="inquire-group">
    <image class="avatar" :src="projectConfig.Al_avatar"></image>
    <view class="dialogue">
      <view class="top">{{projectConfig.Al_name}}</view>
      <view class="inquire">{{projectConfig.Al_name}}为您服务,请输入您的问题。</view>
    </view>
  </view>
  <show-time />
  <view class="dialogue-wrap" v-for="(item,index) in chatLog" :key="index" ref="messageListContainer">
    <show-time />
    <view class="response-group inquire-group">
      <view class="dialogue answer-inner">
        <view class="top answer-name">{{userinfo.nickname}}</view>
        <text selectable="true">
          <view class="answer-dialogue">{{item.message }}</view>
        </text>
      </view>
      <image class="avatar" style="margin-right: 0;" :src="userinfo.avatar"></image>
    </view>
    <show-time />
    <view class="inquire-group">
      <image class="avatar" :src="projectConfig.Al_avatar"></image>
      <view class="dialogue">
        <view class="top">{{projectConfig.Al_name}}</view>
        <text selectable="true">
          <view class="inquire">{{item.response}}</view>
        </text>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref, watch, nextTick } from 'vue'
  import showTime from '@/components/show-time.vue'
  import { getRecorm } from '@/services/modules/home.js'

  const emits = defineEmits(['clickKeywordSearch'])
  const props = defineProps({
    chatLog: {
      type: Array,
      default: () => ([])
    },
    projectConfig: {
      type: Object,
      default: () => ({})
    },
    userinfo: {
      type: Object,
      default: () => ({})
    }
  })
  fetchRecorm()

  function clickKeywordSearch(item) {
    emits('clickKeywordSearch', item)
  }

  const recommendList = ref([])

  async function fetchRecorm() {
    const res = await getRecorm()
    recommendList.value = res.data
    // console.log('获取推荐文案', res)
  }


  // const messageListContainer = ref(null);

  // watch(
  //   () => props.chatLog,
  //   (newVal) => {
  //     nextTick(() => {
  //       console.log(messageListContainer.value)
  //       messageListContainer.value[newVal.length - 1].scrollIntoView(); // 关键代码
  //     });
  //   }, {
  //     deep: true,
  //   }
  // )
  // // 在视图加载后将页面滚动到底部
  // const scrollToBottom = () => {
  //   // 获取消息列表容器的DOM元素
  //   const container = messageListContainer.value;
  //   // 在下一个DOM更新周期中执行滚动
  //   nextTick(() => {
  //     container.scrollTop = container.scrollHeight;
  //   })
  // }

  // defineExpose({
  //   scrollToBottom
  // })
</script>

<style lang="scss">
  .inquire-group {
    @include flex();

    .avatar {
      @include common-icon-wh(80rpx);
      margin-right: 20rpx;
      border-radius: 50%;
    }

    .dialogue {
      .top {
        font-size: 24rpx;
      }

      .inquire {
        word-break: break-all;
        width: 462rpx;
        padding: 32rpx;
        height: auto;
        margin-top: 8rpx;
        box-sizing: border-box;
        border-radius: 0 16rpx 16rpx 16rpx;
        background: #242228ff;
      }
    }
  }

  .group-wrap {
    @include flexCj();
    flex: 1;
    flex-wrap: wrap;

    .group-item {
      padding: 24rpx 16rpx;
      box-sizing: border-box;
      width: 276rpx;
      height: 160rpx;
      border-radius: 12rpx;
      background: #242228ff;
      margin-bottom: 18rpx;

      .item-title {
        font-size: 26rpx;
        font-weight: 700;
      }

      .item-content {
        word-break: break-all;
        @include oneLine(2);
        color: #ffffff8c;
        font-size: 24rpx;
      }
    }
  }

  .response-group {
    .answer-inner {
      margin-left: auto;

      .answer-name {
        text-align: right;
      }
    }

    .answer-dialogue {
      word-break: break-all;
      width: 416rpx;
      padding: 32rpx;
      margin-top: 8rpx;
      box-sizing: border-box;
      border-radius: 16rpx 0 16rpx 16rpx;
      background: #dda372ff;
    }
  }
</style>