<template>
  <view class="px-base">
    <CuNavbar title="修改密码">
      <!-- <template #right>
        <view @click="submit" class="text-white text-24rpx">保存</view>
      </template> -->
    </CuNavbar>
    <view class="space-y-base mt-base">
      <view class="card-shadow bg-white rounded-19rpx px-base">
        <uv-form
          labelWidth="160rpx"
          labelPosition="left"
          :borderBottom="false"
          :model="form"
          :rules="rules"
          errorType="toast"
          ref="formRef"
        >
          <uv-form-item label="新登录密码" prop="password">
            <uv-input
              border="none"
              input-align="right"
              type="password"
              v-model="form.password"
              placeholder="请输入新登录密码"
            ></uv-input>
          </uv-form-item>
          <uv-line color="#f5f5f5"></uv-line>
          <uv-form-item label="新登录密码" prop="password2">
            <uv-input
              border="none"
              v-model="form.password2"
              input-align="right"
              type="password"
              placeholder="请输入新登录密码"
            ></uv-input>
          </uv-form-item>
        </uv-form>
      </view>
    </view>
    <view class="mt-100rpx">
      <uv-button type="primary" @click="submit">保存</uv-button>
    </view>
    <uv-modal
      ref="modalRef"
      title="提示"
      content="确定修改密码？"
      @confirm="changePassword"
      :showCancelButton="true"
    ></uv-modal>
  </view>
</template>
<script setup>
import CuNavbar from '@/components/cu-navbar/index'
import Cell from '@/components/cell/index'
import { ref, reactive } from 'vue'
import { http } from '@/utils/request'
const modalRef = ref(null)
const formRef = ref(null)
const form = reactive({
  password: '',
  password2: '',
})
const rules = reactive({
  password: [{ required: true, message: '请输入新登录密码' }],
  password2: [
    { required: true, message: '请输入新登录密码' },
    {
      validator: (rule, value) => {
        return value === form.password
      },
      message: '两次密码不一致',
    },
  ],
})

const submit = () => {
  formRef.value.validate().then((res) => {
    modalRef.value.open()
  })
}

const changePassword = () => {
  http
    .post('/auth/profile', {
      password: form.password,
      password_confirmation: form.password2,
    })
    .then((ress) => {
      uni.showToast({
        title: '修改成功',
        duration: 2000,
        icon: 'none',
      })
      formRef.value.resetFields()
    })
}
</script>
