<template>
	<div class="navbar">
		<div class="left-menu">
			<mf-icon
				:class="['left-collapse', { isCollapse: isCollapse }]"
				cursor="pointer"
				@click="$store.dispatch('main/toggleSideBar')"
				value="icon-shrink" />
			<div class="logo">
				<div
					class="logo-wrap"
					@click="handleBackHome">
					<a-image
						v-if="logoUrl"
						height="40px"
						width="150px"
						:preview="false"
						:src="logoUrl" />
				</div>
			</div>
		</div>
		<div class="right-menu">
			<div
				class="right-menu-item"
				v-if="!userInfo.username">
				<mf-button
					class="login"
					type="primary"
					@click="openLogin">
					{{ $t('common.login') }}
				</mf-button>
			</div>
			<div class="right-menu-item language">
				<a-dropdown @select="handleSelect">
					<mf-button type="text">
						{{ localeName }}
						<icon-down />
					</mf-button>
					<template #content>
						<a-doption
							v-for="(name, code) in localeNames"
							:key="code"
							:value="code">
							{{ name }}
						</a-doption>
					</template>
				</a-dropdown>
			</div>
			<div
				class="right-menu-item user"
				v-if="userInfo.username"
				@click="showUser">
				<span>
					<a-image
						class="wallet"
						:preview="false"
						:width="16"
						fit="cover"
						src="/images/nav/img_money@2x.png" />
					{{ userInfo.balance || '0.00' }}
				</span>
				<mf-avatar
					class="user-avatar"
					:modelValue="myAvatar"
					:name="userInfo.username"
					:size="25" />
			</div>
			<div
				class="right-menu-item logout"
				v-if="userInfo.username">
				<mf-button
					type="text"
					@click="logout">
					{{ $t('common.logout') }}
				</mf-button>
			</div>
		</div>

		<Login
			:register="!$datas.isEmpty(inviteCode)"
			:visible="showLogin"
			@open="openLogin"
			@cancel="cancelLogin" />
		<User
			@cancel="userVisible = false"
			:visible="userVisible" />

		<mf-forbidden :visible="showForbidden" />
	</div>
</template>

<script>
/**
 * 头部导航栏
 */
import { mapGetters, mapState } from 'vuex'
import cloneDeep from 'lodash-es/cloneDeep'
import { constantRoutes } from '@/router/index.js'
import Login from './Login.vue'
import i18n, { LOCALE_NAMES } from '@/lang/i18n'
import User from './User.vue'

export default {
	name: 'nav-bar',
	data() {
		return {
			changePwdVisible: false,
			themeList: [
				{
					value: '',
					label: '亮色模式'
				},
				{
					value: 'dark',
					label: '暗黑模式'
				}
			],
			publishVisible: false,
			inviteCode: this.$route.query?.inviteCode,
			userVisible: false,
			logoUrl: null
		}
	},
	components: { Login, User },
	computed: {
		demoEnv() {
			return import.meta.env.MODE === 'demo'
		},
		localeNames() {
			return LOCALE_NAMES
		},
		localeName() {
			return LOCALE_NAMES[this.lang] || 'English'
		},
		...mapGetters([
			'theme',
			'permission_routes',
			'lang',
			'showForbidden',
			'showLogin',
			'sidebar'
		]),
		// 用户信息
		userInfo() {
			return this.$store.state.user.userInfo || {}
		},
		myAvatar() {
			let userInfo = this.userInfo || {}
			return userInfo.avatar || '/images/avatar.svg'
		},
		isCollapse() {
			return !this.sidebar.opened
		},
		selectedKeys() {
			return [this.$route.name]
		},
		menuItems() {
			return [
				{
					value: 'index',
					label: this.$t('route.index')
				},
				{
					value: 'projects',
					label: this.$t('route.projects')
				},
				{
					value: 'markets',
					label: this.$t('route.markets')
				},
				{
					value: 'about',
					label: this.$t('route.about')
				},
				{
					value: 'help',
					label: this.$t('route.help')
				}
			]
		}
	},
	mounted() {
		if (this.inviteCode) {
			this.openLogin()
		}
		this.getLogo()
	},
	methods: {
		openLogin() {
			this.$store.dispatch('main/setShowLogin', true)
		},
		cancelLogin() {
			this.$store.dispatch('main/setShowLogin', false)
		},
		getLogo() {
			this.$axios({
				url: 'api/user/getPortalLogo',
				method: 'GET'
			})
				.then((res) => {
					if (res.data) {
						this.logoUrl = res.data
					} else {
						this.logoUrl = '/images/logo.png'
					}
				})
				.catch((_) => {
					this.logoUrl = '/images/logo.png'
				})
		},
		showUser() {
			this.userVisible = true
		},
		publishProject() {
			if (this.userInfo.username) {
				this.$router.push('/project-publish')
				// this.publishVisible = true
			} else {
				this.openLogin()
			}
		},
		handleSelect(value) {
			if (value != this.lang) {
				this.$store.dispatch('main/setLanguage', value)
				i18n.global.locale = value
			}
		},
		logout() {
			this.$store.dispatch('user/logout2').then((_) => {
				this.$router.replace('/')
			})
		},
		menuItemClick(key) {
			this.$router.push({ name: key })
		},
		handleBackHome() {
			this.$router.push('/')
		}
	}
}
</script>

