<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">
            <Upload
              name="avatar"
              list-type="picture-card"
              class="round !flex justify-center items-center"
              :show-upload-list="false"
              :customRequest="customUpload"
              :before-upload="beforeUpload"
            >
              <img
                class="round"
                v-if="personalPicture || headerImg"
                :src="personalPicture || headerImg"
                alt="avatar"
              />
              <div v-else>
                <div>
                  <LoadingOutlined class="text-3xl" v-if="loading" />
                  <PlusOutlined v-else class="text-3xl" />
                </div>
              </div>
            </Upload>
          </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, unref } 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 { Upload } from 'ant-design-vue';
  import { PlusOutlined } from '@ant-design/icons-vue';
  import { useUserStore } from '/@/store/modules/user';
  import type { FileItem } from '/@/components/Upload/src/typing';
  import { LoadingOutlined } from '@ant-design/icons-vue';
  import headerImg from '/@/assets/images/logo.png';
  import { getMyInfo } from '/@/api/sys/user';
  import { UserInfoModel } from '/@/api/sys/model/userModel';
  import { UserInfo } from '/#/store';

  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, Upload, PlusOutlined, LoadingOutlined },
    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 customUpload = async ({ file }) => {
        if (beforeUpload(file)) {
          personalPicture.value = '';
          loading.value = true;
          const formData = new FormData();
          formData.append('file', file);
          const response = await uploadApi(formData);
          if (response.fileStaticUri) {
            personalPicture.value = response.fileStaticUri;
            loading.value = false;
          }
        }
      };

      const beforeUpload = (file: FileItem) => {
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
        if (!isJpgOrPng) {
          createMessage.error('只能上传图片文件!');
        }
        const isLt2M = (file.size as number) / 1024 / 1024 < 5;
        if (!isLt2M) {
          createMessage.error('图片大小不能超过5MB!');
        }
        return isJpgOrPng && isLt2M;
      };

      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;
        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: unref(personalPicture),
        });

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

      return {
        personalInfo,
        registerDesc,
        personalPicture,
        beforeUpload,
        customUpload,
        handleSubmit,
        registerModal,
        registerForm,
        loading,
        headerImg,
      };
    },
  });
</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>