<template>
  <BasicModal
    width="80%"
    v-bind="$attrs"
    @register="registerModal"
    @ok="handleSubmit"
    title="个人信息"
    :draggable="false"
    wrap-class-name="personal-info-modal"
  >
    <div class="flex">
      <div class="flex flex-col w-1/2 border border-gray-200">
        <div class="text-center cursor-pointer">
          <div class="text-left text-lg border-gray-200 p-2 border">个人头像</div>
          <div class="flex items-center justify-center mt-4">
            <CropperAvatar @change="handleChange" :uploadApi="uploadApi" :value="personalPicture" />
          </div>
        </div>
        <Description @register="registerDesc" class="mt-8 p-4" />
      </div>
      <div class="ml-4 border border-gray-200">
        <div class="text-lg p-2 border border-gray-200"> 基本资料 </div>
        <div class="ml-5">
          <BasicForm @register="registerForm" />
        </div>
      </div>
    </div>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal/index';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { formSchema } from './config';
  import { Description, DescItem, useDescription } from '/@/components/Description/index';
  import { uploadApi, personalPut } from '/@/api/personal/index';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useUserStore } from '/@/store/modules/user';
  import headerImg from '/@/assets/images/logo.png';
  import { getMyInfo } from '/@/api/sys/user';
  import { UserInfoModel } from '/@/api/sys/model/userModel';
  import { UserInfo } from '/#/store';
  import { CropperAvatar } from '/@/components/Cropper';

  const schema: DescItem[] = [
    {
      field: 'username',
      label: '用户名称：',
    },
    {
      field: 'phoneNumber',
      label: '手机号码：',
    },
    {
      field: 'email',
      label: '用户邮箱：',
    },
    {
      field: 'realName',
      label: '用户昵称：',
    },
    {
      field: 'accountExpireTime',
      label: '过期时间：',
    },
    {
      field: 'createTime',
      label: '创建时间：',
    },
  ];

  export default defineComponent({
    name: 'Index',
    components: {
      BasicModal,
      BasicForm,
      Description,
      CropperAvatar,
    },
    emits: ['refreshPersonal', 'register'],
    setup(_, { emit }) {
      const loading = ref(false);
      const { createMessage } = useMessage();

      const userStore = useUserStore();
      const personalPicture = ref<string>();

      const personalInfo = ref<UserInfoModel>();

      const [registerDesc, { setDescProps }] = useDescription({
        schema,
        column: 1,
        bordered: true,
      });
      const handleChange = (e) => {
        personalPicture.value = e.data;
      };

      const [registerForm, { validate, resetFields, setFieldsValue }] = useForm({
        showActionButtonGroup: false,
        schemas: formSchema,
      });

      const [registerModal, { closeModal }] = useModalInner(async () => {
        const info = await getMyInfo();
        personalInfo.value = info;
        personalPicture.value = info.avatar || headerImg;
        setFieldsValue(info);
        setDescProps({ data: info });
      });

      const handleSubmit = async () => {
        const value = await validate();
        const userInfo = userStore.getUserInfo;
        const record = await personalPut({
          ...value,
          id: userInfo.userId,
          avatar: personalPicture.value,
        });

        userStore.setUserInfo(record as unknown as UserInfo);
        createMessage.success('修改成功');
        closeModal();
        resetFields();
        emit('refreshPersonal', record);
      };

      return {
        personalInfo,
        registerDesc,
        personalPicture,
        handleSubmit,
        registerModal,
        registerForm,
        loading,
        headerImg,
        uploadApi,
        handleChange,
      };
    },
  });
</script>
<style scoped lang="less">
  .round {
    border-radius: 50%;
  }
</style>
<style lang="less">
  .personal-info-modal .ant-upload.ant-upload-select-picture-card {
    border-radius: 50%;
    width: 160px;
    height: 160px;
    margin: 0 !important;
  }
</style>