<template>
  <view class="content">
    <scroll-view scroll-y scroll-x show-scrollbar scroll-with-animation :style="{
    						paddingBottom: '20px',
    						height: screenHeight - bottomHeight - statusbarHeight - 148 + 'px',
    						position: 'relative'
    					}" class="scrollView" :scroll-top="scrollTopHeight" :scroll-into-view="getScrollView">
      <view id="scroll-view-content">
        <dialogue :chatLog="chatLog" :projectConfig="projectConfig" :userinfo="userinfo" ref="dialogueRef"
          @clickKeywordSearch="clickKeywordSearch" />
      </view>
    </scroll-view>
    <bottom-bar bgColor="#151419">
      <view class="bottom-wrap">
        <image class="menu-icon" src="/static/images/menu.png" @click="isShowPopup=true"></image>
        <u-search placeholder="请输入消息..." v-model="dialogueVal" shape="square" bgColor="#242228" :showAction="false"
          @search="fetchStartConversation(dialogueVal)"></u-search>
      </view>
    </bottom-bar>
    <bottom-popup :isShow="isShowPopup" @closePopup="isShowPopup=false" :userinfo="userinfo"
      :projectConfig="projectConfig" @clearAll="fetchClearConversation"></bottom-popup>
  </view>
</template>

<script setup>
  import { EventSourcePolyfill } from 'event-source-polyfill';

  import { computed, ref, watchEffect } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import dialogue from '@/components/dialogue.vue'
  import bottomBar from '@/components/bottom-bar/bottom-bar.vue'
  import bottomPopup from '@/components/custom-popup/bottom-popup.vue'

  import { getConfig, getStartConversation, getRecord, getClearConversation } from '@/services/modules/home.js'
  import { getUserinfo } from '@/services/modules/login.js'
  import showToast from '@/utils/showToast.js'

  const dialogueVal = ref('')
  const isShowPopup = ref(false)
  const userinfo = ref()
  const projectConfig = ref()
  const dialogueRef = ref()
  watchEffect(() => {
    if (uni.getStorageSync('token')) {
      fetchRecord()
      fetchUserinfo()
      fetchConfig()
    }
  })
  const chatLog = ref([])
  async function fetchStartConversation(message) {
    chatLog.value.push({ message: dialogueVal.value, response: '' })
    let source = new EventSourcePolyfill(
      `http://aladmin.shs.broing.cn/api/message/sendText2?message=${message}`, {
        headers: {
          'token': uni.getStorageSync("token") || "", //自定义请求头信息
          'accept': 'application/json, text/javascript, */*; q=0.01',
          'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundaryay3HuJlbDrA4oKqJ'
        }
      })
    source.onopen = function(e) {
      // console.log('开始流式监听', e)
    };
    source.onmessage = function(event) {
      console.log('onmessage', event.data)
      chatLog.value[chatLog.value.length - 1].response = chatLog.value[chatLog.value.length - 1].response.concat(
        event.data).replaceAll('<br/>', ' ').replaceAll('undefined', ' ')
    };

    source.onerror = function(err) {
      source.close();
    };

    dialogueVal.value = ''
    fetchUserinfo()
    if (res.msg === '您的会话次数不足') showToast(`${res.msg}`)
  }

  onLoad(() => {
    uni.getSystemInfo({
      success: function(res) {
        console.log(res, '------------')
      }
    })
  })

  // const getScrollView = computed(() => {
  //   return this.scrollview
  // })

  // 页面滚动到底部
  function scrollToBottom() {
    uni.createSelectorQuery().in(s).select('#scroll-view-content').boundingClientRect((res) => {
      let top = res.height - (s.screenHeight - s.bottomHeight - 140);
      if (top > 0) {
        this.scrollTopHeight = top;
      }
    }).exec()
  }

  // 点击关键词进行搜索
  function clickKeywordSearch(e) {
    dialogueVal.value = e
    fetchStartConversation(e)
  }

  async function fetchUserinfo() {
    const res = await getUserinfo()
    userinfo.value = res.data
    console.log('获取个人信息', res)
  }

  async function fetchConfig() {
    const res = await getConfig()
    projectConfig.value = res.data
    uni.setStorageSync('server_qr', res.data.server_qr)
    // console.log('获取项目配置', res)
  }

  async function fetchRecord() {
    const res = await getRecord()
    res.data.forEach(item => {
      item.response = item.response.replaceAll('<br/>', '')
    })
    chatLog.value = res.data
    // console.log('获取聊天记录', res)
  }

  async function fetchClearConversation() {
    const res = await getClearConversation()
    fetchRecord()
    isShowPopup.value = false
    if (res.msg === '清除成功') showToast('清除聊天记录成功')
    // console.log('清除聊天记录', res)
  }
</script>

<style lang="scss">
  page {
    padding-bottom: 208rpx;

  }

  .scrollView {
    position: fixed;
    right: 0px;
    left: 0;
    top: 0;
    /* padding-left: 10px;
  			padding-right: 10px;
  			padding-top: 10px; */
    width: auto;
  }

  .content {
    @include wrap();
    height: auto !important;
    margin-top: 40rpx;
  }

  .bottom-wrap {
    @include flex();

    .menu-icon {
      width: 46rpx;
      height: 45rpx;
      margin-top: 13rpx;
      margin-right: 21rpx;
    }

    .u-search {
      width: 618rpx;
      height: 72rpx;
      box-sizing: border-box;
      border-radius: 16rpx;
      background: #242228ff !important;
    }
  }
</style>