<template>
    <div class="dialogue">
        <custom-header :name="nameVal || '飞鸟种植助手'" bgColor="#f2f3f5" isGoBack @goback="headerCallBack"></custom-header>
        <chat-window :text="desc" :userId="userIdVal" :img="imgVal" @update:name="nameVal = $event"></chat-window>
    </div>
</template>

<script setup>
import customHeader from "@/components/customHeader.vue";
import { onActivated, ref } from "vue";
import chatWindow from "@/components/chatWindow";
import { useRoute, useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();
const desc = ref("");
const nameVal = ref("");
const userIdVal = ref(null);
const imgVal = ref("");
const formPageVal = ref("");
onActivated(() => {
    userIdVal.value = null;
    setTimeout(() => {
        const { text, formPage, userId, img } = route.query;
        desc.value = text;
        userIdVal.value = userId;
        imgVal.value = img;
        formPageVal.value = formPage;
        if(formPage) {
            sessionStorage.setItem('chat_frame_page', formPage);
        }
    }, 100);
});

function headerCallBack() {
    const page = sessionStorage.getItem('chat_frame_page');
    if(page === 'messageList' || page === 'monitor') {
        VE_API.bbs.readUpdate({ targetUserId: userIdVal.value, farmId: route.query.farmId }).then((res) => {
            if (res.code === 0) {
                sessionStorage.removeItem('chat_frame_page');
                router.replace({ path: '/message_list', query: { farmId: route.query.farmId, from: 'monitor' } });
            }
        });
    } else {
        router.go(-1);
    }
}
</script>

<style lang="scss" scoped>
.dialogue {
    width: 100%;
    height: calc(100vh - 40px);
    background: #f2f3f5;
    box-sizing: border-box;
    .chat-container {
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
        margin: 0 auto;
        border: 1px solid #e6e6e6;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    }
}
</style>
