<template>
  <BasicModal
    :useWrapper="true"
    width="80vw"
    :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, onMounted } 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, personalGet } from '/@/api/personal/index';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { USER_INFO_KEY } from '/@/enums/cacheEnum';
  import { getAuthCache } from '/@/utils/auth';

  const schema: DescItem[] = [
    {
      field: 'creator',
      label: '用户名称：',
    },
    {
      field: 'phoneNumber',
      label: '手机号码：',
    },
    {
      field: 'email',
      label: '用户邮箱：',
    },
    {
      field: 'realName',
      label: '用户昵称：',
    },
    {
      field: 'createTime',
      label: '过期时间：',
    },
    {
      field: 'createTime',
      label: '创建时间：',
    },
  ];
  export default defineComponent({
    name: 'index',
    components: { BasicModal, BasicForm, Description, CropperAvatar },
    setup() {
      const userInfo = getAuthCache(USER_INFO_KEY);
      const { createMessage } = useMessage();
      const getPersonalValue: any = ref({});
      const getPersonalDetailValue: any = ref({});
      const [registerDesc] = useDescription({
        title: '个人详情',
        schema: schema,
      });

      const [registerModal] = useModalInner();
      const [registerForm, { validate }] = useForm({
        showActionButtonGroup: false,
        schemas: formSchema,
      });
      const avatar = computed(() => {
        return defaultImage;
      });
      const handleSubmit = async () => {
        getPersonalValue.value = await validate();
        await personalPut(getPersonalValue.value);
        createMessage.success('修改成功');
      };
      const updateAvatar = async (v) => {
        console.log('v' + v);
        await personalPut({ avatar: v });
      };
      const getPersonalDetail = async () => {
        try {
          const getUserInfo = await userInfo;
          const getBackendData = await personalGet(getUserInfo.userId);
          getPersonalDetailValue.value = getBackendData;
          console.log(getPersonalDetailValue.value);
        } catch (e) {
          return e;
        }
      };
      onMounted(() => {
        getPersonalDetail();
      });
      const compHeight = computed(() => {
        return 1000;
      });
      return {
        uploadApi,
        compHeight,
        updateAvatar,
        avatar,
        handleSubmit,
        getPersonalDetailValue,
        registerDesc,
        schema,
        registerModal,
        registerForm,
      };
    },
  });
</script>
<style lang="less"></style>