<template>
	<view class="login">
		<view class="title">
		</view>
		<view class="logo">
			<image src="/static/identify/logo.png" mode=""></image>
		</view>
		<view class="btn" @click="login" v-if="isWechat">
			微信登录
		</view>
    <view class="input-box" v-if="!isWechat">
      <u-input
          v-model="phone"
          type="number"
          border="none"
          maxlength="11"
          placeholder="请输入手机号"
          placeholder-style="color: #999"
          class="input-item"
      ></u-input>
    </view>
    <view class="input-box code-box" v-if="!isWechat">
      <u-input
          v-model="code"
          type="number"
          border="none"
          maxlength="6"
          placeholder="请输入手机验证码"
          placeholder-style="color: #999"
          class="input-item code-input"
      ></u-input>
      <view class="code-btn" :class="{ disabled: !canGetCode }" @click="getCode">
        <text v-if="countdown === 60">获取验证码</text>
        <text v-else>{{ countdown }}s 后重新获取</text>
      </view>
    </view>
    <view class="btnphone" @click="loginPhone" v-if="!isWechat">
      登录
    </view>
		<view class="agree">
			<view class="round" @click="isLook">
				<image src="/static/other/select_round.png" mode="" v-if="look"></image>
				<image src="/static/other/round.png" mode="" v-else></image>
			</view>
			<view class="choice">
				我已阅读并同意 <text @click="goAgreement">《用户协议》</text> 和 <text @click="goPrivacy">《隐私政策》</text>
			</view>
		</view>
	</view>
</template>

