<template>
  <view style="height: 100%">
    <view class="container"
      style="background-image: url(https://jiexiu.xuqidata.com:8083/jiexiujumin/3ee992d1442bb8285c37f93a9ee1f93ed6e086131fc514d7b697b2cae00d753b.png)">
      <view class="title">介休网格通</view>
      <view class="reg-bg">
        <image
          src="https://jiexiu.xuqidata.com:8083/jiexiujumin/5064115c2e62589da9486151d5bced709ccef7a11063c0f17eddc9654a816d80.png" />
      </view>

      <view class="add-commutnity wx-authorize">
        
        <!-- <view class="add-commutnity-btn" bindtap="onAddCommunity" wx:if="{{!isAgreementChecked}}">加入社区</view>
    <block wx:else> -->
        <!-- <button class="add-commutnity-btn" @tap="getUserProfile">微信一键授权</button> -->
        <!-- </block> -->
      </view>
      <view class="user-agreement">
        <checkbox color="#F01B4E" :checked="isAgreementBox" @tap="onAgreementSelect" />
        <view class="checbox-text flex">
          <text>已阅读并同意《</text>
          <text @tap="onAgreement">用户服务协议</text>
          <text>》</text>
        </view>
      </view>
    </view>

    <van-popup :show="isNumAlert" :close-on-click-overlay="false" round position="bottom">
      <view class="phone-popup">
        <view class="number-alert-container">
          <image class="number-alert-icon"
            src="https://jiexiu.xuqidata.com:8083/jiexiujumin/d4736f8236279373fbda1fcbadf57f56e3b2a4a4c9fe811a044e3a7e5315ad23.jpg">
          </image>
          <text class="number-alert-title">介休网格通</text>
          <button class="wx-authorize-btn number-alert-btn" open-type="getPhoneNumber"
            @getphonenumber="getPhoneNumber">一键绑定手机号码</button>
        </view>
      </view>
    </van-popup>
  </view>
</template>

<script>
  //授权页
  // const { loginApi } = app.api;
  export default {
    components: {},
    data() {
      return {
        // env: app.globalData.env,
        isAgreement: false,
        isAgreementChecked: false,

        //是否勾选的了用户协议
        userInfo: null,

        //用户信息
        isNumAlert: false,

        //获取手机号弹窗
        numberChecked: false,

        code: '',
        isAgreementBox: false
      };
    },
    onLoad() {
      this.getCode();
    },
    methods: {
      async getCode() {
        const {
          code
        } = await uni.login();
        this.code = code
      },

      onAgreementSelect() {
        this.isAgreementChecked = !isAgreementChecked
        this.isAgreement = !isAgreement
      },

      onAgreement() {
        uni.navigateTo({
          url: '/pages/agreement/user-agreement'
        });
      },

      onAddCommunity() {
        const {
          isAgreement
        } = this;
        if (!isAgreement) {
          uni.showToast({
            title: '请勾选用户协议',
            icon: 'error',
            mask: true,
            duration: 1000
          });
        }
      },

      async getUserProfile() {
        // const { isAgreement } = this.data;
        // if (!isAgreement) {
        //   wx.showToast({
        //     title: '请勾选用户协议',
        //     icon: 'error',
        //     mask: true,
        //     duration: 1000,
        //   });
        //   return false;
        // }
        uni.showLoading({
          title: '正在授权',
          mask: true
        });
        uni.getUserProfile({
            desc: '用于完善用户资料'
          }).success((userProfile) => {
            console.log(userProfile)
            const {
              userInfo
            } = userProfile;
            this.setData({
              isNumAlert: true,
              userInfo
            });
            uni.hideLoading();
          })
          .fail(() => {
            uni.hideLoading();
            uni.showToast({
              title: '拒绝授权',
              mask: true
            });
          });
      },

      async getPhoneNumber(e) {
        const {
          errMsg,
          iv,
          encryptedData
        } = e.detail;
        if (errMsg.indexOf('ok') === -1) {
          return;
        }
        this.setData({
          numberChecked: true
        });
        const res = await app.globalData.register({
          avatar: this.userInfo.avatarUrl,
          nickName: this.userInfo.nickName,
          iv,
          encryptedData,
          code: this.code
        });
        // 判断注册成功后，返回到我的页面
        if (res) {
          uni.reLaunch({
            url: '/pages/people/people'
          });
        }
      }
    }
  };
</script>
<style lang="less">
  /* pages/authorize/index.wxss */
  .container {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: 100vh;
  }

  .title {
    font-size: 52rpx;
    font-weight: 400;
    color: #ffffff;
    line-height: 60rpx;
    letter-spacing: 1rpx;
    margin-bottom: 20rpx;
  }

  .reg-bg {
    width: 628rpx;
    height: 816rpx;
  }

  .reg-bg image {
    width: 100%;
    height: 100%;
  }

  .user-agreement {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 100rpx;

    .checbox-text {
      font-size: 28rpx;
      font-weight: 400;
      color: #ffffff;
      line-height: 28rpx;
    }
  }

  .user-agreement checkbox {
    transform: scale(0.6, 0.6);
  }

  .user-agreement view {
    font-size: 28rpx;

    font-weight: 400;
    color: #ffffff;
    line-height: 28rpx;
  }

  .wx-authorize {
    width: 100%;
    padding: 0 51rpx;
    margin-top: 40rpx;
    margin-bottom: 38rpx;
  }

  .add-commutnity-btn,
  .wx-authorize-btn {
    width: 648rpx;
    padding: 33rpx 0;
    background: linear-gradient(90deg, #fddf23 0%, #ffa2a2 100%);
    border-radius: 42rpx;
    color: #f01b4e;
    line-height: 32rpx;
    text-align: center;
    font-size: 32rpx;
    font-weight: 500;
  }

  .wx-authorize-btn {
    background: linear-gradient(180deg, #029b4d 0%, #108644 100%);
  }

  .number-alert-container {
    margin-top: 108rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .number-alert-icon {
    width: 144rpx;
    height: 144rpx;
    display: inline-block;
    border: none;
    border-radius: 50%;
  }

  .number-alert-title {
    font-size: 32rpx;
    font-weight: 500;
    color: #293341;
    line-height: 32rpx;
    margin-top: 38rpx;
    margin-bottom: 92rpx;
  }

  .number-alert-btn {
    background: #19ba50;
    border-radius: 42px;
    color: #fff;
  }

  .phone-popup {
    padding-bottom: 108rpx;
  }
</style>