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

export default defineComponent({
  name: 'select-resources',
  props: {
    type: {
      type: String,
      default: 'myResources'
    },
    searchGroup: {
      type: Object,
      default: () => ({})
    },
    /** 从哪里使用 */
    from: {
      type: String,
      default: ''
    },
    instrumentId: {
      type: String,
      default: ''
    }
  },
  emits: ['select'],
  setup(props) {
    const { type } = toRefs(props);
    const tabType = ref(type.value);
    const catchStore = useCatchStore();

    onMounted(async () => {
      nextTick(() => {
        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'
            );
          }
        );
      });
      // 获取教材分类列表
      await catchStore.getMusicSheetCategory(true);
    });
    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;
          }}>
          {props.from !== 'class' && (
            <NTabPane name="relateResources" tab={'相关资源'}>
              <SelectItem
                type="relateResources"
                searchGroup={props.searchGroup}
                from={props.from}
                instrumentId={props.instrumentId}
              />
            </NTabPane>
          )}
          <NTabPane
            name="shareResources"
            tab={props.from === 'class' ? '共享曲目' : '共享资源'}>
            <SelectItem
              type="shareResources"
              from={props.from}
              searchGroup={props.searchGroup}
              instrumentId={props.instrumentId}
            />
          </NTabPane>
          <NTabPane
            name="myResources"
            tab={props.from === 'class' ? '我的曲目' : '我的资源'}>
            <SelectItem
              type="myResources"
              from={props.from}
              searchGroup={props.searchGroup}
              instrumentId={props.instrumentId}
            />
          </NTabPane>

          <NTabPane name="myCollect" tab="我的收藏">
            <SelectItem
              type="myCollect"
              from={props.from}
              searchGroup={props.searchGroup}
              instrumentId={props.instrumentId}
            />
          </NTabPane>
        </NTabs>
      </div>
    );
  }
});