<template>
	<view name="header">
		<view class="content">
			<u-swiper :list="banner" height="100%" imgMode="aspectFill" radius="0"></u-swiper>
			<view class="language" @click="pickerShow = true" :style="{top: statusBarHeight}">
				<image class="left-icon" src="/static/images/language.png" mode="aspectFit">
					<text>{{language}}</text>
					<image class="right-icon" src="/static/images/down.png" mode="aspectFit">
			</view>
		</view>
		<view>
			<u-picker :show="pickerShow" :columns="columns" @close="pickerClose" @confirm="pickerConfirm"
				@cancel="pickerCancel" :closeOnClickOverlay="true"></u-picker>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pickerShow: false,
				columns: [
					['English', 'Korean', 'Japan']
				],
				language: 'English',
				statusBarHeight: '20px',
				banner: [
					'https://static-cb30e4d5-8301-46aa-a034-b61b0d210fbd.bspapp.com/images/luck-poster/poster.png'
				]
			}
		},
		mounted() {
			// #ifndef H5
			uni.getSystemInfo({
				success: (e) => {
					this.statusBarHeight = e.statusBarHeight + 'px'
				}
			})
			// #endif
		},
		methods: {
			pickerClose() {
				this.pickerShow = false
			},
			pickerConfirm(e) {
				this.pickerShow = false
				this.language = e.value[0]
			},
			pickerCancel() {
				this.pickerClose()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 500rpx;
		background-color: $uni-bg-color-hover;
		position: relative;

		.language {
			position: absolute;
			/*#ifdef H5*/
			top: 20rpx;
			right: 20rpx;
			/*#endif*/
			/*#ifndef H5*/
			top: 40rpx;
			left: 20rpx;
			margin-top: 20rpx;
			/*#endif*/

			color: #FFFFFF;
			font-size: $uni-font-size-base;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;

			.left-icon {
				width: 60rpx;
				height: 30rpx;
			}

			.right-icon {
				width: 30rpx;
				height: 8rpx;
			}
		}
	}
</style>
