import { NTabPane, NTabs } from 'naive-ui';
import { defineComponent, onMounted, ref, toRefs } from 'vue';
import styles from './index.module.less';
import SelectItem from './select-item';
import { useResizeObserver } from '@vueuse/core';

export default defineComponent({
  name: 'select-music',
  props: {
    type: {
      type: String,
      default: 'myResources'
    }
  },
  emits: ['select'],
  setup(props) {
    const { type } = toRefs(props);
    const tabType = ref(type.value);

    onMounted(() => {
      console.log(
        document.querySelector('.select-resource .n-tabs-nav--top'),
        ''
      );
      useResizeObserver(
        document.querySelector(
          '.select-resource .n-tabs-nav--top'
        ) as HTMLElement,
        (entries: any) => {
          const entry = entries[0];
          const { height } = entry.contentRect;
          console.log(height, 'height - 11');
          document.documentElement.style.setProperty(
            '--modal-lesson-tab-height',
            height + 'px'
          );
        }
      );
    });
    return () => (
      <div class={[styles.selectMusic, 'select-resource']}>
        <NTabs
          animated
          value={tabType.value}
          paneClass={styles.paneTitle}
          justifyContent="center"
          paneWrapperClass={styles.paneWrapperContainer}
          onUpdate:value={(val: string) => {
            tabType.value = val;
          }}>
          <NTabPane
            name="myResources"
            tab="我的资源"
            // displayDirective="show:lazy"
          >
            <SelectItem type="myResources" />
          </NTabPane>
          <NTabPane
            name="shareResources"
            tab="共享资源"
            // displayDirective="show:lazy"
          >
            <SelectItem type="shareResources" />
          </NTabPane>
          <NTabPane
            name="myCollect"
            tab="我的收藏"
            // displayDirective="show:lazy"
          >
            <SelectItem type="myCollect" />
          </NTabPane>
        </NTabs>
      </div>
    );
  }
});
