<template>
  <view class="flex flex-col w-full min-h-full">
    <!-- <view class="pt-20rpx pb-95rpx text-center text-lg font-medium">请填写注册信息</view> -->
    <view  class="flex-1">
      <view class="flex items-center justify-center py-100rpx">
        <image class="borderTop w-164rpx h-164rpx m-auto " src="/static/images/logs/logs.png" mode="aspectFill"></image>
      </view>
      <view class="px-45rpx mt-60rpx">
        <cu-form :model="form" ref="uForm" :error-type="['toast']" :show-error="false">
          <u-form-item prop="phone">
            <view class="flex items-center">
              <view class="w-60rpx flex items-center">
                <image class="w-48rpx h-48rpx" src="/static/images/user/phone-icon.png" mode="scaleToFill" />
              </view>
              <u-input type="number" maxlength="11" :clearable="false" v-model="form.phone" class="w-full" placeholder="手机号" />
            </view>
          </u-form-item>
          <u-form-item prop="password" class="mt-20rpx">
            <view class="flex items-center w-full">
              <view class="w-60rpx flex items-center">
                <image class="w-48rpx h-48rpx" src="/static/images/user/pwd-icon.png" mode="scaleToFill" />
              </view>
              <u-input :clearable="false" type="password" v-model="form.password" class="flex-1" placeholder="密码" />
            </view>
          </u-form-item>
          <u-form-item prop="verify_code" class="mt-20rpx">
            <view class="flex items-center w-full">
              <image class="w-48rpx h-48rpx" src="/static/images/user/code-icon.png" />
              <sms-input class="w-full" ref="smsRef" v-model="form.verify_code" :maxLength="6" @run="getCode"></sms-input>
            </view>
            <!-- <view class="flex items-center w-full">
              <view class="w-60rpx flex items-center">
                <image class="w-48rpx h-48rpx" src="/static/images/user/code-icon.png" mode="scaleToFill" />
              </view>
              <view class="flex-1">
                <u-input :clearable="false" v-model="form.verify_code" class="w-full" placeholder="验证码" />
              </view>
              <view>
                <u-verification-code :seconds="seconds" ref="uCode" change-text="XS" @change="codeChange">
                </u-verification-code>
                <u-button size="mini" hover-class="none" @tap="getCode">{{ tips }}</u-button>
              </view>
            </view> -->
          </u-form-item>
          <u-form-item prop="code" class="mt-20rpx">
            <view class="flex items-center">
              <view class="w-60rpx flex items-center">
                <image class="w-48rpx h-48rpx" src="/static/images/user/sms-icon.png" mode="scaleToFill" />
              </view>
              <u-input :clearable="false" v-model="form.code" class="w-full" placeholder="邀请码" />
            </view>
          </u-form-item>
        </cu-form>
      
        <!-- 用户协议 -->
        <view class="mt-base">
          <u-checkbox-group label-disabled size="28" active-color="#2A82E4">
            <u-checkbox shape="circle" v-model="check">
              <view class="flex text-24rpx text-txGray">
                <view>已阅读同意并接受 </view>
                <view @tap="$u.route('/pages/web_view/index',{url:config.user_promotion_agreement})"
                  class="text-hex-2A82E4 ml-5rpx">《用户推广服务协议》</view>
                <view @tap="$u.route('/pages/web_view/index',{url:config.user_hide_agreement})"
                  class="text-hex-2A82E4 ml-5rpx">《隐私协议》</view>
              </view>
            </u-checkbox>
          </u-checkbox-group>
        </view>
        <view class="mt-100rpx">
          <view class="login-btn" @tap="onSubmit"> 注册 </view>
        </view>
      </view>
    </view>
    <!--  -->
    <view class="py-60rpx flex items-center flex-col justify-center text-txGray">
      <view>子春生电子商务有限公司版权所有</view>
      <view @tap="$u.route('/pages/web_view/index',{url:'https://beian.miit.gov.cn'})">渝ICP备2021010072号-2</view>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        check: false,
        PageStack: true, //获取页面栈,判断是否有多级路由
        form: {
          phone: '',
          password: '',
          code: '',
          verify_code: '',
        },
        rules: {
          phone: [{
              required: true,
              message: '请输入手机号',
              trigger: 'change',
            },
            {
              validator: (rule, value, callback) => {
                return this.$u.test.mobile(value);
              },
              message: '手机号码不正确',
              trigger: 'change',
            },
          ],
          password: [{
            required: true,
            message: '请输入密码',
            trigger: 'change',
          }, ],
          verify_code: [{
            required: true,
            message: '请输入验证码',
            trigger: 'change',
          }, ],
        },
      };
    },
    onReady() {
      this.$refs.uForm.setRules(this.rules);
    },
    async onLoad({
      code
    }) {
      this.form.code = code;
      let pages = getCurrentPages() // 获取栈实例
      if (pages.length > 2) {
        this.PageStack = false
      }
    },
    computed: {
      config() {
        return this.$store.getters.article ?? {}
      },
    },
    methods: {
      onSubmit() {
        this.$refs.uForm.validate(async (valid) => {
          if (valid) {
            if (!this.check) return this.$u.toast("请勾选协议")
            let obj = {
              phone: this.form.phone,
              password: this.form.password,
              verify_code: this.form.verify_code,
              code: this.form.code,
            };

            try {
              let res = await this.$api.post('/v1/register', obj, {
                custom: {
                  loading: true
                }
              });
              // this.$refs.uCode.start();
              uni.showToast({
                title: '注册成功',
                icon: 'none',
              });
              this.$store.commit('user/SET_TOKEN', res.token);
              this.$store.dispatch('user/getUserInfo');
              const delta = this.PageStack ? 1 : 2
              setTimeout(() => {
                uni.navigateBack({
                  delta: delta,
                });
              }, 1000);
              this.$refs.uForm.resetFields()
            } catch (error) {
              // console.log(error);
            } finally {}
          }
        });
      },
      //获取短信验证码
      async getCode() {
        this.$refs.uForm.validateField(['phone'], async (error) => {
          if (error.length == 0) {
            try {
             
                await this.$api.post('/v1/sms-codes', {
                  phone: this.form.phone,
                  type: '1'
                }, {
                  custom: {
                    loading: true
                  }
                });
                this.$refs.smsRef.start();
            } catch (error) {
            }
          }
        });
      },
    },
  };
</script>
<style>
  .borderTop {
    border-top-left-radius: 15rpx;
    border-top-right-radius: 15rpx;
  }
</style>
<style>
  page {
    background: #FFFFFF;
    height: 100%;
  }
</style>
