<template>
  <BasicModal
    :useWrapper="true"
    width="65rem"
    v-bind="$attrs"
    @register="registerModal"
    @ok="handleSubmit"
  >
    <div
      style="
        margin-top: -20px;
        width: 100vw;
        height: 50vh;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      "
    >
      <div style="width: 30vw; height: 20vh">
        <p>个人信息</p>
        <div class="change-avatar">
          <div class="mb-2">头像</div>
          <CropperAvatar
            :value="avatar"
            btnText="更换头像"
            :btnProps="{ preIcon: 'ant-design:cloud-upload-outlined' }"
            @change="updateAvatar"
            width="150"
          />
        </div>
        <Description
          class="mt-4"
          layout="vertical"
          :collapseOptions="{ canExpand: true, helpMessage: 'help me' }"
          :column="2"
          :schema="schema"
          :data="descData"
          @register="registerDesc"
        />
      </div>
      <div style="width: 70vw; height: 20vh">
        <p>基本资料</p>
        <BasicForm @register="registerForm" />
      </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';

  const schema: DescItem[] = [
    {
      field: 'name',
      label: '用户名称',
    },
    {
      field: 'phone',
      label: '手机号码',
      render: (curVal, data) => {
        return `${data.username}-${curVal}`;
      },
    },
    {
      field: 'email',
      label: '用户邮箱',
    },
    {
      field: 'name1',
      label: '用户昵称',
    },
    {
      field: 'timeout',
      label: '过期时间',
    },
    {
      field: 'createTime',
      label: '创建时间',
    },
  ];

  const descData = {
    name: '测试',
    phone: 'xxxx',
    email: 'dddddd',
    name1: 'ddd',
    timeout: '2021-90=90',
    createTime: '2021-90=90',
  };

  export default defineComponent({
    name: 'index',
    components: { BasicModal, BasicForm, Description, CropperAvatar },
    setup() {
      const getPersonalValue: any = ref({});
      const [registerDesc] = useDescription({
        title: '个人详情',
        schema: schema,
      });

      const [registerModal] = useModalInner();
      const [registerForm, { validate }] = useForm({
        showActionButtonGroup: false,
        schemas: formSchema,
      });
      const avatar = computed(() => {
        //     :uploadApi="uploadApi"
        // const { avatar } = userStore.getUserInfo;
        return defaultImage;
      });
      const handleSubmit = async () => {
        getPersonalValue.value = await validate();
        console.log(getPersonalValue.value);
        //TODO 后端接口
      };
      const updateAvatar = (src: string) => {
        console.log('src' + src);
        // const userinfo = userStore.getUserInfo;
        // userinfo.avatar = src;
        // userStore.setUserInfo(userinfo);
      };
      return {
        updateAvatar,
        avatar,
        handleSubmit,
        descData,
        registerDesc,
        schema,
        registerModal,
        registerForm,
      };
    },
  });
</script>
<style lang="less"></style>