<template>
  <BasicModal
    width="82vw"
    :height="compHeight"
    v-bind="$attrs"
    @register="registerModal"
    @ok="handleSubmit"
    :draggable="false"
    class="basic-modal"
    className="{styles.headSetPop}"
  >
    <div
      style="
        height: 62vh;
        width: 120vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      "
    >
      <div style="width: 29vw; height: 62vh; border: 1px solid #e9edf6; box-shadow: 0 0 5px -5px">
        <div style="width: 29vw; height: 4vh; border: 1px solid #e9edf6"
          ><p style="font-size: 17px; margin-top: 7px; margin-left: 10px">个人信息</p></div
        >
        <div class="change-avatar" style="text-align: center">
          <div class="mb-2" style="font-weight: 700">个人头像</div>
          <div style="display: flex; align-items: center; justify-content: center">
            <div>
              <Upload
                name="avatar"
                list-type="picture-card"
                class="avatar-uploader"
                :show-upload-list="false"
                :customRequest="customUploadqrcodePic"
                :before-upload="beforeUploadqrcodePic"
              >
                <img
                  style="border-radius: 50%; height: 8.75rem; width: 10rem"
                  v-if="peresonalPic || headerImg"
                  :src="peresonalPic || headerImg"
                  alt="avatar"
                />
                <div v-else>
                  <div>
                    <LoadingOutlined style="font-size: 30px" v-if="loading" />
                    <PlusOutlined v-else style="font-size: 30px" />
                  </div>
                </div>
              </Upload>
            </div>
          </div>
        </div>
        <Description
          class="mt-8"
          :column="1"
          :bordered="true"
          :data="getPersonalDetailValue"
          :schema="schema"
        />
      </div>
      <div
        style="
          width: 90vw;
          height: 60vh;
          border: 1px solid #e9edf6;
          margin-top: -15px;
          box-shadow: 0 0 5px -5px;
        "
      >
        <div style="height: 4vh; border: 1px solid #e9edf6"
          ><p style="font-size: 17px; margin-top: 7px; margin-left: 20px">基本资料</p></div
        >
        <div style="margin-left: 20px">
          <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 = updataPersonlData.value;
          } 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">
  .change-avatar {
    :deep .ant-upload-select-picture-card {
      border-radius: 50%;
      width: 10rem;
      height: 10rem;
      overflow: hidden;
      cursor: pointer;
      transition: border-color 0.3s ease;
    }
  }

  .headSetPop :global(.ant-modal-header) {
    padding: 27px 0 !important;
  }
</style>