<template>
  <BasicForm
    :key="refreshKey"
    v-model:value="formData"
    class="page-search-form"
    ref="formRef"
    submitOnReset
    :fieldMapToTime="fieldMapToTime"
    v-bind="{
      tableWidth,
      isSearch: true,
      searchWidth,
      showAdvancedButton: true,
      labelWidth: 100,
      compact: true,
      schemas: schemas,
    }"
    :class="[advanceRight ? 'w-full !absolute top-0 left-0 z-50' : '']"
    :tableAction="tableAction"
    @register="registerForm"
    @submit="handleSearchInfoChange"
    @advanced-change="() => {}"
  />
</template>
<script setup lang="ts">
  import { computed, inject, onMounted, ref, watch } from 'vue';
  import { TableActionType } from '/@/components/Table/src/types/table';
  import { BasicForm, FieldMapToTime, FormSchema, useForm } from '/@/components/Form';

  const props = defineProps({
    schemas: {
      type: Array<FormSchema>,
      default: () => [],
    },
    tableWidth: {
      type: Number,
      default: 0,
    },
    tableAction: {
      type: Object as PropType<TableActionType>,
      default: () => {},
    },
    registerForm: {
      type: Function,
      default: () => {},
    },
    slots: {
      type: Object as any,
      default: () => {
        return {};
      },
    },
    fieldMapToTime: {
      type: Array as PropType<FieldMapToTime>,
      default: () => [],
    },
    compkey: String,
  });
  const emit = defineEmits(['refreshComp']);
  const formData = ref<any>({});
  const refreshKey = ref(1);
  watch(
    () => formData.value,
    (val) => {
      if (props.compkey) widgetFormModel.value[props.compkey] = val;
    },
    { deep: true },
  );
  watch(
    () => props.schemas,
    (val) => {
      // refreshKey.value++;
      updateSchema(val);
    },
  );

  const widgetFormModel = inject('widgetFormModel', ref<any>({}));
  const searchWidth = computed(() => {
    return props.tableWidth;
  });

  const formRef = ref();
  const [registerForm, { updateSchema }] = useForm();
  const formSlots = {};
  Object.keys(props.slots).forEach((key) => {
    if (key.startsWith('form-')) {
      formSlots[key] = props.slots[key];
    }
  });
  const advanceRight = computed(() => {
    if (!formRef.value) return false;
    let advanceState = formRef.value!.advanceState;
    if (advanceState.isAdvanced && !advanceState.hideAdvanceBtn) {
      return true;
    } else {
      return false;
    }
  });
  onMounted(() => {
    props.schemas.forEach((o) => {
      if (o.component == 'XjrSelect') {
        o.componentProps.getPopupContainer = () => document.body;
      }
    });
  });
  function handleSearchInfoChange(v) {
    if (props.compkey) widgetFormModel.value[props.compkey] = v;
    emit('refreshComp');
  }
</script>
<style lang="less">
  .page-search-form {
    .advanceRow {
      width: calc(100% - 224px);
    }

    .normalRow {
      .advanceRow,
      .basicRow {
        .ant-col {
          flex: none;
          max-width: none;
          width: auto !important;
        }

        .ant-form-item-label {
          width: auto !important;
          max-width: 120px;
        }

        .ant-form-item-control {
          .ant-input-box,
          .ant-select {
            width: 180px !important;
          }

          .ant-picker-range {
            width: 200px !important;
          }
        }
      }
    }

    .ant-form-item:not(.ant-form-item-with-help) {
      margin-bottom: 0;
    }

    .suspensionRow {
      .ant-form-item:not(.ant-form-item-with-help) {
        margin-bottom: 8px;
      }
    }

    .advanceCol {
      padding-right: 0;
    }

    .ant-form-item-label {
      label {
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        line-height: 32px;
        margin-left: 16px;
      }
    }

    .arrow-btn {
      margin-right: 16px;
    }
  }
</style>