<style lang="less">
.navbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: content-box;
	padding-left: 30px;
	padding-right: 30px;

	.left {
		display: flex;
		align-items: center;
		flex: 1;

		&-collapse {
			display: none;
			transition: 0.25s;

			&.isCollapse {
				transform: rotate(-180deg);
			}
		}

		&-menu {
			padding-left: 8px;
			display: flex;
			align-items: center;
			height: 60px;

			.logo {
				display: flex;
				align-items: flex-end;
				cursor: pointer;
				color: var(--color-text-1);

				&-wrap {
					display: flex;
					align-items: center;
				}
			}
		}
	}

	.right-menu {
		height: 60px;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex: 1;

		&-item {
			display: flex;
			align-items: center;
			height: 60px;
			margin-right: 12px;

			&:last-child {
				margin-right: 0;
			}

			&.language {
				.mf-button {
					font-size: 14px;
					color: #999999;
					background-color: transparent;
					&:hover {
						background-color: transparent;
					}
				}
			}

			&.logout {
				.mf-button {
					background-color: transparent;

					&:hover {
						background-color: transparent;
					}
				}
			}

			.login {
				width: 100px;
				border-radius: 10px;
				cursor: pointer;
			}

			&.user {
				width: 150px;
				color: rgb(var(--primary-6));
				border: 2px solid transparent;
				height: 32px;
				border: 1px solid #5c5d68;
				background: #26272e;
				border-radius: 16px;
				display: flex;
				align-items: center;
				justify-content: center;
				padding-left: 16px;
				padding-right: 4px;
				cursor: pointer;

				span {
					display: flex;
					align-items: center;
					flex-grow: 1;
					.arco-image {
						margin-right: 8px;
					}
				}
			}
		}
	}
}

.nav-point-name {
	color: var(--color-text-3);
}

.user-info {
	width: 220px;
	margin-left: -8px;

	.arco-dropdown-option {
		.mf-divider {
			margin: 5px 0;
		}
		.user-info-wrap {
			padding-top: 8px;
			padding-bottom: 8px;

			.mf-avatar {
				margin-right: 8px;
				flex-shrink: 0;
			}

			.user-info-name {
				width: 150px;
				font-weight: 600;
				color: var(--color-text-1);
				font-size: 14px;
				margin-bottom: 0px;
			}

			.user-info-company {
				width: 150px;
				font-size: 12px;
				color: var(--color-text-3);
				// margin-top: 3px;
				margin-bottom: 0px;
			}

			.user-info-service {
				width: 150px;
				font-size: 12px;
				color: var(--color-text-4);
				// margin-top: 3px;
				margin-bottom: 0px;
			}
		}

		&:first-child {
			&:hover {
				background-color: transparent;
			}
			cursor: text;
		}
	}
}

@media (max-width: 576px) {
	.navbar {
		padding: 0 10px;
		.left {
			&-collapse {
				display: block;
				font-size: 18px;
			}

			&-menu {
				display: flex;
				.logo {
					display: none;
				}
				.mf-icon {
					color: #fff;
				}
			}
		}

		.right-menu-item {
			&.user {
				width: 136px;
			}
		}
	}
}
</style>
