<template>
  <!-- 注册 -->
  <div class="page flex-col registerPage">
    <s-header :name="$t('register.header')" :noback="false" ></s-header>
    <div class="registerFormBox">
      <van-form @submit="registerSubmit">
        <van-field
          v-model="username"
          name="username"
          :label="$t('register.usernameLabel')"
          :placeholder="$t('register.usernamePlaceholder')"
          :rules="[{ required: true, message: $t('register.usernameRequired') }]"
        />
        <van-field
          v-model="name"
          name="name"
          :label="$t('register.nameLabel')"
          :placeholder="$t('register.namePlaceholder')"
          :rules="[{ required: true, message: $t('register.nameRequired') }]"
        />
        <van-field
          v-model="password"
          name="password"
          type="password"
          :label="$t('register.passwordLabel')"
          :placeholder="$t('register.passwordPlaceholder')"
          :rules="[{ required: true, message: $t('register.passwordRequired') }]"
        />
        <van-field
          v-model="passwordCheck"
          name="passwordCheck"
          type="password"
          :label="$t('register.passwordCheckLabel')"
          :placeholder="$t('register.passwordCheckPlaceholder')"
          :rules="[{ required: true, message: $t('register.passwordCheckRequired') }]"
        />
        <div class="van-cell van-field">
          <div class="van-cell__title van-field__label"><span>{{$t('register.country')}}</span></div>
          <div class="van-cell__value van-field__value radioBox">
            <van-radio-group v-model="ifForeign" direction="horizontal">
              <van-radio name="0" icon-size="18px">{{$t('register.chinese')}}</van-radio>
              <van-radio name="1" icon-size="18px">{{$t('register.other')}}</van-radio>
            </van-radio-group>
          </div>
        </div>
        <van-field
          v-model="phone"
          name="phone"
          type="tel"
          :label="$t('register.phoneLabel')"
          :placeholder="$t('register.phonePlaceholder')"
          :rules="[{ required: ifForeign === '0', message: $t('register.phoneRequired') }]"
        >
          <template #button v-if="ifForeign === '0'" >
            <van-button size="small" type="primary" @click="seedVerCode()" :disabled="time !== 0">{{time === 0 ? $t('register.seedVerCode') : time + $t('register.replaysInSeconds')}}</van-button>
          </template>
        </van-field>
        <van-field
          v-if="ifForeign === '0'"
          v-model="code"
          name="code"
          :label="$t('register.codeLabel')"
          :placeholder="$t('register.codePlaceholder')"
          :rules="[{ required: true, message: $t('register.codeRequired') }]"
        />
        <van-field
          v-model="email"
          name="email"
          :label="$t('register.emailLabel')"
          :placeholder="$t('register.emailPlaceholder')"
          :rules="[{ required: ifForeign === '1', message: $t('register.emailRequired') }]"
        >
          <template #button v-if="ifForeign === '1'">
            <van-button size="small" type="primary" @click="seedVerCode()" :disabled="time !== 0">{{time === 0 ? $t('register.seedVerCode') : time + $t('register.replaysInSeconds')}}</van-button>
          </template>
        </van-field>
        <van-field
          v-if="ifForeign === '1'"
          v-model="code"
          name="code"
          :label="$t('register.emailCodeLabel')"
          :placeholder="$t('register.emailCodePlaceholder')"
          :rules="[{ required: true, message: $t('register.emailCodeRequired') }]"
        />
        <van-button round type="primary" class="register" native-type="submit">{{$t('register.registerButton')}}</van-button>
      </van-form>
    </div>
  </div>
</template>
<script>
import md5 from 'js-md5';
import { ref, onMounted, reactive, toRefs } from 'vue';
import { Toast } from 'vant';
import { sentRegisterCode, tAdminSave } from '@/service/register';
import sHeader from '@/components/SimpleHeader';
import logiLogoImgUrl from "@/assets/login/logo.png";
import { useRouter } from 'vue-router'
import { getLocal, setLocal } from '@/common/js/utils'

