<template>
  <j-nav-bar :placeholder="false" color="#FFF" nav-bar-background="#ffffff00"/>

  <div class="content">
    <j-gap height="50" background="#F9BF3A" opacity="0"/>
    <div class="slogan">
      <div class="slogan-1">{{ $t('app.register') }}</div>
    </div>


    <div class="input-box">
      <!-- 允许输入数字，调起带符号的纯数字键盘 -->
      <van-field
        v-model="loginData.phoneNumber"
        class="login-btn"
        :label="$t('app.phoneNumber')"
        :placeholder="$t('app.enter') + $t('app.phoneNumber')"
        type="tel"
      />

      <van-field
        v-model="loginData.code"
        class="login-btn"
        :label="$t('app.verificationCode')"
        :placeholder="$t('app.enter') + $t('app.verificationCode')"
        type="number"
      >
        <template #button>
          <div class="password-btn">
            <van-count-down v-show="countDownFlag" ref="countDown" :auto-start="false" :time="time" @finish="onFinish">
              <template #default="timeData">
                <span class="block">{{ timeData.seconds }}秒</span>
              </template>
            </van-count-down>
            <div v-show="!countDownFlag" style="color: #bc7c1c" @click="start">{{ $t('app.send') + $t('app.verificationCode') }}</div>
          </div>
        </template>
      </van-field>

      <!-- 允许输入数字，调起带符号的纯数字键盘 -->
      <van-field
        v-model="loginData.password"
        class="login-btn"
        :label="$t('app.login') + $t('app.password')"
        :placeholder="$t('app.passwordPlaceholder')"
        type="text"
      />

    </div>

    <van-button
      :disabled="!loginData.password || !loginData.phoneNumber"
      color="linear-gradient(to right, #D2A64C, #F9D88D)"
      round
      style="width: 100%; margin: 20px 0"
      @click.stop="registerBtn"
    >
      {{ $t('app.register') }}
    </van-button>

    <view class="op">
      <view class="register" @click="goLogin">{{ $t('app.login') }}</view>
    </view>

  </div>
</template>

<script lang="ts" setup>
import {reactive, ref} from "vue";
import {showToast} from "vant";
import {useRouter} from "vue-router";
import {register, sendSmsRegister} from "@/api/login";
import {useUserStore} from "@/store/modules/user";
import { useI18n } from 'vue-i18n';

const router = useRouter()
const userStore = useUserStore()
const { t } = useI18n()


const loginData = reactive({
  phone: null,
  phoneNumber: '',
  code: null,
  password: '',
  loginRole: 5,
  openId: '',
  ticket: null,
  randStr: null
})
const time = ref(60 * 1000);
const countDown = ref();
const countDownFlag = ref(false);
const start = () => {
  if (loginData.phoneNumber) {
    countDown.value.start();
    countDownFlag.value = true
    sendSmsRegister({
      phoneNumber: loginData.phoneNumber
    }).then(res => {
      console.log(res)
      loginData.code = res
      onFinish()
    })
  } else {
    showToast(t('app.enter') + t('app.phoneNumber'))
  }
};


const registerBtn = () => {
  register(loginData).then(res => {
    // goLogin()
    userStore.login({
      mobile: loginData.phoneNumber,
      password: loginData.password
    }).then(res => {
      router.replace('/home')
    }, err => {
      router.replace('/home')
    })
  })
}

const goLogin = () => {
  router.back()
}



const onFinish = () => {
  countDownFlag.value = false
  countDown.value.reset();
}
</script>

<style lang="scss" scoped>
.content {
  padding: 0 20px;
  background-image: linear-gradient(to bottom, #F9BF3A, #ffffff, #ffffff, #ffffff, #ffffff);
  height: 100vh;

  .slogan {
    padding-top: 168px;

    .slogan-1 {
      font-size: 70px;
      color: #3f3f3f;
    }

    .slogan-2 {
      font-weight: 400;
      font-size: 32px;
      color: #333333;
    }
  }

  .input-box {
    margin-top: 40px;
    padding: 20px 0 10px 0;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0px 0px 7px -3px #b4b3b3;

    .login-btn {
      margin-bottom: 40px;
      background: #12332100;
    }

    .password-btn {
      border-left: 1px solid #CCCCCC;
      padding-left: 20px;
    }
  }

  .op {
    display: flex;
    justify-content: space-between;
    color: #666;
  }
}

</style>
