<template>
  <view>
    <view class="form">
      <view class="form-item">
        <view class="form-item-label">
          <text>设置密码:</text>
        </view>
        <view class="form-item-content">
          <input
            type="password"
            maxLength="6"
            placeholder="请输入6位数交易密码"
            v-model="formVal.password"
            placeholderClass="input-placeholder" />
        </view>
      </view>
      <view class="form-item">
        <view class="form-item-label">
          <text>确认密码:</text>
        </view>
        <view class="form-item-content">
          <input
            type="password"
            maxLength="6"
            v-model="formVal.confirmPassword"
            placeholder="请再次输入6位数密码"
            placeholderClass="input-placeholder" />
        </view>
      </view>
      <view class="form-item">
        <view class="form-item-label">
          <text>手机号码:</text>
        </view>
        <view class="form-item-content">
          <input
            type="text"
            placeholder="请输入手机号码"
            :disabled="true"
            :value="userinfo.data?.phone"
            placeholderClass="input-placeholder" />
        </view>
      </view>
      <view class="form-item">
        <view class="form-item-label">
          <text>验证码:</text>
        </view>
        <view class="form-item-content">
          <input
            type="text"
            placeholder="请输入验证码"
            maxLength="6"
            v-model="formVal.code"
            placeholderClass="input-placeholder" />
          <text
            :style="{
              color: !isT ? '#F83D3D' : 'rgba(176, 176, 176, 1)',
            }"
            @tap="getCode"
            >{{ codeText }}
          </text>
        </view>
      </view>
    </view>
    <view class="w-[90%] mt-[80px] mx-auto">
      <nut-button shape="square" type="primary" block @click="formSubmit"
        >确认修改
      </nut-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import {ref} from 'vue';
import Taro from '@tarojs/taro';
import {editTradePwd, getVerifyCode} from '@/api/user';

const userinfo = ref<any>({});

const codeText = ref('获取验证码');

const isT = ref(false);

const formVal = ref({
  password: '',
  confirmPassword: '',
  code: '',
});

const xFormVal = ref({
  oldPassword: '',
  password: '',
  confirmPassword: '',
  code: '',
});

Taro.useLoad(() => {
  userinfo.value = Taro.getStorageSync('userInfo');
});

const formSubmit = async () => {
  try {
    if (!formVal.value.password)
      return Taro.showToast({title: '请输入交易密码', icon: 'none'});
    if (!formVal.value.confirmPassword)
      return Taro.showToast({title: '请再次输入交易密码', icon: 'none'});
    if (formVal.value.password !== formVal.value.confirmPassword)
      return Taro.showToast({title: '两次密码不一致', icon: 'none'});
    if (!formVal.value.code)
      return Taro.showToast({title: '请输入验证码', icon: 'none'});
    const res = await editTradePwd({
      pay_password: formVal.value.password,
      code: formVal.value.code,
    });
    Taro.showToast({title: res.msg, icon: 'none'});
    Taro.navigateBack({
      delta: 1,
    });
  } catch (err) {
    Taro.showToast({title: err.msg, icon: 'none'});
  }
};

const getCode = async () => {
  if (isT.value) return;
  isT.value = true;
  await getVerifyCode({
    phone: userinfo.value.data?.phone,
  });
  // 倒计时60s
  let time = 60;
  const timer = setInterval(() => {
    if (time === 0) {
      clearInterval(timer);
      isT.value = false;
      codeText.value = '获取验证码';
    } else {
      codeText.value = `${time}s后重新获取`;
      time--;
    }
  }, 1000);
};
</script>

<style lang="scss">
@import './index.scss';
</style>
