import {
  App,
  computed,
  defineComponent,
  onMounted,
  provide,
  ref,
  toRef
} from 'vue';

// @ts-ignore
import style from './style/index.module.less';
import {
  drawerKey,
  filterLeftMountedKey,
  filterSecondMountedKey,
  filterSecondOpenKey,
  mainMountedKey,
  tableMountedKey,
  updateDrawerKey
} from './utils/key';

const Tl = defineComponent({
  name: 'Tl',
  props: {
    fixed: { type: Boolean, default: true },
    drawer: { type: Boolean, default: false }
  },
  emits: ['update:drawer'],
  setup(props, { attrs, slots, emit }) {
    const mainMounted = ref(false);
    const filterSecondMounted = ref(false);
    const filterSecondOpen = ref(false);
    const filterLeftMounted = ref(false);

    provide(mainMountedKey, mainMounted);
    provide(filterSecondMountedKey, filterSecondMounted);
    provide(filterSecondOpenKey, filterSecondOpen);
    provide(filterLeftMountedKey, filterLeftMounted);

    provide(drawerKey, toRef(props, 'drawer'));
    provide(updateDrawerKey, (val: boolean) => {
      emit('update:drawer', val);
    });

    const id = `table-layout-${+new Date()}`;

    const clsFixed = computed(() => (props.fixed ? style['fixed'] : ''));

    /**
     * main 被挂载，样式要做出改变
     */
    const clsMainMounted = computed(
      () =>
        `${
          mainMounted.value
            ? ''
            : 'flex flex-col px-[32px] py-[24px] !bg-[#fff]'
        }`
    );

    const clsHasDrawer = computed(() => {
      return `${props.drawer ? 'flex table-layout--has-drawer' : ''}`;
    });

    const cls = computed(() => {
      return `${style['table-layout']} table-layout h-full bg-[#f5f6f9] ${clsHasDrawer.value} ${clsFixed.value} ${clsMainMounted.value}`;
    });

    return () => (
      <div id={id} class={cls.value}>
        {slots.default?.()}
      </div>
    );
  }
});
export default Tl as typeof Tl & {
  install: (app: App, ...options: any[]) => any;
};
