<template>
  <j-nav-bar :placeholder="false" color="#FFF" nav-bar-background="#F9BF3A00"/>
  <div class="content">

    <j-gap height="50" background="#F9BF3A" opacity="0"/>
    <j-gap height="120" opacity="1"/>
    <van-field
      v-model="loginData.phoneNumber"
      v-if="flag === '1'"
      class="login-btn"
      :label="$t('app.phoneNumber')"
      :placeholder="$t('app.enter') + $t('app.phoneNumber')"
      label-align="top"
      style="background: #12332100"
      type="tel"
    />

    <van-field
      v-model="loginData.code"
      class="login-btn"
      v-if="flag === '1'"
      :label="$t('app.verificationCode')"
      :placeholder="$t('app.enter') + $t('app.verificationCode')"
      label-align="top"
      style="background: #12332100"
      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 }}{{ $t('app.second') }}</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"
      v-if="flag === '2'"
      :label="$t('app.login') + $t('app.password')"
      label-align="top"
      :placeholder="$t('app.passwordPlaceholder')"
      style="background: #12332100"
      type="password"
    />

    <van-field
      v-model="loginData.confirmPassword"
      class="login-btn"
      v-if="flag === '2'"
      :label="$t('app.confirm') + $t('app.password')"
      label-align="top"
      :placeholder="$t('app.passwordPlaceholder1')"
      style="background: #12332100"
      type="password"
    />

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

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


  </div>
</template>

<script lang="ts" setup>
import {reactive, ref} from "vue";
import {sendSmsForget, updatePwd} from "@/api/login";
import {showToast} from "vant";
import { useI18n } from 'vue-i18n';

const loginData = reactive({
  phone: null,
  phoneNumber: '',
  code: null,
  password: '',
  confirmPassword: '',
  checkCode: '',
})

const flag = ref('1')
const { t } = useI18n()


const time = ref(60 * 1000);
const countDown = ref();
const countDownFlag = ref(false);
const start = () => {
  if (loginData.phoneNumber) {
    countDown.value.start();
    countDownFlag.value = true
    sendSmsForget({
      phoneNumber: loginData.phoneNumber
    }).then(res => {
      console.log(res)
      loginData.code = res
      loginData.checkCode = res
      onFinish()
    })
  } else {
    showToast(t('app.enter') + t('app.phoneNumber'))
  }
};

const next = () => {
  flag.value = '2'
}

const updatePwdBtn = () => {
  updatePwd({
    checkCode: loginData.checkCode,
    confirmPassword: loginData.confirmPassword,
    password: loginData.password
  }).then(res => {
    console.log(res)
  })
}


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

</script>

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



}
</style>