<template>
  <div class="step1">
    <div class="step1-form">
      <div>
        <BasicForm @register="register">
          <template #imageSelect>
            <Upload style="width: 20vw" name="avatar" list-type="picture-card" class="avatar-uploader"
              :show-upload-list="false" :customRequest="customUploadqrcodePic" :before-upload="beforeUploadqrcodePic">
              <img v-if="peresonalPic" :src="peresonalPic" alt="avatar" style="width: 6.25rem; height: 6.25rem" />
              <div v-else>
                <LoadingOutlined v-if="loading" />
                <PlusOutlined v-else />
                <div class="ant-upload-text">图片上传</div>
              </div>
            </Upload>
          </template>
        </BasicForm>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { BasicForm, useForm } from '/@/components/Form';
import { step1Schemas } from './data';
import { Select, Input, Divider } from 'ant-design-vue';
import { uploadApi } from '/@/api/personal/index';
import { Upload } from 'ant-design-vue';
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
import { useMessage } from '/@/hooks/web/useMessage';
import type { FileItem } from '/@/components/Upload/src/typing';

export default defineComponent({
  components: {
    BasicForm,
    [Select.name]: Select,
    [Input.name]: Input,
    [Input.Group.name]: Input.Group,
    [Divider.name]: Divider,
    Upload,
    PlusOutlined,
    LoadingOutlined,
  },
  emits: ['next', 'resetFunc', 'register'],
  setup(_, { emit }) {
    const loading = ref(false);

    const { createMessage } = useMessage();
    const peresonalPic = ref('');

    const [register, { validate, setFieldsValue, resetFields, updateSchema }] = useForm({
      labelWidth: 100,
      schemas: step1Schemas,
      actionColOptions: {
        span: 14,
      },
      showResetButton: false,
      submitButtonOptions: {
        text: '下一步',
      },
      submitFunc: customSubmitFunc,
    });
    const editOrAddNameStatus = (nameStatus) => updateSchema({
      field: 'name', componentProps: {
        disabled: nameStatus
      }
    })
    //回显数据
    const setStepOneFieldsValueFunc = (v) => {
      setFieldsValue(v);
      peresonalPic.value = v.image;
    };
    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' || file.type === 'image/jpg';
      if (!isJpgOrPng) {
        createMessage.error('只能上传图片文件!');
      }
      const isLt2M = (file.size as number) / 1024 / 1024 < 5;
      if (!isLt2M) {
        createMessage.error('图片大小不能超过5MB!');
      }
      return isJpgOrPng && isLt2M;
    };

    async function customSubmitFunc() {
      const values = await validate();
      emit('next', values, peresonalPic.value);
    }
    //清空数据
    const customResetStepOneFunc = () => {
      resetFields();
      peresonalPic.value = '';
    };
    const getStep1Func = async () => {
      const valueStep1 = await validate();
      const pic = peresonalPic.value;
      return {
        key: valueStep1,
        icon: pic,
      };
    };
    return {
      register,
      setStepOneFieldsValueFunc,
      customResetStepOneFunc,
      uploadApi,
      peresonalPic,
      beforeUploadqrcodePic,
      customUploadqrcodePic,
      getStep1Func,
      loading,
      editOrAddNameStatus
    };
  },
});
</script>
<style lang="less" scoped>
.step1 {
  &-form {
    width: 500px;
    margin: 0 auto;
  }

  h3 {
    margin: 0 0 12px;
    font-size: 16px;
    line-height: 32px;
    color: @text-color;
  }

  h4 {
    margin: 0 0 4px;
    font-size: 14px;
    line-height: 22px;
    color: @text-color;
  }

  p {
    color: @text-color;
  }

  .device-icon-style {
    :deep .ant-upload-select-picture-card {
      display: inherit;
      float: none;
      width: 4.9vw;
      height: 9.5vh;
      margin-right: 8px;
      text-align: center;
      vertical-align: top;
      background-color: #fafafa;
      border: 1px dashed #d9d9d9;
      cursor: pointer;
      transition: border-color 0.3s ease;
    }
  }
}

.pay-select {
  width: 20%;
}

.pay-input {
  width: 70%;
}
</style>