import {
  App,
  computed,
  defineComponent,
  onMounted,
  PropType,
  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 },
    visibleColumns: {
      type: Array as PropType<number[]>,
      default: () => [0, 1, 2]
    }
    // 舍弃
    // 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'] : ''));

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

    // 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}`
    //   //     : ''
    //   // }`;

    //   return `${
    //     props.drawer ? `flex table-layout--has-drawer ${titleIndex}` : ''
    //   }`;
    // });

    /**
     * 显示几列
     */
    const clsVisibleColumns = computed(() => {
      const cls = props.visibleColumns
        .map(_ => `tl-visible-column--index-${_ + 1}`)
        .join(' ');
      return `${props.drawer ? `${cls}` : ''}`;
    });

    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 `${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} ${clsVisibleColumns.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;
};
