<template>
  <CollapseContainer title="执行条件" style="background-color: #eeeeee">
    <BasicForm
      style="display: inline-block"
      layout="inline"
      :actionColOptions="{ span: 24 }"
      :labelWidth="100"
      :showResetButton="false"
      :showSubmitButton="false"
      autoFocusFirstItem
      labelAlign="left"
      @register="register"
    >
      <template #add="{ field }">
        <br />
        <Button
          style="margin-left: -575px; margin-top: 15px"
          v-if="Number(field) === 0"
          @click="add"
          type="primary"
          >+新增执行条件</Button
        >
        <br />
        <Button
          style="margin-left: -415px; margin-top: -15px"
          v-if="field > 0"
          @click="add"
          type="primary"
          >+新增执行条件</Button
        >
        <Button style="margin-left: 10px" v-if="field > 0" @click="del(field)" type="primary"
          >删除</Button
        >
        <br />
      </template>
    </BasicForm>
  </CollapseContainer>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { CollapseContainer } from '/@/components/Container/index';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { Input } from 'ant-design-vue';
  import { Button } from '/@/components/Button';
  import { useConditionDrawerSchema } from '../config.d';

  export default defineComponent({
    components: { CollapseContainer, BasicForm, [Input.name]: Input, Button },
    setup() {
      const formData = ref([]);
      const [register, { appendSchemaByField, removeSchemaByFiled, validate }] = useForm({
        labelWidth: 100,
        schemas: useConditionDrawerSchema,
        actionColOptions: { span: 24 },
      });

      async function handleSubmit() {
        try {
          const data = await validate();
          formData.value = data;
          console.log(formData.value);
        } catch (e) {
          console.log(e);
        }
      }
      const n = ref(1);
      function add() {
        appendSchemaByField(
          {
            field: `field${n.value}a`,
            component: 'ApiSelect',
            label: '',
            componentProps: {
              placeholder: '请选择',
            },
            colProps: {
              span: 8,
              offset: 1,
            },
            required: true,
          },
          ''
        );
        appendSchemaByField(
          {
            field: `field${n.value}b`,
            component: 'Input',
            label: '',
            componentProps: {
              placeholder: '请输入',
            },
            colProps: {
              span: 8,
              offset: 1,
            },
            required: true,
          },
          ''
        );
        appendSchemaByField(
          {
            field: `field${n.value}c`,
            component: 'ApiSelect',
            label: '',
            componentProps: {
              placeholder: '请选择',
            },
            colProps: {
              span: 8,
            },
            required: true,
          },
          ''
        );
        appendSchemaByField(
          {
            field: `field${n.value}d`,
            component: 'ApiSelect',
            label: '',
            componentProps: {
              placeholder: '请选择',
            },
            colProps: {
              span: 8,
            },
            required: true,
          },
          ''
        );
        appendSchemaByField(
          {
            field: `field${n.value}e`,
            component: 'ApiSelect',
            label: '',
            componentProps: {
              placeholder: '请选择',
            },
            colProps: {
              span: 8,
            },
            required: true,
          },
          ''
        );
        appendSchemaByField(
          {
            field: `field${n.value}f`,
            component: 'Input',
            label: '',
            componentProps: {
              placeholder: '请输入',
            },
            colProps: {
              span: 8,
            },
            required: true,
          },
          ''
        );
        appendSchemaByField(
          {
            field: `${n.value}`,
            component: 'ApiSelect',
            label: ' ',
            colProps: {
              span: 8,
              offset: 1,
            },
            slot: 'add',
          },
          ''
        );
        n.value++;
      }

      function del(field) {
        removeSchemaByFiled([
          `field${field}a`,
          `field${field}b`,
          `field${field}c`,
          `field${field}d`,
          `field${field}e`,
          `field${field}f`,
          `field${field}g`,
          `field${field}h`,
          `${field}`,
        ]);
        n.value--;
      }

      return { register, handleSubmit, add, del, formData };
    },
  });
</script>