<template>
	<view class="login_pages">
		<uni-nav-bar left-icon="back" :statusBar="true" :title="$t('index.login')" backgroundColor="transparent"
			:border="false" background="linear-gradient( 180deg, #FBC3C3 0%, rgba(255,255,255,0) 100%)"
			@clickLeft="backEvent"></uni-nav-bar>
		<view class="login_content">
			<view class="login_tips">
				<image :src="web('icon_login.png')"></image>
			</view>
			<view class="login_form">
				<view class="login_item">
					<image :src="web('icon_iphone.png')" mode="aspectFit"></image>
					<input class="uni-input" type="text" v-model="username" focus placeholder-style="color:#C8CACD"
						:placeholder="$t('index.msg-account')" />
				</view>
				<view class="login_item">
					<image :src="web('icon_password.png')" mode="aspectFit"></image>
					<input class="uni-input" :type="eye?'text':'password'" v-model="password"
						placeholder-style="color:#C8CACD" :placeholder="$t('index.msg-password')" />
					<view @tap="viewPassword"
						style="height: 88rpx;width: 88rpx;display: flex;align-items: center;justify-content: center;">
						<uni-icons :type="eye?'eye-slash-filled':'eye-filled'" size="16"></uni-icons>
					</view>
				</view>
				<view class="check">
					<uni-data-checkbox style="width: 100rpx;" multiple v-model="checkbox"
						:localdata="hobby"></uni-data-checkbox>
					<view style="position: absolute;left: 50rpx;">
						{{$t('index.read')}}<text @click="protocolEvent" style="color: #b60001;">
							{{$t('index.protocol')}}
						</text>
					</view>
				</view>
				<view class="loginBtn">
					<button :class="checkbox.length==1?'login_btn enable':'login_btn disable'"
						@tap="toLogin">{{$t('index.login-now')}}</button>
					<view class="register" @click="registerEvent">
						{{$t('index.go-register')}}
					</view>
				</view>
			</view>
		</view>

		<view style="position: absolute;left: 0;right: 0;bottom: 0;height: 476rpx;z-index: 0;">
			<image style="width: 100%;height: 100%;" :src="web('icon_company_bg.png')"></image>
		</view>
	</view>
</template>

<script>
	import {
		customerToken,
		getUserInfo,
		findPlatformCodeByMobile
	} from '@/config/api.js'
	import {
		web
	} from '@/utils/util.js'
	import {
		encrypt
	} from '@/utils/jsencrypt.js'
	import serverConfig from '../../config/server_config.js'
	import {
		setConfig
	} from '@/config/index.js'
	let locationUrl = '';
	export default {

		data() {
			return {
				username: '18112345672',
				password: '123456a',
				checkbox: [0],
				hobby: [{
					text: '',
					value: 0
				}],
				eye: false,

			};
		},
		onLoad(options) {
			locationUrl = JSON.parse(decodeURIComponent(options.url))
		},
		methods: {
			web(name) {
				return web(name)
			},

			protocolEvent() {
				uni.navigateTo({
					url: '/pages/policy/agreement'
				})
			},

			viewPassword() {
				this.eye = !this.eye
			},
			backEvent() {
				uni.navigateBack()
			},
			web(name) {
				return web(name)
			},
			registerEvent() {
				uni.navigateTo({
					url: '/pages/register/register'
				})
			},
			//登录
			async toLogin() {
				uni.hideKeyboard();

				if (!this.username) {
					uni.showToast({
						title: this.$t('index.msg-account'),
						icon: 'none'
					});
					return false;
				}
				if (!this.password) {
					uni.showToast({
						title: this.$t('index.msg-password'),
						icon: 'none'
					});

					return false;
				}

				let platRes = await findPlatformCodeByMobile({
					mobile: this.username
				})

				if (platRes.content.length == 0) {
					uni.showToast({
						icon: "none",
						title: this.$t('index.msg-mobile-no')
					})
					return
				}
				uni.setStorageSync('platform_code', platRes.content[0])
				serverConfig.platform_code = platRes.content[0]
				setConfig(platRes.content[0])
				let data = await customerToken({
					loginType: "0",	// 手机+密码登录
					username: this.username,
					password: encrypt(this.password)
				})

				let res = JSON.parse(data.content.token)
				uni.setStorageSync('token', res.token)
				let info = await getUserInfo({
					params: {
						token: res.token
					}
				})
				const isSupplier = info.content.userPlat.some(item=>item.key === 'supplier')
				const isSeller = info.content.userPlat.some(item=>item.key === 'seller')
				// const isOperator = info.content.userPlat.some(item=>item.key === 'operator')
				let userInfo = {
					customerCode: info.content.userInfo.customerCode,
					customerName: info.content.userInfo.customerName,
					loginName: info.content.userInfo.loginName,
					userCurrentPlat: isSupplier ? 'supplier' : (isSeller ? 'seller' : 'operator'),
					userCurrentPlatName: info.content.userCurrentPlatName
				}
				uni.setStorageSync('userInfo', JSON.stringify(userInfo))
				uni.setStorageSync('userBtnPerms', JSON.stringify(info.content.userBtnPerms));
				setTimeout(() => {
					uni.showToast({
						title: this.$t('index.operate-success')
					})
					setTimeout(() => {
						uni.reLaunch({
							url: locationUrl
						})
					}, 1500)
				}, 30)
			}
		}
	};
</script>

<style lang="scss" scoped>
	.login_pages {
		position: relative;
		height: 100vh;
		width: 100vw;
		background: #ffffff;

		// 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');
		&::after {
			position: absolute;
			display: inline-block;
			width: 100%;
			height: 100%;
			content: '';
			z-index: 10;

		}

		.login_content {
			position: absolute;
			z-index: 12;
			// width: 100%;
			padding: 0 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

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

				image {
					width: 420rpx;
					height: 92rpx;
				}
			}

			.login_form {
				width: 620rpx;
				padding: 40rpx;
				// height: 600rpx;
				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;
					}
				}

				.login_item {
					line-height: 96rpx;
					margin: 40rpx 0 0;
					display: flex;
					align-items: center;
					border: 1px solid #E6E7E8;

					image {
						width: 44rpx;
						height: 44rpx;
						margin: 0 20rpx;
					}

					.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;
					}
				}

				.check {
					display: flex;
					align-items: center;
					padding: 40rpx 0;
					position: relative;
				}

				.loginBtn {
					margin-top: 80rpx;

					.login_btn {
						width: 620rpx;
						height: 96rpx;

						// box-shadow: 0rpx 20rpx 40rpx 0rpx rgba(21, 127, 192, 0.3);
						font-size: 32rpx;
						font-weight: 500;
						color: #ffffff;
						line-height: 96rpx;

						&::after {
							border: none;
						}


					}

					.disable {
						background: gray;
						pointer-events: none;
					}

					.enable {
						background: #B60001;
					}
				}
			}
		}
	}

	.register {
		height: 88rpx;
		line-height: 88rpx;
		font-size: 12px;
		color: #333;
		justify-content: flex-end;
		display: flex;
	}
</style>