<template>
	<view class="content">
		<view class="title-name">
			快衣店
		</view>
		<view class="container" :style='{"padding-top":isShareDown?"300rpx":"0"}'>
			<view class="" v-if="!isShareDown">
				<uni-section title="选择登录身份" type="line">
					<uni-data-select v-model="wayValue" :localdata="range" @change="sectionChange"
						:clear="false"></uni-data-select>
				</uni-section>
			</view>
			<view class="login-content" v-if="loginWay == true && !isShareDown">
				<uni-easyinput v-model="username" placeholder="请输入账号" />
				<com-zw />
				<uni-easyinput v-model="password" :maxlength="25" placeholder="请输入密码" type="password" />
				<com-zw />
				<view class="flex" style="display: flex;">
					<uni-easyinput v-model="code" :clearable="false" :maxlength="4" placeholder="请输入验证码" />
					<img :src="captchaImg" alt="加载验证码失败"
						style="width: 180rpx; height: 74rpx; cursor: pointer; display: block" @click="getCaptchaImg" />
				</view>
			</view>
			<view class="login-content" v-if="!isShareDown &&loginWay == false ">
				<uni-easyinput v-model="mobile" :maxlength="11" placeholder="请输入手机号" />
				<com-zw />
				<view class="code-box">
					<uni-easyinput type="digit" v-model="code" placeholder="请输入验证码" trim="all" />
					<button class="button" size="mini" type="default" @click="sendLoginSms" :disabled="choose"
						:class="choose == false ? 'hasChosen':'notChosen'">
						{{ choose ? clock + '重新获取' : '获取验证码' }}
					</button>
				</view>
			</view>
			<view class="tui-protocol" hover-class="opcity" :hover-stay-time="150">
				<checkbox-group @change="xieyi" style="display: inline;">
					<label>
						<checkbox :value="xieyidata" :checked="xieyidata" style="transform:scale(0.7)" />
					</label>
				</checkbox-group>
				您已阅读并同意
				<text class="tui-protocol-red" @tap="protocol('1')">《用户协议》</text>
				<text class="tui-protocol-red" @tap="protocol('2')">《隐私政策》</text>
			</view>
			<view v-if="!isShareDown" @tap.stop="goLogin" class="login-btn">登录</view>
			<view v-if="isShareDown" @tap.stop="wxLogin" class="login-btn">微信登录</view>
			<view class="login-way">
				<view class="" @tap="goRegister">新店铺注册</view>
				<view class="" v-if="!isShareDown && wayValue == '2'" @tap="isShareDown = true">微信登录</view>
				<view class="" v-if="isShareDown" @tap="isShareDown = false">手机号登录</view>
				<view class="" v-if="!isShareDown" @tap="switchLoginWay">{{loginWay ? '验证码登录' : '账号密码登录'}}</view>
			</view>
		</view>
		<!-- 多店铺的时候，选择店铺的弹窗 -->
		<view>
			<uni-popup ref="popup" background-color="#fff">
				<view class="popup-content">
					<view class="popup-title">
						<text>{{wayValue == 1?'选择登录物流':'选择登录店铺'}}</text>
					</view>
					<view class="popup-container" v-for="item in shopList" :key="item" @tap="checkShop(item)">
						<text style="display: inline-block">{{wayValue==1?item.companyName:item.shopName}}</text>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState
	} from 'vuex';
	import {
		reg,
		wxLogin
	} from '@/utils/global.js'
	export default {
		data() {
			return {
				mobile: '',
				username: '',
				isShareDown:false,
				// username: '15630117759',
				code: '',
				password: '',
				// password: '19950123kang',
				loginWay: true, //true账号密码登录  false验证码登录
				captchaImg: '',
				xieyidata:false,
				captchaId: '',
				wayValue: 0,
				range: [{
						value: 0,
						text: "店铺"
					},
					{
						value: 1,
						text: "物流公司"
					},
					{
						value: 2,
						text: "下游客户"
					},
				],
				choose: false,
				isChoose: false,
				clock: 60, // 倒计时
				shopList: [],
				saleId:'',
				customId:''
			}
		},
		computed: mapState(['type']),
		onShareAppMessage() {
			return {
				title: '邀请您注册快衣店',
				imageUrl:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/3c50b6541b2d4780bab4b3fd0c0af490.jpg',
				path: '/package2/login/login'
			}
		},
		onLoad(option) {
			let that = this;
			if(option.saleId){
				this.saleId = option.saleId
			}
			if(uni.getStorageSync('shopId') && uni.getStorageSync('hiver_token')){
				uni.reLaunch({
					url: '/pages/index/index'
				})
				return
			}
			if(option.customId){
				uni.setStorageSync('wayValue',2)
				this.customId = option.customId
				this.isShareDown = true
			}
			
			if(uni.getStorageSync('codePage')){
				this.wayValue = 2
				this.$forceUpdate()
				uni.removeStorageSync('codePage')
			}
			
			//缓存中有userId，直接更新
			if(uni.getStorageSync('id') && uni.getStorageSync('wayValue') == 2){
				that.tui.request("/app/customer/updateUserId", "post", {
					customerId:option.customId,
					userId:uni.getStorageSync('id')
				}, false, true).then((res) => {
					uni.reLaunch({
						url: '/package1/other/custom?saleId=' + this.saleId + '&userId=' + option.customId
					})
				})
			}
			if(uni.getStorageSync('hiver_token') && uni.getStorageSync('wayValue') == 2){
				uni.reLaunch({
					url: '/package1/other/custom?saleId=' + this.saleId + '&userId=' + this.customId
				})
			}
			this.getCaptchaImg();
			this.username = uni.getStorageSync('username')
			this.password = uni.getStorageSync('password')
		},
		methods: {
			
			...mapMutations(['login']),
			...mapActions(['getUserInfo']),
			getCaptchaImg() {
				this.tui.request("/common/captcha/init", "GET", null).then((res) => {
					if (res.code == 200) {
						this.captchaId = res.result
						this.captchaImg = this.tui.interfaceUrl() + '/common/captcha/draw/' + this
							.captchaId
					} else {
						this.tui.toast(res.message)
					}
				}).catch((res) => {})
			},
			sectionChange(index) {
				this.wayValue = index;
				if(index == '2'){
					this.isShareDown = true
				}
			},
			//登录
			goLogin() {
				let data = {},
					loginUrl=''
				if(this.xieyidata == false){
					this.tui.toast('请阅读用户协议并勾选同意后再登录！')
					return
				}
				if (this.loginWay) { //true
					data = {
						username: this.username,
						password: this.password,
						code: this.code,
						captchaId: this.captchaId,
						saveLogin: true,
						type: this.wayValue
					}
					loginUrl='/auth/login'  //type : 0管理员  1是普通员工
				} else {
					data = {
						mobile: this.mobile,
						code: this.code,
						saveLogin: true,
						type: this.wayValue
					}
					loginUrl='/auth/smsLogin'
				}
				if(this.wayValue == 1){ //物流公司
					this.tui.request("/app/logitics/login", "POST", {
						username: this.username,
						password: this.password,
						code: this.code,
						saveLogin: true,
						type: this.wayValue
					}, true, true).then((res) => {
						if (res.code == 200) {
							this.toggle("center");
							this.shopList = res.result
							
						}else{
							this.getCaptchaImg()
							this.tui.toast(res.message)
						}
					}).catch((res) => {
						this.getCaptchaImg()
					})
				}else{
					this.tui.request(loginUrl, "POST", data, true, true).then((res) => {
						if (res.code == 200) {
							uni.setStorageSync("hiver_token", res.result.accessToken)
							uni.setStorageSync("wayValue", this.wayValue)
							uni.setStorageSync("nickname", res.result.user.nickname)
							
							if(this.wayValue == '2'){
								uni.setStorageSync("id", res.result.user.id)
							}else{
								uni.setStorageSync("id", res.result.user.id)
							}
							uni.setStorageSync('username',this.username)
							uni.setStorageSync('password',this.password)
							if(this.wayValue == 2){ //下游客户登录
								uni.setStorageSync('miniProgramOpenid',res.result.user.miniProgramOpenid)
								uni.setStorageSync('officialAccountOpenid',res.result.user.officialAccountOpenid)
								uni.setStorageSync('unionid',res.result.user.unionid)
								setTimeout(() => {
									uni.reLaunch({
										url: '/package1/other/custom?saleId=' + this.saleId
									})
								}, 200)
								this.tui.toast('登录成功', 2000, true)
							}else if (res.result.shopList.length > 1 && this.wayValue == 0) {
								this.shopList = res.result.shopList;
								this.toggle("center");
								
							}else{
								this.checkShop(res.result.shopList[0])
							}
						} else {
							this.tui.toast(res.message)
							setTimeout(res=>{
								this.getCaptchaImg()
							},1000)
						}
					}).catch((res) => {
						
						this.getCaptchaImg()
					})
				}
				
			},
			wxLogin(){
				let that =this;
				if(this.xieyidata == false){
					this.tui.toast('请阅读用户协议并勾选同意后再登录！')
					return
				}
				uni.login({
					provider: 'weixin',
					success(res) {
						uni.getUserInfo({
							provider: 'weixin',
							success: function(infoRes) {
								
								that.tui.request("/user/login", "post", {
									jsCode: res.code,
									customId: that.customId,
									wechatName: infoRes.userInfo.nickName,
									userType: "2"
								}, false, false).then((res) => {
									if (res.code == 200) {
										
										uni.setStorageSync("hiver_token", res.result.accessToken)
										uni.setStorageSync("wayValue", "2")
										uni.setStorageSync("nickname", res.result.user.nickname)
										uni.setStorageSync("id", res.result.user.id)
										uni.setStorageSync('unionid',res.result.user.unionid)
										uni.setStorageSync('miniProgramOpenid',res.result.user.miniProgramOpenid)
										uni.setStorageSync('officialAccountOpenid',res.result.user.officialAccountOpenid)
										setTimeout(() => {
											uni.reLaunch({
												url: '/package1/other/custom?saleId=' + this.saleId
											})
										}, 200)
										this.tui.toast('登录成功', 2000, true)
									} else {
										that.tui.toast(res.message)
									}
								}).catch((res) => {})
							}
						});
						
					}
				});
			},
			//多店铺的时候点击选择需要登录的店铺
			checkShop(item) {
				let that = this;
				uni.getSystemInfo({
					success: function (res1) {
						if(that.wayValue ==1){
							that.tui.request("/app/logitics/chooseCompany", "POST", {
								companyId: item.id,
								username:item.username
							}, false, true).then((res) => {
								if (res.code == 200) {
									let printMethod = JSON.parse(res.result.logiticsCompany.printMethod)
									uni.setStorageSync('remark',res.result.logiticsCompany.remark)
									uni.setStorageSync('companyTel',res.result.logiticsCompany.companyTel)
									if(res.result.logisticsUser == null || res.result.logisticsUser == undefined){
										uni.setStorageSync('wluserType',0)
									}else{
										uni.setStorageSync('wluserType',res.result.logisticsUser.userRole)
									}
									
									if(printMethod == null){
										uni.setStorageSync('wlNum',1)
									}else{
										if(printMethod.xbqNum != undefined){
											uni.setStorageSync('wlNum',printMethod.wlNum)
											uni.setStorageSync('xbqNum',1)
										}else{
											uni.setStorageSync('wlNum',printMethod.wlNum)
											uni.setStorageSync('zhiType',printMethod.zhiType)
										}
									}
									uni.setStorageSync('contacts',res.result.logiticsCompany.contacts)
									uni.setStorageSync('username',res.result.logiticsCompany.username)
									uni.setStorageSync('mobile',res.result.logiticsCompany.mobile)
									uni.setStorageSync("hiver_token", res.result.lcomToken)
									uni.setStorageSync("transCompany", res.result.logiticsCompany.companyId)
									uni.setStorageSync("isOnLine", res.result.logiticsCompany.isOnLine)
									uni.setStorageSync("companyMobile", res.result.logiticsCompany.mobile)
									uni.setStorageSync("companyName", res.result.logiticsCompany.companyName)
									uni.setStorageSync("signCompany", res.result.logiticsCompany.signCompany)
									uni.setStorageSync("wayValue", that.wayValue)
									that.tui.toast('登录成功', 2000, true)
									setTimeout(() => {
										uni.reLaunch({
											url: '/package2/other/newLogisticsIndex'
										})
									}, 200)
								} else {
									that.tui.toast(res.message)
									return
								}
							}).catch((res) => {})
						}else{
							that.tui.request("/auth/chooseShop", "POST", {
								shopId: item.shop.id,
								deviceId:res1.deviceId
							}, false, true).then((res) => {
								if (res.code == 200) {
									uni.setStorageSync('type',item.type)
									uni.setStorageSync('warehouseKeeperFlag',item.warehouseKeeperFlag)
									uni.setStorageSync('shopId',item.shop.id)
									uni.setStorageSync('shopName',item.shopName)
									uni.setStorageSync('storeFlag',item.storeFlag)
									uni.setStorageSync('shopIcon',res.result.shopIcon)
									uni.setStorageSync('shopAddress',res.result.shopAddress)
									uni.setStorageSync('shopRemark',res.result.remark)
									uni.setStorageSync("shopOwnerPhone", item.shopOwnerPhone)
									uni.setStorageSync("isShop",true)
									setTimeout(() => {
										uni.reLaunch({
											url: '/pages/index/index'
											// url: '/pages/index/logistics'
										})
									}, 200)
									that.tui.toast('登录成功', 2000, true)
								} else {
									that.tui.toast(res.message)
									return
								}
							}).catch((res) => {})
						}
					}
				});
			},
			sendLoginSms() { // 获取验证码
				this.isChoose = false
				if (reg(this.mobile, this.clock) && this.isChoose == false) {
					this.choose = true
					this.setTime()
					this.tui.request("/common/captcha/sendLoginSms/" + this.mobile, "GET", {
						type: this.wayValue
					}).then((res) => {
						if (res.code == 200) {
							uni.showToast({
								title: "发送成功",
								icon: 'success'
							})
						} else {
							this.tui.toast(res.message)
						}
					}).catch((res) => {})
				} else if (reg(this.mobile, this.clock) && this.isChoose == true) {

				}
			},
			setTime() { // 倒计时函数
				if (this.clock == 0) {
					this.clock = 60
					this.choose = false
					return
				} else {
					this.clock--
					if (this.clock < 10) {
						this.clock = '0' + this.clock
					}
				}
				setTimeout(() => {
					this.setTime()
				}, 1000)
			},
			//注册
			goRegister() {
				uni.navigateTo({
					url: '/package2/login/register'
				})
			},
			//切换登录方式
			switchLoginWay() {
				this.loginWay = !this.loginWay
			},
			protocol(num) {
				if(num == '1'){
					uni.navigateTo({
						url: '/package2/login/protocol'
					})
				}else{
					uni.navigateTo({
						url: '/package2/login/privacy'
					})
				}
				
			},
			//打开弹出层
			toggle(type) {
				this.type = type
				this.$refs.popup.open(type)
			},
			xieyi(e){
				this.xieyidata = e.detail.value=='false'?true:false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 1624rpx;
		background: #fff;
		font-size: 24rpx;
	}
	.title-name {
		width: 100%;
		height: 400rpx;
		line-height: 200rpx;
		font-size: 80rpx;
		text-align: center;
		padding-top: 200rpx;
		color: #000;
	}

	.container {
		width: 90%;
		height: 700rpx;
		margin: 0 auto;
	}

	.login-content {
		margin-top: 20rpx;
	}

	.tui-protocol {
		color: #333;
		font-size: 24rpx;
		text-align: center;
		width: 100%;
		margin: 29rpx 0;

		.tui-protocol-red {
			color: $u-primary;
		}
	}

	.login-btn {
		width: 100%;
		height: 80rpx;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		color: #fff;
		background-color: #0072E3;
		border-radius: 80rpx !important;
		line-height: 80rpx;
		text-align: center;
	}

	.login-way {
		display: flex;
		height: 80rpx;
		line-height: 80rpx;
	}

	.login-way view:first-child {
		flex: 1;
		padding-left: 40rpx;
	}

	.login-way view:last-child {
		flex: 1;
		padding-right: 40rpx;
		text-align: right;
	}

	.hasChosen {
		height: 74rpx;
		line-height: 74rpx;
		color: #fff;
		border: none;
		background: #5fd9ee;
	}

	.code-box {
		display: flex;
	}

	.popup-content {
		align-items: center;
		justify-content: center;
		padding: 30rpx;
		width: 500rpx;
		height: auto;
		overflow: scroll;
		max-height: 900rpx;
		background-color: #fff;
	}

	.popup-title {
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		position: relative;
	}

	.popup-container {
		margin-top: 20rpx;
		height: 100rpx;
		border-radius: 10px;
		background: #088FEB;
		line-height: 100rpx;
		text-align: center;
		border-bottom: 1px solid #eee;
		border-top: 1px solid #eee;
		color: #fff;
	}

	.phone-btn {
		width: 150rpx;
		height: 75rpx;
		color: #088FEB;
		line-height: 75rpx;
		font-size: 26rpx;
	}
	@media screen and (min-width: 760px) {
		.content {
			height: 1000rpx;
			background: #fff;
			font-size: 24rpx;
		}
		.title-name {
			width: 100%;
			height: 350rpx;
			line-height: 200rpx;
			font-size: 80rpx;
			text-align: center;
			padding-top: 200rpx;
			color: #000;
		}
		.container {
			width: 90%;
			height: 600rpx;
			margin: 0 auto;
		}
	}
</style>