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

const FilterSecond = defineComponent({
  setup(props, { slots }) {
    const filterSecondOpen = inject<Ref<boolean>>(filterSecondOpenKey)!;
    const filterSecondMounted = inject<Ref<boolean>>(filterSecondMountedKey)!;

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

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

    return () => (
      <Transition name="filter-second-fade" appear>
        {/* {filterSecondOpen.value ? (
          <div class="table-layout__filter-second">
            <a-form layout="inline">{slots.default?.()}</a-form>
          </div>
        ) : null} */}
        <div
          v-show={filterSecondOpen.value}
          class="table-layout__filter-second"
        >
          <a-form layout="inline">{slots.default?.()}</a-form>
        </div>
      </Transition>
    );
  }
});

export { FilterSecond };
