<script setup>
  import { reactive } from 'vue'
  import CardInput from '../components/card-input.vue'
  import { useUI } from '@/utils/use-ui'
  import { validateTransactionPassword } from '@/utils/validate'

  const { showToast } = useUI()

  const formData = reactive({
    // 旧密码
    password: '',
    // 新密码
    newPassword: '',
    // 确认密码
    confirmPassword: ''
  })
  const onEdit = () => {
    const passwordValue = validateTransactionPassword(
      formData.password,
      '旧密码'
    )
    if (!passwordValue.valid) {
      showToast(passwordValue.message)
      return
    }

    const newPasswordValue = validateTransactionPassword(
      formData.newPassword,
      '新的交易密码'
    )
    if (!newPasswordValue.valid) {
      showToast(newPasswordValue.message)
      return
    }

    const confirmPasswordValue = validateTransactionPassword(
      formData.confirmPassword,
      '确认交易密码'
    )
    if (!confirmPasswordValue.valid) {
      showToast(confirmPasswordValue.message)
      return
    }

    if (formData.newPassword !== formData.confirmPassword) {
      showToast('两次密码不一致')
      return
    }

    console.log('修改密码：', formData)
  }
</script>

<template>
  <view class="edit-password">
    <nav-bar isTopBg isPlaceholder title="交易密码">
      <template #right>
        <text class="top-right-name" @click="onEdit">确认</text>
      </template>
    </nav-bar>

    <view class="input-box">
      <CardInput
        v-model="formData.password"
        title="旧密码"
        type="password"
      ></CardInput>
      <CardInput
        v-model="formData.newPassword"
        title="设置新的交易密码"
        type="password"
      ></CardInput>
      <CardInput
        v-model="formData.confirmPassword"
        title="重复新的交易密码"
        type="password"
      ></CardInput>
    </view>
  </view>
</template>

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

  .top-right-name {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    color: #ffffff;
    text-align: center;
    font-style: normal;
    text-transform: none;
    background: #00d993;
    padding: 6rpx 20rpx;
    border-radius: 8rpx;
  }

  .input-box {
    padding: 32rpx 24rpx;
  }
</style>
