<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="deviceConfigPic"
                :src="deviceConfigPic"
                alt=""
                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" setup>
  import { ref } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form';
  import { step1Schemas } from './data';
  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';

  const emits = defineEmits(['next']);
  const loading = ref(false);
  const { createMessage } = useMessage();
  const deviceConfigPic = 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 customUploadqrcodePic = async ({ file }) => {
    if (beforeUploadqrcodePic(file)) {
      deviceConfigPic.value = '';
      loading.value = true;
      const formData = new FormData();
      formData.append('file', file);
      const response = await uploadApi(formData);
      if (response.fileStaticUri) {
        deviceConfigPic.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;
  };
  //回显数据
  const setFormData = (v) => {
    setFieldsValue(v);
    deviceConfigPic.value = v.image;
  };
  async function customSubmitFunc() {
    const values = await validate();
    if (!values) return;
    emits('next', true, null);
  }
  //获取数据
  async function getFormData() {
    const values = await validate();
    if (!values) return;
    Reflect.set(values, 'image', deviceConfigPic.value);
    return values;
  }
  //清空数据
  const resetFormData = () => {
    resetFields();
    deviceConfigPic.value = '';
  };

  defineExpose({
    editOrAddNameStatus,
    setFormData,
    resetFormData,
    getFormData,
  });
</script>
<style lang="less" scoped>
  @import url('./common/DeviceConfigurationSetp.less');
</style>