<template>
	<view class="web-header">
		<view class="header-left">
			<image class="header-logo" src="/static/logo.png"></image>
			<view class="header-function" v-for="(item,index) in functionList" 
			:key="index" :class="judgeSelect(item.path)?'function-select':''">
				{{ item.name }}
			</view>
		</view>
		<view class="header-right" v-if="isLogin">
			<view class="header-function">
				我的作品
			</view>
			<view class="header-function">
				我的藏品
			</view>
			<el-dropdown class="header-avatar">
				<u-icon name="/static/header.png" size="41" label="123"></u-icon>
				<!-- <el-dropdown-menu slot="dropdown">
				    <el-dropdown-item>黄金糕</el-dropdown-item>
				    <el-dropdown-item>狮子头</el-dropdown-item>
				    <el-dropdown-item>螺蛳粉</el-dropdown-item>
				    <el-dropdown-item>双皮奶</el-dropdown-item>
				    <el-dropdown-item>蚵仔煎</el-dropdown-item>
				</el-dropdown-menu> -->
			</el-dropdown>
		</view>
		<view class="header-right" v-else>
			<view class="header-login">
				<text>登录/注册</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data(){
		return{
			// 左侧操作按钮列表
			functionList:[
				{
					name: '首页',
					path: '/pages/pc_web/index/index'
				},
				{
					name: '工作台',
					path: ''
				},
			],
			routePath: this.$route.path,// 当前路由
			isLogin: this.$store.state.vuex_token,// 是否登录
		}
	},
	methods:{
		judgeSelect(path){
			return this.routePath == path;
		}
	}
}
</script>

<style scoped lang="scss">
.web-header{
	width: 100%;
	height: 100%;
	background-color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.header-left{
		height: 100%;
		display: flex;
		align-items: center;
		margin-left: 40rpx;
		.header-logo{
			width: 240rpx;
			height: 50rpx;
		}
		.header-function{
			display: flex;
			align-items: flex-end;
			color: #959ba6;
			font-size: 30rpx;
			height: 50rpx;
			margin-left: 100rpx;
			cursor: pointer;
			&:hover{
				color: #b1b1b1;
			}
		}
		.function-select{
			color: #12121f;
			font-weight: bold;
		}
	}
	.header-right{
		display: flex;
		align-items: center;
		height: 100%;
		margin-right: 40rpx;
		.header-function{
			display: flex;
			align-items: flex-end;
			color: #959ba6;
			font-size: 30rpx;
			height: 50rpx;
			margin-left: 100rpx;
			cursor: pointer;
			&:hover{
				color: #b1b1b1;
			}
		}
		.header-avatar{
			margin-left: 100rpx;
			width: 150rpx;
			cursor: pointer;
			display: flex;
			align-items: flex-end;
			color: #959ba6;
			font-size: 30rpx;
			height: 50rpx;
			&:hover{
				filter: opacity(0.8);
			}
		}
		.header-login{
			background-color: #d3fd24;
			border-radius: 6rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			&:hover{
				filter: opacity(0.8);
			}
			text{
				font-size: 26rpx;
				color: #12131e;
				margin: 20rpx 50rpx;
			}
		}
	}
}
</style>