<template>
	<view class="web-header">
		<view class="header-left">
			<image class="header-logo" :src="homeFileUrl+logo"></image>
			<view class="header-function" v-for="(item,index) in functionList" @click="changePage(index)"
			:key="index" :class="judgeSelect(item.path)?'function-select':''">
				{{ item.name }}
			</view>
		</view>
		<view class="header-right" v-if="isLogin">
			<view class="header-function" @click="showMobileDownloadDialog = true">
				<u-icon name="download" size="34" class="hfu-icon" color="#99d7ff" />
				<text class="web-download">移动端下载</text>
			</view>
			<view class="header-function" @click.stop="showIdentityDialog = true">
				<u-icon name="/static/pc-code.png" size="34" class="hfu-icon" />
				<text class="web-diamond">{{ diamond }}  充值</text>
			</view>
			<el-dropdown class="header-avatar" @command="toShow">
				<view class="ha-icon" @click.stop="showIdentityDialog = true;$refs.identityRef.toShowCell(0)">
					<image :src="fileUrl+getAvatar"></image>
					<text>{{ getTopTip }}</text>
				</view>
				<el-dropdown-menu :append-to-body="false" slot="dropdown">
					<el-dropdown-item v-for="(item,index) in dropList" :key="index" 
					class="dropdown-item" :command="item.path">{{ item.name }}
					</el-dropdown-item>
				    <el-dropdown-item command="loginout" class="dropdown-loginout" divided>退出登录</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
		</view>
		<view class="header-right" v-else>
			<view class="header-function" @click="showMobileDownloadDialog = true">
				<u-icon name="download" size="34" class="hfu-icon" color="#99d7ff" />
				<text class="web-download">移动端下载</text>
			</view>
			<view class="header-login" @click="showLogin = true">
				<text>登录/注册</text>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<LoginDialog :showLogin="showLogin" @toast="showToast" @close="showLogin = false" @openCode="showMobileDownloadDialog = true"
		 @login="login"/>
		<MobileDownloadDialog @toast="showToast" :showDialog="showMobileDownloadDialog" @close="showMobileDownloadDialog = false" />
		<IdentityDialog ref="identityRef" :userMessage="userMessage" :diamond="diamond" @toast="showToast" 
		:showDialog="showIdentityDialog" @close="showIdentityDialog = false;$refs.identityRef.showCell=false" />
	</view>
</template>

