<template>
  <div>
    <BasicForm @register="registerForm" layout="vertical" />
    <a-button @click="handleReset">重置</a-button>
    <a-button type="primary" @click="handleSubmit">保存</a-button>
  </div>
</template>

<script lang="ts" setup>
  import { BasicForm, useForm } from '/@/components/Form';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { pswFormSchema } from './data';
  // import { Upload } from 'ant-design-vue';
  import { userAccountInfo, editPsw } from '/@/api/sys/userAccountApi';
  import { onMounted, ref } from 'vue';
  const id = ref('');
  // const errorMsg = ref(null);
  onMounted(async () => {
    const res = await userAccountInfo();
    console.log('res::::::::::::', res.basicInfo.org.id);
    id.value = res.basicInfo.org.id;
    await setFieldsValue({ ...res.basicInfo });
  });
  const { createMessage } = useMessage();
  const [registerForm, { setFieldsValue, validate }] = useForm({
    labelWidth: 120,
    schemas: pswFormSchema,
    showActionButtonGroup: false,
    actionColOptions: {
      span: 23,
    },
    baseColProps: {
      span: 18,
    },
    wrapperCol: {
      span: 24,
    },
  });
  // 提交按钮事件
  async function handleSubmit() {
    const values = await validate();
    console.log('abc', values);
    values.id = id.value;
    try {
      await editPsw(values);
      createMessage.success('修改成功');
    } catch (err) {
      console.log('error', err);
      // console.log('Error', );
    }
  }
  async function handleReset() {
    const res = await userAccountInfo();

    await setFieldsValue(res);
  }
</script>

<style lang="less" scoped>
  .img-avatar {
    display: block;
    width: 60px;
    height: 60px;
  }
</style>
