<template>
    <div class="session-list-view">
        <div v-show="!showSubPage" class="session-list-main">
            <SessionToolbar />
            <SessionTabs v-model="sessionType" />
            <SessionList :current-tab="sessionType" />
        </div>

        <router-view />
    </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { useRoute } from 'vue-router';
import { SESSION_TYPE } from '@tencentcloud/ai-desk-core';
import SessionList from '../../../components/SessionList/index.vue';
import SessionTabs from './components/SessionTabs/index.vue';
import SessionToolbar from './components/SessionToolbar/index.vue';

type SessionTabType = SESSION_TYPE.IM | SESSION_TYPE.IM_OTHER_INPROGRESS | SESSION_TYPE.IM_QUEUE | SESSION_TYPE.ROBOT;
type SessionTabValue = {
    type: SessionTabType;
    meta?: string;
};

const route = useRoute();
const sessionType = ref<SessionTabValue>({ type: SESSION_TYPE.IM, meta: 'outer' });

const showSubPage = computed(() => route.path !== '/mobileDesk/sessionList');
</script>

<style scoped>
.session-list-view {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.session-list-main {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
</style>