<script>
import LoginDialog from './loginDialog.vue';
import MobileDownloadDialog from './mobileDownloadDialog.vue';
import IdentityDialog from './identityDialog.vue';
import configService from '@/common/config.service.js';
export default {
	props: {
		isLogin: {
			type: String,
			default: ''
		},
		currentPage: {
			type: String,
			default: 'home'
		}
	},
	components: {
		LoginDialog,
		MobileDownloadDialog,
		IdentityDialog
	},
	data(){
		return{
			// 基础路径
			fileUrl: configService.fileUrl + 'pixel/my/',
			homeFileUrl: configService.fileUrl + 'pixel/home/',
			// logo图标
			logo: 'logo-new.png',
			// 左侧操作按钮列表
			functionList:[
				{
					name: '首页',
					path: 'home'
				},
				{
					name: '工作台',
					path: 'workshops'
				},
			],
			// 头像
			avatar: 'avatar.png',
			// 默认登录头像
			defaultLoginAvatar: 'login-avatar.png',
			// 用户信息
			userMessage:{},
			// 钻石余额
			diamond: 0,
			// 登录/注册弹窗显示
			showLogin: false,
			// 移动端下载弹窗显示
			showMobileDownloadDialog: false,
			// 个人信息+充值弹窗显示
			showIdentityDialog: false,
			// 下拉栏列表
			dropList: [
				{
					name: '我的作品',
					path: ''
				},
				{
					name: '我的藏品',
					path: ''
				},
				{
					name: '生成记录',
					path: ''
				},
				{
					name: '发布记录',
					path: ''
				},
			],
		}
	},
	computed:{
		// 获取登录头像
		getAvatar(){
			return this.isLogin ? this.defaultLoginAvatar : this.avatar;
		},
		// 获取头像旁tip
		getTopTip(){
			return this.userMessage?.realname||('用户'+this.userMessage?.username);
		}
	},
	mounted() {
		let that = this;
		// 页面通信——钻石-1
		uni.$on('deleteDiamond',()=>{
			that.diamond--;
		});
		this.init();
	},
	methods:{
		// 判断当前显示项
		judgeSelect(path){
			return this.currentPage === path;
		},
		// 初始化
		init(){
			if(this.isLogin !== ''){
				this.userMessage = JSON.parse(this.$store.state.user_message);
				this.myCurrency();
			}else{
				this.userMessage = {};
			}
		},
		// 跳转
		toShow(path = ''){
			if(path === 'loginout'){
				let that = this;
				uni.showModal({
					title: '注销',
					content: '是否确认退出登录？',
					confirmColor: '#94d500',
					success: function (res) {
						if (res.confirm) {
							that.$u.vuex('vuex_token', '');
							that.$u.vuex('user_message', {});
							that.userMessage = {};
							that.diamond = 0;
							that.$api.logOut();
							that.$refs.uToast.show({type:'success',title: "退出登录成功!"});
						}
					}
				})
			} else if(path) uni.navigateTo({url: path});
		},
		// 换页
		changePage(index){
			this.$emit('changePlat',index);
		},
		// 登录
		login(userMessage){
			this.userMessage = userMessage;
			this.myCurrency();
		},
		// 获取我的余额
		async myCurrency(){
			let res = await this.$api.getCurrency();
			if(res?.success){
				// this.timeList[0].time = res.data.numerical;
				this.diamond = res.data.numerical;
			} else {
				this.$refs.uToast.show({type:'error',title: "余额数据拉取失败！"});
			}
		},
		// 提示语弹窗
		showToast({type,title}){
			this.$refs.uToast.show({type: type, title: title});
		}
	}
}
</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: 260rpx;
			height: 56rpx;
		}
		.header-function{
			display: flex;
			align-items: flex-end;
			color: #959ba6;
			font-size: 32rpx;
			height: 50rpx;
			margin-left: 100rpx;
			cursor: pointer;
			&:hover{
				opacity: 0.7;
			}
			&:active{
				opacity: 0.5;
			}
		}
		.function-select{
			color: #12121f;
			font-weight: bold;
		}
	}
	.header-right{
		display: flex;
		align-items: center;
		height: 100%;
		margin-right: 40rpx;
		.web-download{
			background-image: linear-gradient(to right, #a3d4ff 0%, #bee7df 100%);
			background-clip: text;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
		.web-diamond{
			background-image: linear-gradient(to right, #a5fe2f 0%, #c9fe76 100%);
			background-clip: text;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
		.header-function{
			display: flex;
			align-items: flex-end;
			color: #959ba6;
			font-size: 32rpx;
			height: 50rpx;
			margin-left: 100rpx;
			cursor: pointer;
			.hfu-icon{
				margin-right: 10rpx;
			}
			&:hover{
				opacity: 0.7
			}
			&:active{
				opacity: 0.5;
			}
		}
		.header-avatar{
			margin-left: 100rpx;
			min-width: 200rpx;
			cursor: pointer;
			display: flex;
			align-items: center;
			margin-top: 10rpx;
			position: relative;
			.ha-icon{
				height: 100%;
				display: flex;
				align-items: center;
				image{
					width: 50rpx;
					height: 50rpx;
					border-radius: 100%;
				}
				text{
					margin-left: 20rpx;
					font-size: 30rpx;
					color: #959ba6;
					
				}
				&:hover{
					opacity: 0.8;
				}
				&:active{
					opacity: 0.5;
				}
			}
		}
		.header-login{
			margin-left: 100rpx;
			background-color: #d3fd24;
			border-radius: 6rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			&:hover{
				opacity: 0.8;
			}
			&:active{
				opacity: 0.6;
			}
			text{
				font-size: 28rpx;
				color: #12131e;
				margin: 20rpx 50rpx;
			}
		}
	}
}
.dropdown-item{
	&:hover{
		color: #67C23A !important;
		background-color: rgb(224.6, 242.8, 215.6) !important;
	}
}
.dropdown-loginout{
	&:hover{
		color: #F56C6C !important;
		background-color: rgb(253, 225.6, 225.6) !important;
	}
}
			
::v-deep .el-dropdown-menu {
	min-width: 200rpx;
	position: absolute !important;
	top: 40rpx !important;
	left: 0rpx !important;
}
</style>