<template>
  <div class="step1">
    <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>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form';
  import { step1Schemas } from '../device.profile.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', 'emitDeviceType']);
  const loading = ref(false);
  const { createMessage } = useMessage();
  const deviceConfigPic = ref('');
  const props = defineProps({
    ifShowBtn: { type: Boolean, default: true },
  });

  const [register, { validate, setFieldsValue, resetFields, updateSchema, getFieldsValue }] =
    useForm({
      labelWidth: 100,
      schemas: step1Schemas,
      actionColOptions: {
        span: 14,
      },
      showResetButton: false,
      showActionButtonGroup: props.ifShowBtn ? true : 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;
  };
  async function customSubmitFunc() {
    const values = await validate();
    if (!values) return;
    emits('next', true, null);
    emits('emitDeviceType', values?.deviceType);
  }
  //回显数据
  const setFormData = (v) => {
    setFieldsValue(v);
    deviceConfigPic.value = v.image;
  };
  //获取数据
  async function getFormData() {
    const values = await validate();
    if (!values) return;
    Reflect.set(values, 'image', deviceConfigPic.value);
    return values;
  }
  //清空数据
  const resetFormData = () => {
    resetFields();
    deviceConfigPic.value = '';
  };

  const editOrAddDeviceTypeStatus = (status: boolean) => {
    updateSchema({
      field: 'deviceType',
      componentProps: {
        disabled: status,
      },
    });
  };

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