<template>
  <view class="content">
    <dialogue :chatLog="chatLog" :projectConfig=" projectConfig" :userinfo="userinfo"
      @clickKeywordSearch="clickKeywordSearch" />
    <bottom-bar bgColor="#151419" :height="height">
      <view class="bottom-wrap">
        <image class="menu-icon" src="/static/images/menu.png" @click="isShowPopup=true"></image>
        <u-search placeholder="请输入信息..." v-model="dialogueVal" searchIconSize="0" shape="square" bgColor="#242228"
          :actionStyle="{color:'#f7dcbd'}" :disabled="disabled" @search="fetchStartConversation(dialogueVal)"
          actionText="发送" color="#fff" placeholderColor="#fff" @custom="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 { debounce } from 'lodash'

  import { computed, nextTick, 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 { isNull } from '@/utils/trim.js'

  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 height = ref('104rpx')
  const disabled = ref(false)
  const isClick = ref(true)
  watchEffect(() => {
    if (uni.getStorageSync('token')) {
      fetchRecord()
      fetchUserinfo()
      fetchConfig()
    }
  })

  function getElementScollTop() {
    nextTick(() => {
      setTimeout(() => {
        uni.pageScrollTo({
          scrollTop: 99999999999999999999, //滚动到页面的目标位置（单位px）
        })
      }, 0)
    })
  }

  const chatLog = ref([])

  async function fetchStartConversation(message, no_mess) {
    if (disabled.value) return uni.showToast({ title: '消息回复中，请稍后再试哦~', icon: 'none' })
    if (!message || isNull(message)) return showToast('请输入消息，消息不能为空哦~')
    chatLog.value.push({ message: dialogueVal.value, no_mess: 0, response: '' })
    getElementScollTop()
    let source = new EventSourcePolyfill(
      `http://aladmin.shs.broing.cn/api/message/sendText2?message=${message}&no_mess=${no_mess}`, {
        headers: {
          'token': uni.getStorageSync("token") || "", //自定义请求头信息
          'accept': 'application/json, text/javascript, */*; q=0.01',
          'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundaryay3HuJlbDrA4oKqJ'
        }
      })
    isClick.value = false
    disabled.value = true
    source.onopen = function(e) {
      getElementScollTop()
      disabled.value = true
      isClick.value = false
    }

    source.onmessage = function(event) {
      disabled.value = true
      isClick.value = false
      const tempString = chatLog.value[chatLog.value.length - 1].response.concat(event.data).includes('[none]data:')
      chatLog.value[chatLog.value.length - 1].response = tempString ? chatLog.value[chatLog.value.length - 1]
        .response.concat(
          event.data).replaceAll('<br/>', ' ').replaceAll('undefined', ' ').replaceAll('[none]data:', ' ') : chatLog
        .value[chatLog.value.length - 1].response.concat(
          event.data).replaceAll('<br/>', ' ').replaceAll('undefined', ' ')
    };

    source.onerror = function(err) {
      getElementScollTop()
      disabled.value = false
      isClick.value = true
      source.close();
    };

    dialogueVal.value = ''
    fetchUserinfo()
  }

  // 点击关键词进行搜索
  function clickKeywordSearch(e) {
    if (!isClick.value) {
      uni.showToast({
        title: '消息回复中，请稍后再试',
        icon: 'none'
      })
    } else {
      // debounce(fetchStartConversation(e[0], e[1]), 3000)
      fetchStartConversation(e[0], e[1])
    }
  }

  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: 104rpx;
  }

  ::v-deep .u-popup__content {
    background: #000 !important;
    margin: 0 auto;
  }

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

  .bottom-wrap {
    @include flex();

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

    .u-search {
      ::v-deep .u-search__content {
        width: 548rpx !important;
        height: 72rpx;
        box-sizing: border-box;
        border-radius: 16rpx;
        background: #242228ff !important;
      }

      .u-search__action {
        ::v-deep span {
          color: #fff;
        }
      }
    }
  }
</style>