<template>
  <div class="step1">
    <BasicForm @register="register" />
  </div>
</template>
<script lang="ts" setup>
  import { nextTick } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form';
  import { step1Schemas } from '../device.profile.data';
  import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
  import { buildUUID } from '/@/utils/uuid';

  const emits = defineEmits(['next', 'emitDeviceType']);
  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 setFieldsdefaultRuleChainId = async (id) => {
    await nextTick();
    setFieldsValue({ defaultRuleChainId: id });
  };

  async function customSubmitFunc() {
    const values = await validate();
    if (!values) return;
    emits('next', true, null);
    emits('emitDeviceType', values?.deviceType);
  }
  //回显数据
  const setFormData = (v) => {
    if (v.image) {
      setFieldsValue({
        image: [{ uid: buildUUID(), name: 'name', url: v.image } as FileItem],
      });
    }
    const { image, ...params } = v;
    console.log(image);
    setFieldsValue({ ...params });
  };
  //获取数据
  async function getFormData() {
    const values = await validate();
    if (!values) return;
    if (Reflect.has(values, 'image')) {
      const file = (values.image || []).at(0) || {};
      values.image = file.url || null;
    }
    return values;
  }
  //清空数据
  const resetFormData = () => {
    resetFields();
  };

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

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