<template>
    <el-container class="layout-tmp h-full">
        <el-header class="layout-header">
            <div class="layout_header">
                <div class="header_left">
                    <div class="header_info">
                        <div>
                            <div class="project-name">{{ projectName }}</div>
                            <el-select v-model="projectId" class="w-full" @change="projectIdChange">
                                <el-option v-for="item in projectData" :key="item.projId" :label="item.projName" :value="item.projId" />
                            </el-select>
                        </div>
                    </div>
                </div>
                <div class="header_center">
                    <span>数据可视化展示平台</span>
                </div>
                <div class="header_right">
                    <div class="header_actions">
                        <el-dropdown>
                            <span>{{ userName }}</span>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item @click="logOut">退出登录</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>
                </div>
            </div>
        </el-header>
        <el-main class="layout-main">
            <router-view />
        </el-main>
    </el-container>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useAppStore } from '~src/store'
import { arrIndex, getArrValue } from 'js-fast-way'
import mainApi from '~api/data'
import { useRouter } from 'vue-router'

const router = useRouter()
const useApp = useAppStore()

const userName = ref(useApp.userName)

//渲染完成
onMounted(() => {
    getProjectList()
})

//获取项目列表
const projectData = ref([])
const projectId = ref(null)
const projectName = ref('')
const getProjectList = async () => {
    const { data } = await mainApi.getProjectList()
    const res = getArrValue(data)
    projectData.value = res
    if (res.length > 0) {
        projectId.value = res[0].projId
        projectName.value = res[0].projName
        useApp.setProjectId(res[0].projId)
    }
}

//项目切换
const projectIdChange = (val) => {
    const index = arrIndex(projectData.value, 'projId', val)
    projectName.value = projectData.value[index].projName
    useApp.setProjectId(val)
}

//退出登录
const logOut = () => {
    window.$message?.info('退出成功')
    router.push({ name: 'login' })
}
</script>

<style lang="scss">
@import "./layout.scss";
</style>
