<template>
  <BasicForm @register="registerForm">
    <template #nameSlot="{ model }">
      <Input
        :disabled="model.disabled"
        v-model:value="model.name"
        @change="handleNameChange"
        placeholder="请输入"
      />
    </template>
  </BasicForm>

  <CollapseContainer
    title="提交设置"
    style="box-shadow: 0 3px 1px -2px #0003, 0 2px 2px #00000024, 0 1px 5px #0000001f"
  >
    <BasicForm @register="registerSubmitStrategyForm" />
  </CollapseContainer>

  <CollapseContainer
    title="重试处理设置"
    class="my-2 retry"
    style="box-shadow: 0 3px 1px -2px #0003, 0 2px 2px #00000024, 0 1px 5px #0000001f"
  >
    <BasicForm @register="registerProcessingStrategyForm" />
  </CollapseContainer>
  <CollapseContainer
    title="轮询设置"
    style="box-shadow: 0 3px 1px -2px #0003, 0 2px 2px #00000024, 0 1px 5px #0000001f"
  >
    <BasicForm @register="registerPollingSettingsForm" />
  </CollapseContainer>
</template>

<script lang="ts" setup>
  import { BasicForm, useForm } from '/@/components/Form';
  import { Input } from 'ant-design-vue';
  import {
    formSchema,
    submitStrategySchema,
    processingStrategySchema,
    pollingSettingsSchema,
  } from './config';
  import { CollapseContainer } from '/@/components/Container/index';

  // const props = defineProps({
  //   record: { type: Object },
  // });

  const emit = defineEmits(['handleNameChange']);

  const [registerForm, { validate, getFieldsValue, setFieldsValue }] = useForm({
    schemas: formSchema,
    showActionButtonGroup: false,
  });

  const [
    registerSubmitStrategyForm,
    {
      validate: validateSubmitStrategy,
      getFieldsValue: getFieldsValueSubmitStrategy,
      setFieldsValue: setFieldsValueSubmitStrategy,
    },
  ] = useForm({
    schemas: submitStrategySchema,
    showActionButtonGroup: false,
    baseColProps: { span: 12 },
    wrapperCol: { span: 18 },
  });
  const [
    registerProcessingStrategyForm,
    {
      validate: validateProcessingStrategy,
      setFieldsValue: setFieldsValueProcessingStrategy,
      getFieldsValue: getFieldsValueProcessingStrategy,
    },
  ] = useForm({
    schemas: processingStrategySchema,
    showActionButtonGroup: false,
    // baseColProps: { span: 12 },
    // wrapperCol: { span: 18 },
  });
  const [
    registerPollingSettingsForm,
    {
      validate: validatePollingSettings,
      getFieldsValue: getFieldsValuePollingSettings,
      setFieldsValue: setFieldsValuePollingSettings,
    },
  ] = useForm({
    schemas: pollingSettingsSchema,
    showActionButtonGroup: false,
    // baseColProps: { span: 12 },
    // wrapperCol: { span: 18 },
  });

  const validateAll = async () => {
    await validate();
    await validateSubmitStrategy();
    await validateProcessingStrategy();
    await validatePollingSettings();
  };

  const getAllFieldsValue = () => {
    const { name, description, customProperties, nameOnly, topic } = getFieldsValue() || {};
    const additionalInfo = { description, customProperties };
    const processingStrategy = getFieldsValueProcessingStrategy();
    const submitStrategy = getFieldsValueSubmitStrategy();
    const values = getFieldsValuePollingSettings();
    const valuesInfo = {
      name,
      nameOnly,
      additionalInfo,
      processingStrategy,
      submitStrategy,
      topic,
      ...values,
    };
    return valuesInfo;
  };

  const setAllFieldsValue = (record: any) => {
    // disabled 只是用来禁用名称输入 Main  HighPriority SequentialByOriginator 默认是禁用  编辑的时候全部也是禁用
    const { name, additionalInfo, processingStrategy, disabled, submitStrategy, topic, ...values } =
      record || {};
    setFieldsValue({ name, ...additionalInfo, disabled, topic });
    setFieldsValueSubmitStrategy(submitStrategy);
    setFieldsValueProcessingStrategy(processingStrategy);
    setFieldsValuePollingSettings({ ...values });
  };

  const handleNameChange = ({ target }) => {
    emit('handleNameChange', target?.value);
  };

  defineExpose({ getAllFieldsValue, setAllFieldsValue, setFieldsValue, validateAll });
</script>

<style lang="less" scoped>
  :deep(.ant-input-number) {
    width: 95% !important;
  }

  :deep(.ant-select) {
    width: 95% !important;
  }

  .retry {
    :deep(.ant-select) {
      width: 97.5% !important;
    }
  }
</style>