<template>
	<view class="cardHeader">
		<view class="flex">
			<image src="../static/images/logo.png" mode="" class="logo"></image>
			<view class="title">IPPSWAP</view>
		</view>
		<view class="lang" @click="showLang">
			<text class="lang-text">
				{{langTrue=='English'?'EN':'CN'}}
			</text>
		</view>
		<view class="select-con" v-show="isShowLang">
			<view class="item" v-for="(item, index) in languageData" :key="index" @click="changeLanguage(item,index)"
				:style="{color:index==current?'#fff':''}">
				{{ item.title }}
			</view>

		</view>

	</view>
</template>

<script>
	import languageData from '@/utils/language/config'
	export default {
		name: 'Header',
		props: {
			title: {
				type: String | Number,
				default () {
					return ''
				}
			},
		},
		data() {
			return {
				current: uni.getStorageSync('current') || 0,
				isShowLang: false,
				i: 1,
				languageData,
				language: languageData[0].language || 'zh_TW',
				langTrue: languageData[0].title || '繁体中文',
			}
		},
		mounted() {
			if (uni.getStorageSync('langTrue')) {
				this.langTrue = uni.getStorageSync('langTrue')
				this.language = this._i18n.locale
			}
		},
		methods: {
			changeLanguage(e, i) {
				const index = i || 0
				this.current = i
				const current = this.languageData[index]
				this._i18n.locale = current.language
				this.$store.commit('setLanguage', current.language)
				this.langTrue = current.title
				uni.setStorageSync('langTrue', current.title)
				uni.setStorageSync('current', this.current)
				this.isShowLang = false
				this.i++
			},
			showLang() {
				this.i++
				if (this.i % 2 == 0) {
					this.isShowLang = true
				} else {
					this.isShowLang = false
				}
			},
		}

	}
</script>

<style lang="scss" scoped>
	.select-con {
		position: absolute;
		right: 32rpx;
		top: 105rpx;
		z-index: 10;
		background: url('../static/images/Union.png') no-repeat;
		background-size: cover;
		color: rgba(167, 181, 229, 1);
		width: 176rpx;
		height: 178rpx;
		padding: 40rpx 30rpx;

		.item:last-child {
			margin-top: 30rpx;
		}
	}

	.cardHeader {
		position: relative;
		box-sizing: border-box;
		height: 106rpx;
		padding: 20rpx 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: radial-gradient(104.53% 5436.39% at -4.53% 16.35%, #7F97EC 3.77%, #8D6CEA 11.22%, #5944D7 24.63%, #2D2EA8 36.47%, #182390 63.92%, #16228E 100%)
			/* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */
		;

		.logo {
			width: 62rpx;
			height: 58rpx;
		}

		.title {
			height: 100%;
			font-size: 40rpx;
			display: table;
			color: #fff;
			margin-left: 24rpx;
		}

		.lang {
			text-align: center;
			font-size: 28rpx;
			font-weight: 700;
			width: 66rpx;
			height: 66rpx;
			line-height: 60rpx;
			border: 2rpx solid transparent;
			border-radius: 12rpx;
			background-clip: padding-box, border-box;
			background-origin: padding-box, border-box;
			background-image: linear-gradient(180deg, #222794 25%, #592A86 77.78%), linear-gradient(to right, rgba(230, 232, 156, 1), rgba(247, 135, 171, 1));

			.lang-text {
				background: linear-gradient(to bottom, rgba(230, 232, 156, 1), rgba(247, 135, 171, 1));
				-webkit-background-clip: text;
				color: transparent;
			}
		}

	}
</style>