<template>
	<view class="content">
		<view class="login_pages">
			<view class="login_content">
				<view class="login_tips">
					<text>Hi,</text>
					<text>{{$t('login.notice')}}</text>
				</view>
				<view class="login_form">
					<view class="login_title">{{$t('mine.platform')}}</view>
					<view class="current_user">
						{{$t('mine.current')}}：{{userName}}
					</view>
					<view class="plat_box">
						<view>
							<view class="plat_item" v-for="(item,index) in platList" @click="onChosed(index)"
								:key='index'>
								<view class="checkbox" style="width: 60rpx" :class="{'active': currentIndex == index}">
									<view class="unChosed"></view>
									<icon class="chosed" type="success" color="#B60001" size="18" />
								</view>
								<view class="plat_name">
									{{item.platformName}}
								</view>
							</view>
						</view>
					</view>
					<view class="loginBtn"><button class="login_btn"
							@tap="onsure">{{$t('mine.platform.confirm')}}</button></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import serverConfig from '../../config/server_config.js'
	import {
		getUserPlatformList,
		customerChangeToken,
		getUserInfo
	} from '@/config/api.js'
	import {
		setConfig
	} from '@/config/index.js'
	export default {
		data() {
			return {
				currentIndex: 0,
				platList: [],
				userName: ''
			}
		},
		onLoad() {
			let userInfo = JSON.parse(uni.getStorageSync('userInfo'))
			this.userName = userInfo.customerName
			this.getPlatList()
		},
		methods: {
			async getPlatList() {
				let userInfo = JSON.parse(uni.getStorageSync('userInfo'))
				this.userName = userInfo.customerName
				let platRes = await getUserPlatformList()
				this.platList = platRes.content
			},
			onChosed(i) {
				this.currentIndex = i
			},
			onsure() {
				let currentPlat = this.platList[this.currentIndex].platformCode
				customerChangeToken({
					token: uni.getStorageSync('token'),
					platformCode: currentPlat
				}).then((res) => {
					if (res.success) {
						uni.setStorageSync('token', JSON.parse(res.content.token).token)
						uni.setStorageSync('platform_code', currentPlat)
						setConfig(currentPlat)
						this.getUserInfo()
					}
				})
			},
			async getUserInfo() {
				let info = await getUserInfo({
					params: {
						token: uni.getStorageSync('token')
					}
				})
				let userInfo = {
					customerCode: info.content.userInfo.customerCode,
					customerName: info.content.userInfo.customerName,
					loginName: info.content.userInfo.loginName
				}
				uni.setStorageSync('userInfo', JSON.stringify(userInfo))
				uni.setStorageSync('userBtnPerms', JSON.stringify(info.content.userBtnPerms));
				uni.showToast({
					title: this.$t('index.platform-switch')
				})
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					});
				}, 1500)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 100vh;
	}

	.plat_box {
		min-height: 200rpx;
		margin-top: 80rpx;
		display: flex;
		align-items: center;
	}

	.plat_item {
		display: flex;
		margin: 40rpx;
	}

	.plat_name {
		font-size: 32rpx;
		width: 100%;
		// text-align: center;
		margin-left: 20rpx;
	}

	.confirm_box {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.confirm_btn {
		margin-top: 50rpx;
		width: 150rpx;
		background-color: #B60001;
		color: #fff;
		padding: 10rpx;
		border-radius: 40rpx;
		text-align: center;
	}

	.checkbox {
		flex: none;
		position: relative;

		&.active {
			.unChosed {
				opacity: 0;
			}

			.chosed {
				opacity: 1;
			}
		}

		.unChosed {
			box-sizing: border-box;
			width: 40rpx;
			height: 40rpx;
			border: 1rpx solid #909399;
			border-radius: 50%;
			position: absolute;
			top: 50%;
			left: 0;
			transform: translateY(-50%);
			opacity: 1;
			transition: opacity .3;
		}

		.chosed {
			position: absolute;
			top: 50%;
			left: 0;
			transform: translateY(-50%);
			opacity: 0;
			transition: opacity .3;
		}
	}

	.login_pages {
		position: relative;
		height: 100vh;
		width: 100vw;
		// background: url('https://s3.ax1x.com/2021/01/09/sME4Xt.png') no-repeat center/cover;
		background-image: url('http://manage.51svalue.com/group1/M00/00/7A/CgAAEWOYHpmAEzguAAkOhVEw8j4530.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;

		&::after {
			position: absolute;
			display: inline-block;
			width: 100%;
			height: 100%;
			content: '';
			z-index: 999;
			background: linear-gradient(180deg, rgba(28, 113, 255, 0.7) 0%, rgba(73, 167, 255, 0.4) 100%);
		}

		.login_content {
			position: absolute;
			z-index: 9999;
			// width: 100%;
			padding: 0 30rpx;

			.login_tips {
				margin: 80rpx 0;
				display: flex;
				flex-direction: column;

				text {
					font-size: 46rpx;
					font-family: SourceHanSansCN;
					font-weight: 500;
					color: #ffffff;

					&:nth-of-type(1) {
						margin-bottom: 10rpx;
					}
				}
			}

			.login_form {
				width: 620rpx;
				padding: 40rpx;
				background: #ffffff;
				border-radius: 10rpx;

				.login_title {
					position: relative;
					font-size: 34rpx;
					font-family: SourceHanSansCN;
					font-weight: 500;
					color: #2f2f2f;

					&::after {
						position: absolute;
						bottom: -5rpx;
						left: 20rpx;
						display: inline-block;
						content: '';
						width: 56rpx;
						height: 17rpx;
						background: rgba(66, 140, 255, 0.5);
					}
				}

				.login_item {
					line-height: 96rpx;
					margin: 40rpx 0 0;
					display: flex;
					align-items: center;

					.uni-input {
						width: 100%;
						height: 96rpx;
					}
				}

				.login_item_2 {
					line-height: 96rpx;
					margin: 40rpx 0 0;
					display: flex;
					align-items: center;

					input {
						width: 400rpx;
						height: 96rpx;
					}
				}

				.loginBtn {
					margin-top: 80rpx;

					.login_btn {
						width: 620rpx;
						height: 114rpx;
						background: linear-gradient(to right, #7ae6fa, #448fff);
						border-radius: 55rpx;
						box-shadow: 0rpx 20rpx 40rpx 0rpx rgba(21, 127, 192, 0.3);
						font-size: 32rpx;
						font-weight: 500;
						color: #ffffff;
						line-height: 114rpx;

						&::after {
							border: none;
						}
					}
				}
			}
		}
	}

	.current_user {
		margin-top: 40rpx;
	}
</style>