<template>
    <page-meta :page-style="$theme.pageStyle">
        <!-- #ifndef H5 -->
        <navigation-bar :front-color="$theme.navColor" :background-color="$theme.navBgColor" />
        <!-- #endif -->
    </page-meta>
    <view class="h-full flex flex-col">
        <view class="flex-1 min-h-0 bg-white">
            <chat-scroll-view
                v-model="chatList"
                ref="chatRef"
                :type="1"
                :otherId="sessionActive"
                :showAdd="true"
                bottom="100rpx"
                :safeAreaInsetBottom="false"
                :avatar="appStore.getChatConfig.chatLogo"
            >
                <template #top>
                    <follow-official
                        :show="!!appStore.getLoginConfig.followOfficial"
                        :title="appStore.getLoginConfig.involvedText"
                    />
                    <session v-model="showPopup" />
                </template>
                <template #empty>
                    <view class="w-full">
                        <div class="my-[60rpx] text-center text-[50rpx] font-medium">
                            {{ appStore.getChatConfig.chatTitle }}
                        </div>
                        <problem-example
                            v-if="problem.length"
                            :data="problem"
                            @click-item="(value:any) => chatRef.sendLock(value)"
                            @show-more="showExamplePopup = true"
                        />

                        <view
                            v-if="indexData?.tips?.show"
                            class="bg-[#FFFAED] flex flex-col items-center p-[30rpx] mt-[20rpx] m-[40rpx]"
                        >
                            <view class="flex items-center">
                                <u-icon name="warning" :size="40" />
                                <view class="text-lg ml-[10rpx] break-all">{{
                                    indexData?.tips?.title
                                }}</view>
                            </view>
                            <view class="text-content text-sm mt-[20rpx] break-all">
                                {{ indexData?.tips?.sub_title }}
                            </view>
                        </view>
                    </view>
                </template>
                <!--                    <view class="chat-record mt-[20rpx] pb-[60rpx]">-->
                <!--                        <chat-record-item-->
                <!--                            v-for="(item, index) in chatList"-->
                <!--                            :key="index"-->
                <!--                            :index="index"-->
                <!--                            :record-id="item.id"-->
                <!--                            :type="item.type == 1 ? 'right' : 'left'"-->
                <!--                            :content="item.content"-->
                <!--                            :loading="item.loading"-->
                <!--                            :showRewriteBtn="index === chatList.length - 1"-->
                <!--                            :time="item.type == 2 ? item.createTime : ''"-->
                <!--                            :showPosterBtn="true"-->
                <!--                            :showCopyBtn="true"-->
                <!--                            :is-collect="item.isCollect"-->
                <!--                            :avatar="appStore.getChatConfig.chatLogo"-->
                <!--                            @rewrite="chatRef?.rewrite()"-->
                <!--                            @click-poster="handleDrawPoster"-->
                <!--                            @update="(e: any) => chatList[e.index].isCollect = e.value"-->
                <!--                        ></chat-record-item>-->
                <!--                    </view>-->
            </chat-scroll-view>
            <!--  会话弹窗  -->
            <session-popup v-model="showPopup" />
            <!--  会话弹窗  -->
            <problem-example-popup
                v-model="showExamplePopup"
                :data="problem"
                @click-item="(value:any) => chatRef.sendLock(value)"
            />
            <!--  公告弹窗  -->
            <notice-popup></notice-popup>
            <!--  #ifdef MP  -->
            <!--  微信小程序隐私弹窗  -->
            <MpPrivacyPopup></MpPrivacyPopup>
            <!--  #endif  -->
            <!-- #ifdef APP-PLUS -->
            <!--  苹果App隐私弹窗  -->
            <IosPrivacyPopup
                v-if="getClient() == ClientEnum.IOS"
                @refresh="refreshHandler"
            ></IosPrivacyPopup>
            <!-- #endif -->
        </view>
        <tabbar />
    </view>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { useAppStore } from '@/stores/app'
import SessionPopup from './components/session-popup.vue'
import FollowOfficial from './components/follow-official.vue'
import NoticePopup from '@/components/notice-popup/notice-popup.vue'
import { getSamplesLists } from '@/api/chat'
import { getDecorate } from '@/api/shop'
import { onShow, onPullDownRefresh } from '@dcloudio/uni-app'

import ProblemExample from './components/problem-example.vue'
import Session from './components/session.vue'
import { shallowRef } from 'vue'
import { useSessionList } from './components/useSessionList'
import ProblemExamplePopup from './components/problem-example-popup.vue'
// #ifdef MP
import MpPrivacyPopup from './components/mp-privacy-popup.vue'
// #endif
// #ifdef APP-PLUS
import { getClient } from '@/utils/client'
import { ClientEnum } from '@/enums/appEnums'
import IosPrivacyPopup from './components/ios-privacy-popup.vue'
// #endif

const { getSessionLists, sessionActive } = useSessionList()
const showPopup = ref(false)
const showExamplePopup = ref(false)
const problem = ref([])
const chatList = ref<any[]>([])
const chatRef = shallowRef()
// 首页装修数据
const indexData = reactive({
    tips: {
        show: 0,
        title: '',
        sub_title: ''
    }
})
const getProblemExample = async () => {
    problem.value = await getSamplesLists()
}
const actions = ref<string>('')

const getDecorateFunc = async () => {
    try {
        const { pages } = await getDecorate({ type: 7 })
        indexData.tips = JSON.parse(pages)[1]?.content
    } catch (error) {
        console.log('获取装修数据失败=>', error)
    }
}

const appStore = useAppStore()

const refreshHandler = async () => {
    await appStore.getConfig()
    await getDecorateFunc()
    await getSessionLists()
    await getProblemExample()
}

onShow(async () => {
    getDecorateFunc()
    getSessionLists()
    getProblemExample()
})
onPullDownRefresh(async () => {
    await refreshHandler()
    uni.stopPullDownRefresh()
})
</script>
<style>
page {
    height: 100%;
    overflow: hidden;
}
</style>
