<template>
  <BasicModal
    v-bind="$attrs"
    width="55rem"
    @register="register"
    :title="getTitle"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <BasicForm :showResetButton="false" :showSubmitButton="false" @register="registerForm" />
    <template v-if="getIsWhereType">
      <div><p style="text-align: center">未配置筛选器</p></div>
      <!-- <div><p style="text-align: left">筛选器</p></div> -->
      <div style="width: 50vw; height: 5vh; display: flex; justify-content: space-between">
        <div style="width: 5vw; height: 2vh">
          <p v-for="(item, index) in n" :key="index"></p>
        </div>
        <div style="width: 45vw; height: 2vh">
          <BasicForm :showActionButtonGroup="false" @register="registerFilter">
            <template #add="{ field }">
              <!-- <Button v-if="Number(field) === 0" @click="add">添加</Button> -->
              <Button v-if="Number(field) === 0" disabled @click="handleAdd">添加复合器</Button>
              <!-- <Button v-if="Number(field) === 0" @click="handleEdit">编辑复合器</Button> -->
              <Button v-if="field > 0" @click="del(field)">-</Button>
            </template>
          </BasicForm>
        </div>
      </div>
      <AddkeyValueModal @register="registerModal" />
    </template>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, computed, unref, watch } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { useModal } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form';
  import { formSchema, isWhereType } from './config';
  import { Button } from '/@/components/Button';
  import AddkeyValueModal from './cpns/index.vue';

  export default defineComponent({
    name: 'index',
    components: { BasicModal, BasicForm, Button, AddkeyValueModal },
    emits: ['success', 'register'],
    setup(_, { emit }) {
      const getIsWhereType: any = ref(null);
      const isUpdate = ref(true);
      const getValue: any = ref(null);
      const setId: any = ref(1);
      const getKeyAndValArr = ref<[]>([]);

      const getTitle = computed(() => (!unref(isUpdate) ? '新增键名筛选器' : '编辑键名筛选器'));
      const [registerForm, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
        labelWidth: 120,
        schemas: formSchema,
      });
      const [registerFilter, { appendSchemaByField, removeSchemaByFiled }] = useForm({
        // schemas: [
        //   {
        //     field: 'field0a',
        //     component: 'Input',
        //     label: '字段0',
        //     colProps: {
        //       span: 8,
        //     },
        //     required: true,
        //   },
        //   {
        //     field: 'field0b',
        //     component: 'Input',
        //     label: '字段0',
        //     colProps: {
        //       span: 8,
        //     },
        //     required: true,
        //   },
        //   {
        //     field: '0',
        //     component: 'Input',
        //     label: ' ',
        //     colProps: {
        //       span: 8,
        //     },
        //     slot: 'add',
        //   },
        // ],
        labelWidth: 100,
        actionColOptions: { span: 24 },
      });
      const [register, { closeModal }] = useModalInner(async (data) => {
        isUpdate.value = !!data?.isUpdate;
        if (!unref(isUpdate)) {
          resetFields();
          getIsWhereType.value = 100;
        }
        if (unref(isUpdate)) {
          setFieldsValue({
            ...data.record,
          });
        }
      });

      const handleSubmit = () => {
        let mapGetKeyAndValArr = [];
        if (!unref(isUpdate)) {
          getValue.value = getFieldsValue();
          getKeyAndValArr.value.push(getValue.value);
          mapGetKeyAndValArr = getKeyAndValArr.value.map((m: any) => {
            return {
              key: {
                type: m.type,
                key: m.key1,
              },
              valueType: m.type1,
              value: m.value1,
              predicate: {
                type: m.type1,
                operation: m.operation,
                value: {
                  defaultValue: m.value1,
                },
              },
            };
          });

          setId.value += 1;
          getValue.value.id = setId.value;
          // emit('success', getValue.value);
          // closeModal();
        } else {
          getValue.value = getFieldsValue();
          getKeyAndValArr.value.push(getValue.value);
          mapGetKeyAndValArr = getKeyAndValArr.value.map((m: any) => {
            return {
              key: {
                type: m.type,
                key: m.value1,
              },
              valueType: m.type1,
              value: m.value1,
              predicate: {
                type: m.type1,
                operation: m.operation,
                value: {
                  defaultValue: m.value1,
                },
              },
            };
          });
          setId.value += 9999;
          getValue.value.id = setId.value;
        }
        emit('success', mapGetKeyAndValArr, getValue.value);
        closeModal();
      };
      const handleCancel = () => {
        return;
      };

      const n = ref(1);

      function add() {
        appendSchemaByField(
          {
            field: `field${n.value}a`,
            component: 'Input',
            label: '字段' + n.value,
            colProps: {
              span: 8,
            },
            required: true,
          },
          ''
        );
        appendSchemaByField(
          {
            field: `field${n.value}b`,
            component: 'Input',
            label: '字段' + n.value,
            colProps: {
              span: 8,
            },
            required: true,
          },
          ''
        );

        appendSchemaByField(
          {
            field: `${n.value}`,
            component: 'Input',
            label: ' ',
            colProps: {
              span: 8,
            },
            slot: 'add',
          },
          ''
        );
        n.value++;
      }

      function del(field) {
        removeSchemaByFiled([`field${field}a`, `field${field}b`, `${field}`]);
        n.value--;
      }
      watch(isWhereType, (v) => {
        switch (v) {
          case 'STRING':
            getIsWhereType.value = v;
            break;
          case 'NUMERIC':
            getIsWhereType.value = v;
            break;
          case 'BOOLEAN':
            getIsWhereType.value = v;
            break;
          case 'COMPLEX':
            getIsWhereType.value = v;
            break;
          default:
            getIsWhereType.value = 100;
        }
      });
      const [registerModal, { openModal }] = useModal();
      //复合器弹窗
      const addPlusIfEdit = ref(1);
      const handleAdd = () => {
        openModal(true, {
          isUpdate: false,
          addPlusIfEdit: addPlusIfEdit.value++,
        });
      };
      const handleEdit = () => {
        openModal(true, {
          isUpdate: true,
        });
      };

      return {
        getIsWhereType,
        registerModal,
        handleEdit,
        handleAdd,
        n,
        add,
        del,
        registerFilter,
        registerForm,
        handleCancel,
        handleSubmit,
        register,
        getTitle,
      };
    },
  });
</script>