<script setup>
  import { onLoad } from '@dcloudio/uni-app'
  import { reactive } from 'vue'
  import CardInput from '../components/card-input.vue'
  import { useUI } from '@/utils/use-ui'
  import { navigateBack } from '@/utils/router'
  import { validateTransactionPassword } from '@/utils/validate'
  import { updateUserPayPwd, getUserPayPwd } from '@/api/my-index'

  const { showToast } = useUI()

  const formData = reactive({
    id: '',
    state: '0',
    // 旧密码
    password: '',
    // 新密码
    newPassword: '',
    // 确认密码
    confirmPassword: ''
  })
  const onEdit = async () => {
    let data = {}
    if (formData.state === '1') {
      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
      }

      data = {
        id: formData.id,
        oldPassword: formData.password,
        password: formData.confirmPassword
      }
    } else {
      const passwordValue = validateTransactionPassword(
        formData.password,
        '交易密码'
      )
      if (!passwordValue.valid) {
        showToast(passwordValue.message)
        return
      }
      data = {
        password: formData.password
      }
    }

    await updateUserPayPwd(data, formData.id ? 'put' : 'post')
    await showToast(`${formData.id ? '修改' : '添加'}成功`, 'success')
    navigateBack()
  }

  const getData = async () => {
    const res = await getUserPayPwd()
    formData.id = res.data.id
  }

  onLoad(e => {
    formData.state = e.type
    if (e.type === '1') {
      getData()
    }
  })
</script>

<template>
  <view class="edit-password">
    <nav-bar isTopBg isPlaceholder title="交易密码">

    </nav-bar>

    <view v-if="formData.state === '1'" 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 v-else class="input-box">
      <CardInput
        v-model="formData.password"
        title="设置交易密码"
        type="password"
      ></CardInput>
    </view>

    <!-- 底部按钮 -->
    <bottom-view>
      <cb-button @click="onEdit">
        确认
      </cb-button>
    </bottom-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>
