<template>
    <div class="box1">
        <div class="web-icon">
            <el-image @click="returnIndex" :src="logo" alt="加载失败了"></el-image>
        </div>
        <span class="web-title" @click="returnIndex">艺考报名网</span>
        <div class="drawer">
            <el-dropdown>
                <div class="el-dropdown-link">
                    <el-image :src="pic"
                              style="vertical-align: middle; border-radius: 50%; width: 45px; height: 45px"
                              alt="头像">
                    </el-image>&emsp;
                    {{ name }}<i class="el-icon-arrow-down el-icon--right"></i>
                </div>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>
                        <el-button type="text" @click="handleLogout">退出登录</el-button>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>

<script>
import logo from '@/assets/logo.png'
import defaultPhoto from '@/assets/image/photo.png'

export default {
    name: 'HeadInfo',
    props: ['name'],
    computed: {
        pic: {
            get() {
                if (this.$store.state.user.photo) {
                    return this.$store.state.user.photoData
                } else {
                    return defaultPhoto
                }
            }
        }
    },
    data() {
        return {
            logo,
            baseUrl: 'http://localhost:8848',//前缀
        }
    },
    methods: {
        returnIndex() {
            this.$router.push({
                path: "/"
            })
        },


        handleLogout() {
            this.$alert('是否确认退出登录?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(() => {
                this.$store.dispatch('LogOut').then(res => {
                    this.$router.push({
                        path: '/login'
                    }).catch(() => {
                    });
                })
            })
        }
    }
}
</script>

<style scoped lang="less">

.box1 {
  margin-top: 10px;
  height: 120px;
}

.web-icon {
  width: 70px;
  height: 70px;
  display: inline-block;

  //&:hover {
  //  background: white;
  //}
}


.web-title {
  margin-left: 40px;
  color: white;
  font-size: 28px;
  display: inline-block;
  width: 5em;
  height: 80px;
  vertical-align: bottom;
  line-height: 80px;
  font-weight: bold;
}

.drawer {
  width: 160px;
  text-align: center;
  height: 80px;
  line-height: 80px;
  display: inline-block;
  float: right;
}

.photo-icon {
  float: left;
  width: 27px;
  height: 27px;
  background-image: url(../assets/image/photo.png);

}


</style>
<style scoped>
.el-dropdown-link {
    font-size: 18px;
    cursor: pointer;
    color: #ffffff;
}

.el-icon-arrow-down {
    font-size: 12px;
}
</style>