<!-- <script href="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> -->
<script ref="http://res.wx.qq.com/open/js/jweixin-1.6.0.js">
  import {phoneLogin} from "@/api/index";
  import { normalizeStorageValue } from '@/utils/technicianProfile.js';
	export default {
		data() {
			return {
				openId: '',
				isLogin: false,
				token: '',
				look:false,
				isWechat:true,
				phone: '',
				code: '',
				countdown: 60,
				timer: null,
				isSendingCode: false,
				isBinding: false,
				query: {}
			}
		},
    computed: {
      canGetCode() {
        return this.phone && this.validatePhone(this.phone) && !this.isSendingCode && this.countdown === 60
      },
      canBind() {
        return this.phone && this.validatePhone(this.phone) && this.code && this.code.length === 6 && !this.isBinding
      }
    },
    onLoad(options) {
      if(options.type === 'webview'){
        this.isWechat = false;
      }else {
        this.isWechat = navigator.userAgent.toLowerCase().includes('micromessenger');
      }
	  if(options.shareType === 'COUPON' && options.shareContentId) {
		this.query = {
			shareType: options.shareType,
			shareContentId: options.shareContentId
		}
	  }
    },
		methods: {
			goPrivacy(){
				uni.navigateTo({
					url:'./privacy'
				})
			},
			goAgreement(){
				uni.navigateTo({
					url:'./agreement'
				})
			},
			isLook(){
				this.look = !this.look
			},
			login() {
				if (this.look) {
					let ruri = ''
					if(this.query.shareType && this.query.shareContentId) {
						_this.back();
					} else {
						ruri = encodeURIComponent('https://city.baoxianzhanggui.com/fragrance/');
					}
					let appid = 'wx9dc677bd41e82569'
				 	window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${ruri}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
				} else {
					uni.showToast({
						title: '请同意《用户协议》和《隐私政策》',
						icon: 'none'
					})
				}
			},
			back() {
				let pages = getCurrentPages();
				if (pages.length >= 2) {
					let prevPage = pages[pages.length - 2];
					let prevRoute = prevPage.route;
					if (prevRoute && prevRoute !== 'pages/index/index') {
						if (prevRoute.startsWith('pages/')) {
							uni.switchTab({
								url: '/' + prevRoute
							})
						} else {
							uni.navigateBack({
								delta: 1,
								fail: () => {
									uni.switchTab({
										url: '/pages/index/index'
									})
								}
							})
						}
					} else {
						uni.switchTab({
							url: '/pages/index/index'
						})
					}
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},
      // 手机号登录
      validatePhone(phone) {
        const reg = /^1[3-9]\d{9}$/
        return reg.test(phone)
      },
      getCode() {
        if (this.isSendingCode || this.countdown < 60) return

        if (!this.phone) {
          uni.showToast({
            title: '请输入手机号',
            icon: 'none'
          })
          return
        }

        if (!this.validatePhone(this.phone)) {
          uni.showToast({
            title: '请输入正确的手机号',
            icon: 'none'
          })
          return
        }

        this.isSendingCode = true

        uni.showToast({
          title: '验证码已发送',
          icon: 'success'
        })

        this.startCountdown()
        this.isSendingCode = false
      },
      startCountdown() {
        this.countdown = 60
        this.timer = setInterval(() => {
          this.countdown--
          if (this.countdown <= 0) {
            clearInterval(this.timer)
            this.countdown = 60
            this.timer = null
          }
        }, 1000)
      },
      loginPhone(){
        var _this = this;
        if (this.look) {
          if (this.isBinding) return
          if (!this.phone) {
            uni.showToast({
              title: '请输入手机号',
              icon: 'none'
            })
            return
          }

          if (!this.validatePhone(this.phone)) {
            uni.showToast({
              title: '请输入正确的手机号',
              icon: 'none'
            })
            return
          }

          if (!this.code || this.code.length !== 6) {
            uni.showToast({
              title: '请输入6位验证码',
              icon: 'none'
            })
            return
          }
          _this.isBinding = true
          phoneLogin({
            phone:_this.phone,
            code:_this.code
          }).then(res => {
            if (res.data.code == 200) {
              uni.setStorageSync('wx_copenid', res.data.data.copenid || '')
              uni.setStorageSync('access-token', res.data.data.token)
			  uni.setStorageSync('phone', res.data.data.cphone)
              uni.setStorageSync('wx_phone', res.data.data.cphone)
              uni.setStorageSync('userId', normalizeStorageValue(res.data.data.id))
              _this.isBinding = false;
              _this.back();
            }
          })
        } else {
            uni.showToast({
              title: '请同意《用户协议》和《隐私政策》',
              icon: 'none'
            })
          }
      }
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		width: 100vw;
		height: 100vh;
		// background-image: radial-gradient(circle, #b1fffc, #fcfdff);
		background: radial-gradient( 1000% 50% at 65% 50%, #C9FEF4 0%, #F6FFFF 100%);
		overflow: hidden;

		.title {
			margin: 38rpx 0px 0px 40rpx;
			font-size: 36rpx;
			letter-spacing: 1px;
		}

		// display: flex;
		// align-items: center;
		.logo {
			width: 240rpx;
			height: 240rpx;
			border-radius: 10%;
			overflow: hidden;
			margin: 80px auto 0px;

			image {
				width: 100%;
				height: 100%;
			}
		}
    .input-box {
      width: 678rpx;
      height: 92rpx;
      background: #FFFFFF;
      border-radius: 24rpx;
      margin: 46rpx auto;
      display: flex;
      align-items: center;
      padding: 0 30rpx;

      .input-item {
        flex: 1;
      }
    }

    .code-box {
      .code-input {
        flex: 1;
      }

      .code-btn {
        width: 200rpx;
        text-align: right;
        font-size: 28rpx;
        color: #2DB1A8;
        line-height: 88rpx;

        &.disabled {
          color: #2DB1A8;
        }
      }
    }
    .btnphone{
      width:670rpx;
      height: 84rpx;
      text-align: center;
      background: linear-gradient(to right, #35c99d, #27aea7);
      margin: 50rpx 0px 20px 40rpx;
      line-height: 84rpx;
      border-radius: 10px;
      color: #fcfdff;
      font-size: 28rpx;
    }
		.btn {
			width:670rpx;
			height: 84rpx;
			text-align: center;
			background: linear-gradient(to right, #35c99d, #27aea7);
			margin: 200rpx 0px 20px 40rpx;
			line-height: 84rpx;
			border-radius: 10px;
			color: #fcfdff;
			font-size: 28rpx;
		}
		.agree{
			width: 100%;
			height: 50rpx;
			margin-left: 40rpx;
			display: flex;
			// justify-content: center;
			align-items: center;
			.round{
				margin-right: 10rpx;
				image{
					width: 28rpx;
					height: 28rpx;
				}
			}
			.choice{
				font-size: 26rpx;
			}
			text{
				color: #27aea7;
				line-height: 50rpx;
			}
		}
	}
</style>
