<template>
  <view class="page-content register">
    <view class="header">
      <image class="logo" src="../../static/logo.png" />
    </view>

    <view class="form-item">
      <u-button
        :disabled="!checkedAgreement"
        type="primary"
        ripple
        open-type="getPhoneNumber"
        lang="zh_CN"
        @getphonenumber="getUserPhone"
      >
        使用手机号注册
      </u-button>
    </view>
    <view class="form-item checkbox-item">
      <view class="checkbox-wrap">
        <u-checkbox-group>
          <u-checkbox v-model="checkedAgreement" active-color="#fa5610"></u-checkbox>
        </u-checkbox-group>
      </view>
      <view class="text-wrap">
        <text class="agreement-note">我已阅读并同意</text>
        <text class="agreement">《用户协议》</text>
        <text>与</text>
        <text class="agreement">《隐私政策》</text>
      </view>
    </view>
    <!-- 授权 -->
    <u-popup v-model="showAuthorize" mode="top">
      <yi-authorize @getUserData="handleAuthorizeIconInfo" @onHideAuthorize="hideAuthorize"></yi-authorize>
    </u-popup>
  </view>
</template>
<script>
import authorize from '../../../mixins/authorize';
import bindPhone from '../../../mixins/bindPhone';

export default {
  name: 'register',
  mixins: [bindPhone, authorize],
  data() {
    return {
      checkedAgreement: false,
    };
  },
  async onLoad(options) {
    console.log('%c [ register options ]: ', 'color:#1989fa;', options);
  },
  async mounted() {
    this.showAuthorize = true;
  },
  methods: {
    handleAuthorizeIconInfo() {
      this.getUserData(this.todoSth);
    },
    todoSth() {
      uni.showModal({
        title: '提示',
        content: '已授权头像昵称, 现在可以使用手机号注册了',
        showCancel: false,
        confirmText: '知道了',
      });
    },
  },
};
</script>

<style scoped lang="scss">
.register {
  height: 100%;
  padding: 40rpx;
  background-color: #fff;
  .header {
    font-size: 40rpx;
    font-weight: bold;
    text-align: center;
  }
  .logo {
    width: 200rpx;
    height: 200rpx;
  }
  .form-item {
    margin-top: 20px;
  }
  .input-item {
    background-color: #fff;
  }
  .invite-msg {
    display: flex;
    justify-content: center;
    font-size: 30rpx;
  }
  .checkbox-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    .checkbox-wrap {
      flex: 1;
    }
    .text-wrap {
      flex: 9;
    }
    .agreement-note {
      margin-left: -20rpx;
    }
    .agreement {
      //background-color: #48b5ff;
      color: #48b5ff;
    }
  }
  .btn-row {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .value {
      color: $uni-text-color-grey;
    }
  }
}
</style>
