<template>
    <div class="app-header">
        <div class="left-logo">{{ title }}</div>

        <div class="right-menu">
          <div class="mr20 d-in-block v-mid message-info hand" @click="toMessage"></div>
            <el-dropdown class="avatar-container v-mid" trigger="click" placement="bottom-end">
                <div class="avatar-wrapper">
                    <img :src="avatar" class="user-avatar" />
                    <span  class="user-name">{{ username }}</span>
                    <i class="el-icon-caret-bottom" />
                </div>
                <el-dropdown-menu slot="dropdown" class="user-dropdown">
                    <router-link style="text-decoration: none;" to="/">
                        <el-dropdown-item>电脑端首页</el-dropdown-item>
                    </router-link>
                  <el-dropdown-item divided @click.native="toMobile">
                    <div>切换移动端</div>
                  </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>

<script>
import { defineComponent, getCurrentInstance } from "@vue/composition-api";
import { useUserStore } from '@/stores/user'

export default defineComponent({
    setup() {
       const _this = getCurrentInstance().proxy
        const userStore = useUserStore()
        const title = import.meta.env.VITE_APP_TITLE
        const avatar = userStore.avatar
        const username = userStore.real_name
        const logout = () => {
            userStore.logout()
        }
        const toMobile = () =>{
           window.location.href = window.location.origin + '/app/mobile/home.html';
        }
        const toMessage = () =>{
          _this.$router.push({name:'xxzx'});
        }
        return {
            title,
            username,
            avatar,
            logout,
            toMobile,
            toMessage
        }
    }
})
</script>

<style scoped lang="scss">
.app-header {
    box-sizing: border-box;

    width: 100%;
    height: 100%;
    padding: 0 20px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    background-color: #265cd4;
    color: #fff;
    .left-logo {
        font-size: 18px;
    }

    .right-menu {
      .message-info{
        width: 20px;
        height: 24px;
        background: url("@/assets/icon-message.png") center no-repeat;
        background-size: 20px 24px;
      }
        .avatar-container {
            cursor: pointer;
            .avatar-wrapper {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                color: #fff;
                .user-avatar {
                    width: 40px;
                    height: 40px;
                    border-radius: 6px;
                    margin-right: 6px;
                }
                // .user-name{
                    
                // }
            }
        }
    }
}
</style>