<template>
  <view class="normal-login-container">
    <view class="logo-content align-center justify-center flex">
      <image style="width: 400rpx;height: 200rpx;"
        :src="globalConfig.appInfo.logo"
        mode="widthFix">
      </image>
    </view>
    <view class="login-form-content">
      <!-- 登录按钮 -->
      <view class="action-btn">
        <button open-type="getPhoneNumber"
          @getphonenumber="getPhoneNumber"
          class="login-btn cu-btn block bg-blue lg round">手机号登录</button>
      </view>
      <view class="xieyi text-center">
        <text class="text-grey1">登录即代表同意</text>
        <text @click="$refs.agreementDialog.open()"
          class="text-blue">《用户协议》</text>
      </view>
    </view>
    <uni-popup ref="agreementDialog"
      type="dialog">
      <uni-popup-dialog type="info"
        confirmText="同意"
        :showClose="false"
        title="用户协议">
        <ul class="agreement_ul">
          <li>1.当前小程序仅限王小卤-促销员活动上报使用</li>
          <li>2.小程序需经您同意，获取您的手机号登录当前系统</li>
          <li>3.您的手机号仅用于系统登录，领导联系"</li>
        </ul>
      </uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
import { getWxAccessToken } from '@/utils/auth';
import storage from '../utils/storage'
import constant from '../utils/constant';

export default {
  data() {
    return {
      globalConfig: getApp().globalData.config
    }
  },
  methods: {
    // 手机号登录
    async getPhoneNumber(e) {
      this.$modal.loading("登录中，请耐心等待...")
      // 通过微信小程序 API 获取手机号
      const [, phoneRes] = await uni.request({
        url: `https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=${getWxAccessToken()}`,
        method: 'POST',
        data: {
          code: e.detail.code
        }
      })

      // 调用微信登录接口，获取 openID
      const openId = await this.$store.dispatch('WxLogin')

      // 调用后台接口，判断手机号是否注册过
      // 注册过跳转到首页打卡，否则去注册页面
      const res = await this.$store.dispatch('Login', { phoneNumber: phoneRes.data.phone_info.phoneNumber, openId: openId })
      
      // 未注册过跳转到注册信息页面
      if (res.code === 3004) {
        setTimeout(() => {
          this.$tab.reLaunch('/pages/register')
        }, 1500)
      } else {
        this.$tab.reLaunch('/pages/home/index')
      }

      storage.set(constant.loginPhone, phoneRes.data.phone_info.phoneNumber)
      this.$modal.closeLoading()
    },
    fail: function () {
      console.log('后端解密手机号失败');
    }
  },
  // // 登录成功后，处理函数
  // async loginSuccess(result) {
  //   // 设置用户信息
  //   await this.$store.dispatch('GetInfo')
  //   await this.getAuth()
  //   this.$tab.reLaunch('/pages/home/index')
  // },
  // 登录成功后，开始获取各种权限
  // async getAuth() {
  //   // 获取地址位置
  //   return this.$store.dispatch('GetLocation')
  // }
}
</script>

<style lang="scss">
page {
  background-color: #ffffff;
}

// 用户协议弹窗
.agreement_ul {
  li {
    margin-top: 20rpx;
  }
}

.normal-login-container {
  width: 100%;

  .logo-content {
    width: 100%;
    font-size: 21px;
    text-align: center;
    padding-top: 15%;

    image {
      border-radius: 4px;
    }

  }

  .login-form-content {
    text-align: center;
    margin: 20px auto;
    margin-top: 15%;
    width: 80%;

    .input-item {
      margin: 20px auto;
      background-color: #f5f6f7;
      height: 45px;
      border-radius: 20px;

      .icon {
        font-size: 38rpx;
        margin-left: 10px;
        color: #999;
      }

      .input {
        width: 100%;
        font-size: 14px;
        line-height: 20px;
        text-align: left;
        padding-left: 15px;
      }

    }

    .login-btn {
      margin-top: 40px;
      height: 45px;
    }

    .reg {
      margin-top: 15px;
    }

    .xieyi {
      color: #333;
      margin-top: 20px;
    }

    .login-code {
      height: 38px;
      float: right;

      .login-code-img {
        height: 38px;
        position: absolute;
        margin-left: 10px;
        width: 200rpx;
      }
    }
  }
}
</style>
