<template>
		<!-- #ifdef H5 -->
		<view class="nav-head-H5" :class="{ 'tp': bgTransparent }">
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<view class="nav-head" :class="{ 'tp': bgTransparent }">
				<!-- #endif -->
		<image src="../../static/public/back.png" mode="aspectFit" class="back" @tap="back()" v-if="showBack"></image>
		<slot name="left"></slot>
		<slot></slot>
		<slot name="middle"></slot>
		<slot name="right"></slot>
		<view class="languageBtn" v-if="showLang" @click.stop="languageShow = true">
			{{ langTrue }}
		</view>
		<!-- popups弹窗 -->
		<u-overlay :show="languageShow" @click="languageShow = false" :opacity="0">
			<language-popups v-model="languageShow" :popData="languageData" @tapPopup="tapPopup">
			</language-popups>
		</u-overlay>
		
	</view>
</template>

<script>
const COMPONENT_NAME = 'navigation'
import languageData from '@/utils/language/config'

export default {
	name: COMPONENT_NAME,
	props: {
		showBack: { // 是否显示返回按钮
			type: Boolean,
			default() {
				return true
			}
		},
		bgTransparent: { // 背景是否透明
			type: Boolean,
			default() {
				return false
			}
		},
		bgnum: {
			type: Boolean,
			default() {
				return false
			}
		},
		showLang: { // 是否显示返回按钮
			type: Boolean,
			default() {
				return false
			}
		},
		},
	data() {
		return {
langTrue: languageData[0].title || 'English',
				languageData,
				languageShow: false,
		}
	},
	computed: {

	},
	mounted() {
		if(this.showLang){
			if (uni.getStorageSync('langTrue')) {
							this.langTrue = uni.getStorageSync('langTrue')
						}
		}

	},
	methods: {
		// 切换语言
		tapPopup(e) {
			this._i18n.locale = e.language
			this.$store.commit('setLanguage', e.language)
			this.langTrue = e.title
			uni.setStorageSync('langTrue', e.title)
			// uni.redirectTo({
			// 	url: '/pages/home/index'
			// })
			uni.reLaunch({
				url: '/pages/login/register'
			})
		},
		back() {

			// #ifdef H5
			history.back()
			// #endif

			// #ifdef APP-PLUS	
			uni.navigateBack()
			// #endif
		}
	},
}
</script>

<style scoped lang="scss">
.item {
	font-size: 28rpx;
	text-align: center;
	width: 234rpx;
	line-height: 60rpx;
}
			.languageBtn {
				display: inline-block;
				box-sizing: border-box;
				width: 180rpx;
				position: absolute;
				right: 0rpx;;
				margin: 38rpx 48rpx 0 0;
				font-size: 24rpx;
				height: 60rpx;
				line-height: 36rpx;
				text-align: center;
				padding-left: 12rpx;

				&::before {
					display: block;
					position: absolute;
					content: '';
					background-image: url(../../static/home/map.png);
					background-repeat: no-repeat;
					background-size: 36rpx;
					width: 36rpx;
					height: 36rpx;
					top: 0rpx;
					left: 0rpx;
				}

				&::after {
					display: block;
					position: absolute;
					content: '';
					background-image: url(../../static/home/pull-down.png);
					background-repeat: no-repeat;
					background-size: 24rpx;
					width: 24rpx;
					height: 24rpx;
					top: 12rpx;
					right: 0rpx;
				}

			

		}
.nav-head-H5{
	overflow: hidden;
	position: fixed;
	top: 0rpx;
	height: 112rpx;
	// background-color: #fafafa;
	// background-color: #fff;
	text-align: center;
	font-weight: 700;
	font-size: 36rpx;
	color: #fff;
	// padding: 40rpx 16rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	background-color: #15141F;
	z-index: 8;
	border-bottom: 4rpx solid #323045;
	
	&.tp {
		background-color: transparent;
		border: none;
	}
}
.nav-head {
	overflow: hidden;
	position: fixed;
	top: 0rpx;
	height: 112rpx;
	// background-color: #fafafa;
	// background-color: #fff;
	text-align: center;
	font-weight: 700;
	font-size: 36rpx;
	color: #fff;
	// padding: 40rpx 16rpx;
	padding-top: 88rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	background-color: #15141F;
	z-index: 8;
	border-bottom: 4rpx solid #323045;

	&.tp {
		background-color: transparent;
		border: none;
	}
}

.back {
	width: 80rpx;
	height: 80rpx;
	position: absolute;
	left: 36rpx;
}
</style>