export default {
  setup() {
    const username = ref('');
    const name = ref('');
    const password = ref('');
    const passwordCheck = ref('');
    const ifForeign = ref('0');
    const phone = ref('');
    const email = ref('');
    const code = ref('');
    const verifyRef = ref(null);
    const verCodeTime = reactive({
      time: 0
    });
    const router = useRouter();
    // 注册点击
    const registerSubmit = async () => {
      if (password.value !== passwordCheck.value) {
        Toast.fail('两次密码不一致,请确认密码');
        return false;
      }
      const { data } = await tAdminSave({
        username: username.value,
        name: name.value,
        password: md5(password.value),
        ifForeign: ifForeign.value,
        phone: phone.value,
        email: email.value,
        code: code.value
      });
      if (data.code === '00000') {
        Toast('注册成功');
        router.push({ path: '/login' });
      } else {
        Toast.fail(data.message);
      }
    };
    // 发送验证码
    const seedVerCode = async () => {
      const { data } = await sentRegisterCode({
        ifForeign: ifForeign.value,
        phoneOrEmail: ifForeign.value === '0' ? phone.value : email.value
      });
      console.log('seedVerCodeSuccess', data);
      if (data.code === '00000') {
        Toast(data.data);
        console.log('seedVerCodeSuccess');
        verCodeTime.time = 3 * 60;
        verCodeTimeInterval();
      } else { Toast.fail(data.message); }
    }
    // 验证码发送成功开始3分钟倒计时
    const verCodeTimeInterval = () => {
      verCodeTime.time--;
      setLocal('registerVerCodeTime', verCodeTime.time)
      if (verCodeTime.time !== 0) { setTimeout(() => { verCodeTimeInterval(); }, 1000); }
    }
    // 初始化页面获取验证码倒计时
    onMounted(async () => {
      verCodeTime.time = getLocal('registerVerCodeTime');
      if (verCodeTime.time && verCodeTime.time !== '') {
        verCodeTime.time = parseInt(verCodeTime.time);
        if (verCodeTime.time > 0) { verCodeTimeInterval(); }
      } else { verCodeTime.time = 0; }
    });

    return {
      ...toRefs(verCodeTime),
      logiLogoImgUrl,
      username,
      name,
      password,
      passwordCheck,
      ifForeign,
      phone,
      email,
      code,
      verifyRef,
      verCodeTime,
      verCodeTimeInterval,
      seedVerCode,
      registerSubmit,
    }
  },
  components: { sHeader }
}
</script>
<style lang="less" scoped>
@import '../common/style/mixin';
.registerPage {
  .registerFormBox {
    width: 100%;
    margin-top: 38px;
    text-align: center;
    /deep/ .van-form {
      .van-cell {
        width: 313px;
        height: 38px;
        background-color: rgba(255, 255, 255, 1);
        padding: 0;
        color: rgba(168, 168, 197, 1);
        font-size: 13px;
        margin: 0 auto;
        margin-top: 20px;
        overflow: visible;
        &::after { display: none;}
        .van-field__button button { background-color: #4d6add; color: #fff; }
        .van-field__control {
          height: 38px;
          line-height: 38px;
          padding: 6px;
          border-radius: 2px;
          border: 0.5px solid rgba(185, 186, 208, 1);
          &:-internal-autofill-previewed,
          &:-internal-autofill-selected {
            -webkit-text-fill-color: #323233 !important;
            transition: background-color 5000s ease-in-out 0s !important;
          }
        }
        .van-field__control::-webkit-input-placeholder {
          color: rgba(168, 168, 197, 1);
        }
        .van-cell__value { width: 100%; flex: 0 auto; }
        .van-field__label {
          height: 38px;
          line-height: 38px;
          width: 6em;
        }
        .radioBox {
          display: flex;
          .van-radio-group--horizontal {
            width: 100%;
            justify-content: space-around;
          }
          .van-radio { overflow: visible; }
          .van-radio__icon {
            font-size: 13px;
            .van-icon {
              width: 12px;
              height: 12px;
              border-color: #4d6add;
            }
          }
          .van-radio__label { line-height: 13px; }
          .van-radio__icon--checked .van-icon-success{
            border-color: #4d6add;
            background: #4d6add;
          }
          .van-radio__icon--checked .van-icon-success::before {
            content: '';
            background: #fff;
            width: 40%;
            height: 40%;
            position: absolute;
            top: 30%;
            left: 30%;
            border-radius: 100%;
          }
          .van-radio__icon--checked + .van-radio__label { color: #4d6add; }
        }
      }
    }
  }
  .register {
    background-color: rgba(77, 106, 221, 1);
    border-radius: 17px;
    height: 34px;
    width: 220px;
    margin-top: 60px;
    font-size: 15px;
    font-family: PingFangSC-Medium;
  }
}

</style>