<template>
  <view class="nav">
    {{ t('register.button_text') }}
    <view class="nav-right" @click="reLaunch('/subPackages/login/login')">{{ t('register.tip3') }}</view>
  </view>
  <view class="container">
    <view class="wrap mx-[1.88rem]">
      <img class="bg" :src="bg" />
      <view class="title">{{ t('register.tip4') }}</view>
      <view class="mas">
        <view class="input_wrap">
          <view class="icon">
            <image src="/src/static/image/login/1.png" mode="widthFix"></image>
          </view>
          <input v-model="registerParams.account" :placeholder="t('register.account_placeholder')" />
        </view>
        <view class="input_wrap">
          <view class="icon">
            <image src="/src/static/image/login/2.png" mode="widthFix"></image>
          </view>
          <input v-model="registerParams.password" :placeholder="t('register.password_placeholder')" type="password" />
        </view>
        <view class="input_wrap">
          <view class="icon">
            <image src="/src/static/image/login/2.png" mode="widthFix"></image>
          </view>
          <input v-model="registerParams.again_password" :placeholder="t('register.password_again_placeholder')" type="password" />
        </view>
        <view class="input_wrap">
          <view class="icon">
            <image src="/src/static/image/login/3.png" mode="widthFix"></image>
          </view>
          <input v-model="registerParams.yaoqingma" :placeholder="t('register.code_placeholder')" />
          <!-- <view class="text_button" @click="sendSms">{{ t('register.code_text') }}</view> -->
        </view>
      </view>
      <view class="button-wrap">
        <view class="button" @click="register">{{ t('register.tip4') }}</view>
        <view class="text" @click="reLaunch('/subPackages/login/login')">{{ t('register.tip3') }}</view>
      </view>
      <!-- <view class="button" @click="reLaunch('/subPackages/login/login')">{{ t('register.button2_text') }}</view>
      <view class="button" @click="register">{{ t('register.button_text') }}</view> -->
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { registerApi } from '@/api/login/login'
import { reLaunch, checkInput, switchTab } from '@/common/common'
import { showFailToast, showLoadingToast, showSuccessToast, showToast } from 'vant'
import { useCounterStore } from '@/store/store'
import bg from '@/static/logo.png'
// import { AxiosResponse } from 'axios'
const { t } = useI18n()
// console.log(AxiosResponse)
const store = useCounterStore()

const registerParams = ref({
  account: '',
  password: '',
  again_password: '',
  yaoqingma: ''
})

const checkArr = [
  { key: 'account', message: t('register.account_error') },
  { key: 'password', message: t('register.password_error') },
  { key: 'again_password', message: t('register.password_again_error') },
  { key: 'yaoqingma', message: t('register.code_error') }
]

const register = async () => {
  const reg = /^(070|080|090)\d{8}$/
  if (!checkInput(checkArr, registerParams.value)) {
    return
  }
  if (!reg.test(registerParams.value.account)) {
    return showToast(t('register.tip1'))
  }

  if (registerParams.value.password.length < 6 || registerParams.value.password.length > 10) {
    return showToast(t('register.tip2'))
  }

  if (registerParams.value.password !== registerParams.value.again_password) {
    showFailToast(t('register.password_repeat_error'))
    return
  }
  showLoadingToast({ mask: true })
  const res = await registerApi(registerParams.value)
  // closeToast()
  if (res.code === 1) {
    uni.setStorageSync('token', res.data.userinfo.token)
    uni.setStorageSync('userId', res.data.userinfo.id)
    uni.setStorageSync('userInfo', res.data.userinfo)
    store.token = res.data.userinfo.token
    store.userId = res.data.userinfo.userId
    store.getUserInfo()
    showSuccessToast(res.msg)
    setTimeout(() => {
      switchTab('/pages/index/index')
    }, 1000)
  } else {
    showFailToast(res.msg)
  }
}

// const sendSms = async () => {
//   if (!registerParams.value.account) {
//     showFailToast(t('register.account_error'))
//     return
//   }
//   const params = {
//     mobile: registerParams.value.account,
//     event: 'register'
//   }
//   uni.showLoading({ mask: true })
//   await sendSmsApi(params)
//   uni.hideLoading()
// }
</script>

<style lang="scss" scoped>
.button-wrap {
  width: 20rem;
  // display: flex;
  justify-content: space-between;
  align-content: center;
  margin-top: 1.875rem;
  .text {
    color: #fff;
    font-size: 0.9375rem;
    line-height: 3.125rem;
  }
  .button {
    width: 11.25rem;
    height: 3.125rem;
    background-color: #6a69e9;
    border-radius: 1.34rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    width: 100%;
  }
}
.mas {
  width: 20rem;
  height: 14.75rem;
  background: #00316b;
  border-radius: 1.25rem;
  margin-top: 1.8125rem;
}
.nav {
  width: 100%;
  height: 3.125rem;
  color: #fff;
  // background: #fff;
  font-size: 1.0625rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: sticky;
  top: 0;
  left: 0;
  .nav-right {
    position: absolute;
    top: 0.8438rem;
    right: 1.7813rem;
    font-size: 1.0625rem;
    color: #fff;
  }
}
body {
  background-image: url('/src/static/image/login/bg1.png');
}
.container {
  text-align: center;
  overflow-x: hidden;
  margin: 0 auto;
  // background-color: #fff;
  // height: 100vh;
  .bg {
    width: 13.69rem;
    margin: 3rem auto;
  }
  .title {
    color: #45d9fd;
    font-size: 1.125rem;
    font-weight: 600;
    margin-top: 0.6875rem;
  }
}
.logo {
  width: 7.5rem;
  height: 7.5rem;
  // border-radius: 50%;
  // background-color: $uni-color-primary;
  margin: 14vh auto 0vh;
}
.name {
  margin: 0vh auto 9.54vh;
  font-size: 1.5rem;
  color: $uni-color-primary;
}
.input_wrap {
  display: flex;
  align-items: center;
  height: 3.6875rem;
  border-radius: 1.25rem;
  // border: 0.03rem solid $uni-color-primary;
  padding: 0 0.88rem;
  max-width: 20rem;
  margin-left: auto;
  margin-right: auto;
  font-size: 1rem;
  .icon {
    width: 1.1875rem;
    height: 1.1875rem;
    margin-right: 0.94rem;
    image {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
  input {
    flex: 1;
    text-align: left;
    color: $uni-color-primary;
    .uni-input-placeholder {
      color: #b3b6c1;
    }
  }
}
</style>
