<template>
  <div class="change-password">
    <a-card :bordered="false">
      <a-form layout="vertical" :model="passwordForm" @submit="handleChangePassword">
        <a-form-item label="新密码">
          <a-input
            v-model:value="passwordForm.newPassword"
            placeholder="请输入新密码"
            type="password"
            allow-clear
            style="max-width: 400px"
          />
        </a-form-item>
        <a-form-item label="确认密码">
          <a-input
            v-model:value="passwordForm.confirmPassword"
            placeholder="请确认新密码"
            type="password"
            allow-clear
            style="max-width: 400px"
          />
        </a-form-item>
        <a-form-item>
          <a-space>
            <a-button type="primary" html-type="submit">修改密码</a-button>
            <a-button type="default" @click="goBack">取消</a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import { reactive } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { message } from 'ant-design-vue';
  import { useTabsViewStore } from '@/store/modules/tabsView';
  const { closeCurrentTab } = useTabsViewStore();

  const router = useRouter();
  console.log('router', router);
  const route = useRoute();

  // 密码表单数据
  const passwordForm = reactive({
    newPassword: '',
    confirmPassword: '',
  });

  // 修改密码
  const handleChangePassword = async () => {
    if (passwordForm.newPassword !== passwordForm.confirmPassword) {
      message.error('两次输入的密码不一致');
      return;
    }
    // TODO: 调用修改密码接口
    message.success('密码修改成功');
    goBack();
  };

  const goBack = () => {
    router.back();
    closeCurrentTab(route);
  };
</script>
