<template>
  <BasicModal
    :useWrapper="true"
    width="82vw"
    :height="compHeight"
    v-bind="$attrs"
    @register="registerModal"
    @ok="handleSubmit"
  >
    <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">头像</div>
          <CropperAvatar
            :uploadApi="uploadApi"
            :value="avatar"
            btnText="更换头像"
            :btnProps="{ preIcon: 'ant-design:cloud-upload-outlined' }"
            @change="updateAvatar"
            width="150"
          />
        </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 { CropperAvatar } from '/@/components/Cropper';
  import defaultImage from '/@/assets/images/logo.png';
  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 { useUserStore } from '/@/store/modules/user';

  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 },
    setup() {
      const userStore = useUserStore();
      const userInfo = getAuthCache(USER_INFO_KEY);
      const { createMessage } = useMessage();
      const getPersonalValue: any = ref({});
      const getPersonalDetailValue: any = ref({});
      const avatarUrl: any = ref('');
      const getBackendV: any = ref({});
      const retryFormData: any = ref({});
      // const retryDefaultData: any = ref({});
      const [registerDesc] = useDescription({
        title: '个人详情',
        schema: schema,
      });

      const [registerModal, { closeModal }] = useModalInner();
      const avatar = computed(() => {
        const { avatar } = userStore.getUserInfo;
        return avatarUrl.value || avatar || defaultImage;
      });
      const updateAvatar = async (v) => {
        avatarUrl.value = v.data.fileStaticUri;
      };
      const [registerForm, { validate, resetFields, setFieldsValue }] = useForm({
        showActionButtonGroup: false,
        schemas: formSchema,
      });
      //回显数据
      const retryFieldsValue = async () => {
        try {
          // retryDefaultData.value = await personalGet(getUserInfo.userId);
          const getUserInfo = await userInfo;
          // const getUserInfo = userStore.getUserInfo;
          retryFormData.value = getUserInfo;
          setFieldsValue({
            realName: retryFormData.value.realName,
            phoneNumber: retryFormData.value.phoneNumber,
            email: retryFormData.value.email,
          });
        } catch (e) {
          return e;
        }
      };
      // setTimeout(() => {
      //   retryFieldsValue();
      // }, 3000);
      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 = avatarUrl.value;
        await personalPut(getPersonalValue.value);
        createMessage.success('修改成功');
        closeModal();
        resetFields();
      };

      const getPersonalDetail = async () => {
        try {
          const getUserInfo = await userInfo;
          getPersonalDetailValue.value = getUserInfo;
          setTimeout(() => {
            setFieldsValue({
              realName: getPersonalDetailValue.value.realName,
              phoneNumber: getPersonalDetailValue.value.phoneNumber,
              email: getPersonalDetailValue.value.email,
            });
          }, 1000);
        } catch (e) {
          return e;
        }
      };
      getPersonalDetail();

      const compHeight = computed(() => {
        return 1000;
      });
      return {
        retryFieldsValue,
        uploadApi,
        compHeight,
        updateAvatar,
        avatar,
        handleSubmit,
        getPersonalDetailValue,
        registerDesc,
        schema,
        registerModal,
        registerForm,
      };
    },
  });
</script>
<style lang="less"></style>