<template>
  <view class="content">
    <view class="login">
      <view class="login-logo"><image class="logo" :src="iconlogo"></image></view>
      <view class="login-title">
        <view class="login-input"><input class="input" type="text" v-model="name" :placeholder="$t('手机号')" placeholder-style="color:#666666; text-align: center;" /></view>
        <view class="login-input" style="position: relative">
          <input class="input" type="text" password="true" v-model="code" :placeholder="$t('短信验证码')" placeholder-style="color:#666666;" />
          <button :disabled="timeout !== 0" @click="send" class="cu-btn block bg-blue margin-tb-sm" style="position: absolute;right: 20px">{{ timeout === 0 ? $t('发送验证码') : timeout + $t('秒后重试') }}</button>
        </view>
        <view class="login-input">
          <input class="input" type="text" password="true" v-model="pass" :placeholder="$t('密码')" placeholder-style="color:#666666; text-align: center;" />
        </view>
      </view>
    </view>
    <view class="padding-xl"><button class="cu-btn block bg-blue margin-tb-sm lg" @click="login">{{$t('注册')}}</button></view>
    <view @click="toLogin" style="text-align: center">{{$t('登录')}}</view>
  </view>
</template>

<script>
import {sendSmsCode, signUp} from '@/api/api';
import iconlogo from '../../static/images/logo.png'

export default {
  name: 'reg',
  data() {
    return {
      code: '',
      name: '',
      pass: '',
      timeout: 0,
	  iconlogo:iconlogo,
      interval: null
    };
  },
  methods: {
    login() {
      signUp( this.code, this.name, this.pass).then(res => {
        uni.redirectTo({
          url: '/pages/index/index'
        });
      });
    },
    send(){
      if(this.name.length !== 11){
        alert(this.$t('手机号不正确'))
        return
      }
      sendSmsCode(this.name, 0).then(() => {
        alert(this.$t('短信发送成功'))
        this.timeout = 120
        this.interval = setInterval(() => {
          this.timeout--
          if(this.timeout <= 0){
            clearInterval(this.interval)
          }
        }, 1000)
      })
    },
    toLogin(){
      uni.redirectTo({
        url: '/pages/login/login'
      });
    }
  }
};
</script>

<style>
@import './login.css';
</style>
