import {
  filterCustomSwitchKey,
  filterSecondMountedKey,
  filterSecondOpenKey
} from '../utils/key';
import { defineComponent, inject, onUnmounted, Ref, Transition } from 'vue';

const FilterSecond = defineComponent({
  props: {
    visible: {}
  },
  emits: ['update:visible'],
  setup(props, { slots }) {
    const filterSecondOpen = inject<Ref<boolean>>(filterSecondOpenKey)!;
    const filterSecondMounted = inject<Ref<boolean>>(filterSecondMountedKey)!;
    const filterCustomSwitch = inject<Ref<boolean>>(filterCustomSwitchKey)!;

    // 通知父组件这个插件被挂载
    filterSecondMounted.value = true;

    // 被卸载时通知父组件
    onUnmounted(() => {
      filterSecondMounted.value = false;
    });

    // 外部对 visible 进行维护，表示内部不维护
    if (props.visible !== undefined) filterCustomSwitch.value = true;

    return () => (
      <Transition name="filter-second-fade">
        <div
          v-show={
            // 如果是组件内部收敛的按钮 filterSecondOpen 来控制，如果是外部控制的按钮 visible 来控制
            filterSecondOpen.value || props.visible
          }
          class="table-layout__filter-second"
        >
          <a-form layout="inline">{slots.default?.()}</a-form>
        </div>
      </Transition>
    );
  }
});

export { FilterSecond };
