<template>
  <div class="transfer-config-mode">
    <BasicForm @register="register" />
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, nextTick } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form';
  import { BasicInfoFormField, modeForm } from './config';
  import { Select, Input, Divider } from 'ant-design-vue';

  export interface ConvertDevice {
    product: string;
    devices: string[];
  }

  export interface DatasourceContent {
    convertProducts: string[];
    convertDevices: ConvertDevice[];
  }

  export interface BasicInfoRecord {
    name?: string;
    type: string;
    remark: string;
    datasourceType: string;
    datasourceContent: DatasourceContent;
  }

  export default defineComponent({
    components: {
      BasicForm,
      [Select.name]: Select,
      [Input.name]: Input,
      [Input.Group.name]: Input.Group,
      [Divider.name]: Divider,
    },
    props: {
      saveContent: {
        type: Function,
      },
    },
    emits: ['next', 'resetFunc', 'register'],
    setup(props, { emit }) {
      const sonValues = ref<BasicInfoRecord>({} as unknown as BasicInfoRecord);
      const [register, { validateFields, setFieldsValue, resetFields }] = useForm({
        labelWidth: 100,
        schemas: modeForm(props.saveContent),
        actionColOptions: {
          span: 14,
        },
        showResetButton: false,
        submitButtonOptions: {
          text: '下一步',
        },
        submitFunc: customSubmitFunc,
      });
      //提交数据
      async function customSubmitFunc() {
        try {
          const values = await validateFields();
          emit('next', values);
        } catch (error) {}
      }
      //回显数据
      const setStepOneFieldsValueFunc = (record: Recordable) => {
        const value = {
          ...record,
          [BasicInfoFormField.DATA_SOURCE_PRODUCT]:
            record?.datasourceContent?.convertProducts || [],
          [BasicInfoFormField.DATA_SOURCE_DEVICE]:
            (record?.datasourceContent?.convertDevices || []).reduce((prev, next) => {
              return [...prev, ...(next?.devices || [])];
            }, []) || [],
        };
        setFieldsValue(value);
      };

      //清空数据
      const customResetStepOneFunc = () => {
        nextTick(() => {
          resetFields();
        });
      };
      const getSonValueFunc = async () => {
        const record = (await validateFields()) || {};
        const { type, remark } = record;
        const datasourceType = Reflect.get(record, BasicInfoFormField.DATA_SOURCE_TYPE);
        const convertDevices = Reflect.get(record, BasicInfoFormField.DATA_SOURCE_DEVICE);
        const convertProducts = Reflect.get(record, BasicInfoFormField.DATA_SOURCE_PRODUCT);

        sonValues.value = {
          type,
          remark,
          datasourceType,
          datasourceContent: {
            convertProducts,
            convertDevices,
          },
        };
        return sonValues.value;
      };
      return {
        getSonValueFunc,
        register,
        setStepOneFieldsValueFunc,
        customResetStepOneFunc,
      };
    },
  });
</script>
<style lang="less">
  .transfer-config-mode {
    margin: 0 auto;
    width: 600px;
  }
</style>