<template>
  <view class="container">
    <u-image src="@/static/logo.png"></u-image>
    <view class="login-form-wrap">
      <u--form labelPosition="left" :model="loginForm" :rules="rules" ref="loginForm">
        <u-form-item prop="mobile" borderBottom>
          <u-input v-model="loginForm.mobile" maxlength="11" border="none" placeholder="请输入手机号">
            <template slot="prefix">
              <view class="phone-prefix">
                <text>+86</text>
                <u-icon name="arrow-down-fill"></u-icon>
              </view>
            </template>
          </u-input>
        </u-form-item>
        <u-form-item prop="captcha" borderBottom>
          <u-input v-model="loginForm.captcha" maxlength="6" border="none" placeholder="请输入短信验证码">
            <template slot="suffix">
              <u-code
                ref="uCode"
                :seconds="seconds"
                changeText="X秒后重新获取"
                end-text="重新获取"
                start-text="获取验证码"
                @change="codeChange"
                :keep-running="true"
              ></u-code>
              <u--text :text="tips" @tap="getCode" type="primary"></u--text>
            </template>
          </u-input>
        </u-form-item>
        <view class="phone-question">手机号无法使用</view>
        <u-form-item>
          <u-button type="primary" :disabled="isDisabled" :loading="loading" shape="circle" @click="login">登录</u-button>
        </u-form-item>
      </u--form>
      <view class="user-agreement">
        <u-checkbox-group>
          <u-checkbox shape="circle" @change="checkboxChange" :checked="isChecked"></u-checkbox>
        </u-checkbox-group>
        <text class="user-agreement-text">
          我已阅读并同意
          <text class="terms">《用户协议》</text>
          <text class="terms">《隐私政策》</text>
          <text class="terms">《儿童/青少年个人信息保护规则》</text>
        </text>
      </view>
    </view>
  </view>
</template>

<script>
import { getSmsCodeByPhone, loginByPhoneAndSmsCode } from '@/api/login';

export default {
  data() {
    return {
      loginForm: {
        client_id: 'chelvc_client',
        client_secret: 'qWBe6jD%GCuPPTkP',
        grant_type: 'sms',
        token: '',
        mobile: '',
        captcha: '',
      },
      rules: {
        mobile: [
          {
            required: true,
            trigger: ['change', 'blur'],
            message: '请输入您的手机号',
          },
          {
            validator: (rule, value, cb) => {
              return uni.$u.test.mobile(value);
            },
            message: '手机号码格式不正确',
            trigger: ['change', 'blur'],
          },
        ],
        captcha: [
          {
            required: true,
            trigger: ['change', 'blur'],
            message: '请输入六位数验证码',
          },
        ],
      },
      seconds: 120,
      tips: '',
      isChecked: false,
      loading: false,
    };
  },
  onReady() {
    this.$refs.loginForm.setRules(this.rules);
  },
  computed: {
    isDisabled() {
      return !(this.loginForm.mobile && this.loginForm.captcha.length === 6);
    },
  },
  methods: {
    getCode() {
      if (!this.loginForm.mobile) return uni.$u.toast('请输入您的手机号!');
      if (!uni.$u.test.mobile(this.loginForm.mobile)) return uni.$u.toast('手机号码格式不正确!');
      // TODO： 处理验证码倒计时
      if (this.$refs.uCode.canGetCode) {
        getSmsCodeByPhone(this.loginForm.mobile)
          .then(res => {
            if (res.code === 200) {
              uni.$u.toast('验证码已发送');
              this.loginForm.token = res.data.token;
              this.$refs.uCode.start();
            }
          })
          .catch(err => {
            uni.$u.toast('无法发送验证码');
            this.$refs.uCode.start();
          });
      }
    },
    async login() {
      if (!this.isChecked) return uni.$u.toast('请同意并勾选协议');
      this.loading = true;
      loginByPhoneAndSmsCode(this.loginForm)
        .then(res => {
          this.loading = false;
          if (res.access_token) {
            uni.$u.toast('登录成功');
            this.$store.commit('SET_ACCESS_TOKEN', res.access_token);
            this.$store.commit('SET_REFRESH_TOKEN', res.refresh_token);
            setTimeout(() => {
              this.$Router.pushTab('/pages/tabbar/home/index');
            }, 1500);
          }
        })
        .catch(err => {
          this.loading = false;
          uni.$u.toast('登录失败-' + err.data.error_description);
        });
    },
    codeChange(text) {
      this.tips = text;
    },
    checkboxChange(v) {
      this.isChecked = v;
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  padding: 0 40rpx;
  margin: 0 auto;
}
.login-form-wrap {
  margin-top: 200rpx;
  .phone-prefix {
    display: flex;
    align-items: center;
    padding-right: 20rpx;
    border-right: 2rpx solid $uni-text-color-grey;
    margin-right: 20rpx;
  }
  .phone-question {
    text-align: right;
    font-size: 24rpx;
    padding: 20rpx 0 20rpx 0;
  }
  .user-agreement {
    display: flex;
    padding: 0 10rpx;
    .user-agreement-text {
      font-size: 24rpx;
      color: $uni-text-color-grey;
      margin-top: 20rpx;
      margin-left: 20rpx;
      .terms {
        color: $uni-text-color;
        font-weight: 400;
      }
    }
  }
}
</style>
