<template>
  <BasicModal
    :useWrapper="true"
    width="82vw"
    :height="compHeight"
    v-bind="$attrs"
    @register="registerModal"
    @ok="handleSubmit"
    :draggable="false"
  >
    <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="text-align: center; width: 100%">
            <Upload
              style="width: 20vw"
              name="avatar"
              list-type="picture-card"
              class="avatar-uploader"
              :show-upload-list="false"
              :customRequest="customUploadqrcodePic"
              :before-upload="beforeUploadqrcodePic"
            >
              <img
                style="text-align: center; border-radius: 50%"
                v-if="peresonalPic"
                :src="peresonalPic"
                alt="avatar"
              />
              <div v-else>
                <div style="margin-top: 5.2vh; margin-left: 3.21vw">
                  <PlusOutlined style="font-size: 30px" />
                </div>
              </div>
            </Upload>
          </div>
        </div>
        <Description
          class="mt-8"
          :column="1"
          :schema="schema"
          :bordered="true"
          :data="getPersonalDetailValue"
          @register="registerDesc"
        />
      </div>
      <div
        style="
          width: 90vw;
          height: 60vh;
          border: 1px solid #e9edf6;
          margin-top: -15px;
          box-shadow: 0 0 5px -5px;
        "
      >
        <div style="width: 90vw; 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, useDescription } 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';

  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 },
    emits: ['refreshPersonl', 'register'],
    setup(_, { emit }) {
      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 getUpdateUserInfo: any = ref({});
      const [registerDesc] = useDescription({
        title: '个人详情',
        schema: schema,
      });

      const peresonalPic = ref();

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

      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 < 2;
        if (!isLt2M) {
          createMessage.error('图片大小不能超过2MB!');
        }
        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 (data) => {
        refreshCacheGetData();
        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 (data.userInfo) {
              getPersonalDetailValue.value = data.userInfo;
              peresonalPic.value = data.userInfo.avatar;
              setFieldsValue({
                realName: data.userInfo.realName,
                phoneNumber: data.userInfo.phoneNumber,
                email: data.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,
        registerDesc,
        schema,
        registerModal,
        registerForm,
      };
    },
  });
</script>
<style scoped lang="less">
  .change-avatar {
    :deep .ant-upload-select-picture-card {
      display: inherit;
      float: none;
      width: 35%;
      height: 0;
      padding-bottom: 35%;
      margin: 0;

      // width: 8.6vw;
      // height: 17vh;
      // margin-right: 0.2vw;
      // margin-bottom: 0.2vw;
      text-align: center;
      vertical-align: top;
      background-color: #fafafa;
      border: 1px dashed #d9d9d9;
      border-radius: 50%;
      cursor: pointer;
      transition: border-color 0.3s ease;
    }
  }
</style>