<template>
	<view class="lang-float" :style="{ bottom: bottom }" @click="openPicker">
		<text class="lang-float-txt">A/文</text>
	</view>
</template>

<script>
export default {
	name: 'LanguageFloat',
	props: {
		bottom: {
			type: String,
			default: '300rpx'
		}
	},
	methods: {
		openPicker() {
			const list = [
				this.$t('lang.zh'),
				this.$t('lang.en'),
				this.$t('lang.ko'),
				this.$t('lang.ja')
			]
			uni.showActionSheet({
				itemList: list,
				success: (res) => {
					const locales = ['zh-Hans', 'en', 'ko', 'ja']
					const loc = locales[res.tapIndex]
					if (!loc) return
					this.$i18n.locale = loc
					uni.setStorageSync('app_locale', loc)
				}
			})
		}
	}
}
</script>

<style scoped>
.lang-float {
	position: fixed;
	right: 24rpx;
	z-index: 998;
	width: 88rpx;
	height: 88rpx;
	border-radius: 44rpx;
	background: rgba(74, 124, 89, 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12);
}
.lang-float-txt {
	color: #fff;
	font-size: 24rpx;
	font-weight: 600;
}
</style>
