<!--
 * @Author: weiyudumei wangxu9681@126.com
 * @Date: 2024-07-31 10:17:21
 * @LastEditors: weiyudumei wangxu9681@126.com
 * @LastEditTime: 2024-07-31 15:58:20
 * @FilePath: /guomin-jianyan-h5-fe/src/pages/home/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import { nextTick, onMounted, ref } from 'vue'
import OpInit from './components/OpInit.vue'
import ChartInit from './components/ChatInit.vue'
import { useRoute } from 'vue-router'
// import HistoryRecord from './components/HistoryRecord.vue'

const route = useRoute()

const OpInitCps = ref<any>(null)

const contRef = ref(null)

const welcomeShow = ref(false)

function rQuestionSelect(question: string) {
  OpInitCps.value.extraQuestion({
    type: 'rec',
    question,
  })
}

// function updateCurConversation(id: string) {
//   OpInitCps.value.updateCurConversation(id)
// }

const showQuickToBottom = ref(false)
function handleScroll(event: any) {
  const dialog = event.target
  // console.log('滚动了')
  // console.log(dialog.scrollHeight)
  // console.log(dialog.scrollTop)
  // console.log(dialog.clientHeight)
  // console.log(event.target.scrollHeight)
  // console.log(event.target.scrollTop)
  // console.log(event.target.clientHeight)
  if (dialog.scrollHeight - dialog.scrollTop > dialog.clientHeight + 20) {
    OpInitCps.value.pageScroll()
  }
}

function scrollToBottom() {
  const scrollElem = contRef.value as any
  nextTick(() => {
    scrollElem.scrollTo({ top: scrollElem.scrollHeight })
  })
}

onMounted(() => {
  if (route.query.id) {
    OpInitCps.value.updateCurConversation(route.query.id)
  }
})
</script>

<template>
  <div ref="contRef" class="page-home-container" @scroll="handleScroll">
    <Watermark />
    <div class="page-tips">～ 内容由AI大模型生成，无法确保真实准确，请仔细甄别 ～</div>
    <ChartInit v-if="welcomeShow" @on-click-r-question="rQuestionSelect" />
    <OpInit ref="OpInitCps" :show-quick-to-bottom="showQuickToBottom" @on-show-welcome="welcomeShow = true" @on-hiden-welcome="welcomeShow = false" @scroll-to-bottom="scrollToBottom" />
    <!-- <HistoryRecord @updateCurConversation="updateCurConversation"></HistoryRecord> -->
  </div>
</template>

<style lang="scss" scoped>
.page-home-container {
  background-image: url('@/assets/images/sdream/bg.png');
  background-repeat: no-repeat;
  background-size: 100% auto;
  // background: #f6f7f9;
  height: 100vh;
  min-height: 100vh;
  overflow: scroll;
  padding-top: 20px;
  .page-tips {
    background: rgba(203,210,253);
    font-size: 11px;
    color: #666BAA;
    line-height: 16px;
    text-align: center;
    padding: 8px 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
  }
}
</style>
