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

// @ts-ignore
import style from './style/index.module.less';

const Tl = defineComponent({
  name: 'Tl',
  props: {
    fixed: { type: Boolean, default: true },
    drawer: { type: Boolean, default: false },
    titleIndex: { type: Number, default: 0 },
    actionIndex: { type: [Number, String], default: 'last' },
    buttonIndex: { type: Number, default: -1 }
  },
  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('tl-mainMounted', mainMounted);
    provide('tl-filterSecondMounted', filterSecondMounted);
    provide('tl-filterSecondOpen', filterSecondOpen);
    provide('tl-filterLeftMounted', filterLeftMounted);

    provide('tl-drawer', toRef(props, 'drawer'));
    provide('tl-updateDrawer', (val: boolean) => {
      emit('update:drawer', val);
    });

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

    onMounted(() => {});

    const clsFixed = computed(() => (props.fixed ? style['fixed'] : ''));
    // const clsDrawer = computed(() =>
    //   props.drawer ? style['table-layout--has-drawer'] : ''
    // );
    const clsMainMounted = computed(
      () => `${mainMounted.value ? '' : 'flex flex-col'}`
    );
    const clsIndexBlock = computed(() => {
      const titleIndex = `tl-block-title--index-${props.titleIndex + 1}`;
      const actionIndex = `tl-block-action--index-${
        props.actionIndex === 'last'
          ? 'last'
          : (props.actionIndex as number) + 1
      }`;
      const buttonIndex = `${
        props.buttonIndex >= 0
          ? `tl-block-button--index-${props.buttonIndex + 1}`
          : ''
      }`;
      return `${
        props.drawer
          ? `flex table-layout--has-drawer ${titleIndex} ${actionIndex} ${buttonIndex}`
          : ''
      }`;
    });

    const clsTableWidthAuto = computed(() => {
      if (props.drawer) {
        const $tl = document.getElementById(id)!;
        if ($tl) {
          // table 有设置了 :scroll 属性的才会有这个元素 .ant-table-body > table
          const $table = $tl.querySelector('.ant-table-body > table');
          // 被设置了宽度，就改成 auto
          // @ts-ignore
          return $table?.style?.width ? 'tl-table-width-auto' : '';
        }
        return '';
      }
      return '';
    });

    /**
     * 有配置抽屉的话在样式上就需要作出改变
     */
    const clsHasDrawer = computed(() => {
      return mainMounted.value ? '' : 'px-[32px] py-[24px] bg-[#ffffff]';
    });

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

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