<template>
  <BasicModal
    width="80%"
    :height="compHeight"
    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="customUploadqrcodePic"
              :before-upload="beforeUploadqrcodePic"
            >
              <img
                class="round"
                v-if="peresonalPic || headerImg"
                :src="peresonalPic || 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
          class="mt-8 p-4"
          :column="1"
          :bordered="true"
          :data="getPersonalDetailValue"
          :schema="schema"
        />
      </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, computed } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal/index';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { formSchema } from './config';
  import { Description, DescItem } from '/@/components/Description/index';
  import { uploadApi, personalPut } from '/@/api/personal/index';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { USER_INFO_KEY } from '/@/enums/cacheEnum';
  import { getAuthCache } from '/@/utils/auth';
  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';

  const schema: DescItem[] = [
    {
      field: 'username',
      label: '用户名称：',
    },
    {
      field: 'phoneNumber',
      label: '手机号码：',
    },
    {
      field: 'email',
      label: '用户邮箱：',
    },
    {
      field: 'realName',
      label: '用户昵称：',
    },
    {
      field: 'accountExpireTime',
      label: '过期时间：',
    },
    {
      field: 'createTime',
      label: '创建时间：',
    },
  ];
  const mockData: Recordable = {
    username: 'test',
    phoneNumber: 'VB',
    email: '123',
    realName: '15695909xxx',
    accountExpireTime: '190848757@qq.com',
    createTime: '厦门市思明区',
  };
  export default defineComponent({
    name: 'Index',
    components: { BasicModal, BasicForm, Description, Upload, PlusOutlined, LoadingOutlined },
    emits: ['refreshPersonl', 'register'],
    setup(_, { emit }) {
      const loading = ref(false);
      const userInfo = getAuthCache(USER_INFO_KEY);
      const { createMessage } = useMessage();
      const getPersonalValue: any = ref({});
      const getPersonalDetailValue: any = ref({});
      const updatePersonalData: any = ref({});
      const getBackendV: any = ref({});
      const getData: any = ref({});
      const updataPersonlData: any = ref({});
      const userStore = useUserStore();
      const peresonalPic = ref();

      const customUploadqrcodePic = async ({ file }) => {
        if (beforeUploadqrcodePic(file)) {
          peresonalPic.value = '';
          loading.value = true;
          const formData = new FormData();
          formData.append('file', file);
          const response = await uploadApi(formData);
          if (response.fileStaticUri) {
            peresonalPic.value = response.fileStaticUri;
            loading.value = false;
          }
        }
      };

      const beforeUploadqrcodePic = (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 refreshCacheGetData = () => {
        const getItem = window.localStorage.getItem('updateUserInfo');
        const newItem = JSON.parse(getItem);
        updataPersonlData.value = newItem;
      };
      const [registerModal, { closeModal }] = useModalInner(async () => {
        refreshCacheGetData();
        const userInfo = userStore.getUserInfo;
        try {
          if (updataPersonlData.value != null) {
            (peresonalPic.value = updataPersonlData.value.avatar),
              setFieldsValue({
                realName: updataPersonlData.value.realName,
                phoneNumber: updataPersonlData.value.phoneNumber,
                email: updataPersonlData.value.email,
              });
            getPersonalDetailValue.value = userInfo;
          } else {
            if (userInfo) {
              getPersonalDetailValue.value = userInfo;
              peresonalPic.value = userInfo.avatar;
              setFieldsValue({
                realName: userInfo.realName,
                phoneNumber: userInfo.phoneNumber,
                email: userInfo.email,
              });
            }
          }
        } catch (e) {
          return e;
        }
        if (Object.keys(updatePersonalData.value).length != 0) {
          getPersonalDetailValue.value = updatePersonalData.value;
          peresonalPic.value = updatePersonalData.value.avatar;
          setFieldsValue({
            realName: updatePersonalData.value.realName,
            phoneNumber: updatePersonalData.value.phoneNumber,
            email: updatePersonalData.value.email,
          });
        }
      });
      const handleSubmit = async () => {
        const getUserInfo = await userInfo;
        getPersonalValue.value = await validate();
        getPersonalValue.value.id = getUserInfo.userId;
        getPersonalValue.value.username = getBackendV.value.username;
        getPersonalValue.value.avatar = peresonalPic.value;
        getData.value = await personalPut(getPersonalValue.value);
        console.log(getData.value.realName);
        userStore.setUserInfo(getData.value);
        updatePersonalData.value = getData.value;
        createMessage.success('修改成功');
        const setUpdateUserInfo = JSON.stringify(getData.value);
        window.localStorage.setItem('updateUserInfo', setUpdateUserInfo);
        closeModal();
        resetFields();
        emit('refreshPersonl', updatePersonalData.value);
      };
      const compHeight = computed(() => {
        return 1000;
      });
      return {
        peresonalPic,
        beforeUploadqrcodePic,
        customUploadqrcodePic,
        compHeight,
        handleSubmit,
        getPersonalDetailValue,
        schema,
        registerModal,
        registerForm,
        loading,
        mockData,
        headerImg,
      };
    },
  });
</script>
<style scoped lang="less">
  .round {
    border-radius: 50%;
  }

  .personal-info-modal:global(.ant-upload.ant-upload-select-picture-card) {
    border-radius: 50%;
    width: 140px;
    height: 140px;
    margin: 0 !important;
  }
</style>