<template>
  <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.content)">
        <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="text-guide">
    <view class="top-text">
      如需使用电脑版，可在电脑微信打开小程序
    </view>
    防止迷路，请尽量、尽量、尽量关注公众号
    <view class="bottom-text">
      左下角菜单点击添加客服获取更多精彩内容
    </view>
  </view>
  <show-time />
  <view class="dialogue-wrap" v-for="(item,index) in chatLog" :key="index">
    <show-time />
    <view class="response-group inquire-group" v-if="item.message && item.no_mess==0">
      <view class="dialogue answer-inner">
        <view class="top answer-name">{{userinfo.nickname}}</view>
        <text class="answer-dialogue" @click="longpressCopy(item.message)">
          {{item.message }}
        </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 class="inquire" @click="longpressCopy(item.response)">{{item.response}}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref } 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, 1])
  }

  function longpressCopy(message) {
    // navigator.clipboard.writeText(message).then(() => {
    //   uni.showToast({ title: '复制成功', icon: 'none' })
    // }).catch(() => {
    //   console.log("复制失败");
    // })
    uni.setClipboardData({
      data: message,
      success: () => {
        uni.showToast({
          title: '复制成功'
        })
        console.log('success');
      }
    })
  }

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

<style lang="scss">
  .text-guide {
    text-align: center;

    .top-text {
      margin-bottom: 20rpx;
    }
  }

  .inquire-group {
    @include flex();

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

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

      .inquire {
        display: block;
        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;
        opacity: 0;
        @include oneLine(2);
        color: #ffffff8c;
        font-size: 24rpx;
      }
    }
  }

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

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

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