classroom-instruments/src/views/prepare-lessons/model/source-musician/components/list/search-group-resources.tsx

import { PropType, defineComponent, onMounted, reactive, ref } from 'vue';
import styles from './index.module.less';
import { NButton, NCarousel, NCarouselItem, NImage, NSpace } from 'naive-ui';
import TheSearch from '/src/components/TheSearch';
import iconSlideRight from '/src/views/prepare-lessons/images/icon-slide-right.png';
import { nextTick } from 'process';
export default defineComponent({
  name: 'search-group',
  props: {
    categoryChildList: {
      type: Array as PropType<any>,
      default: () => []
    },
    wikiCategoryId: {
      type: String,
      default: ''
    }
  },
  emits: ['search', 'add'],
  expose: ['init'],
  setup(props, { emit }) {
    // const catchStore = useCatchStore();
    const forms = reactive({
      currentIndex: 0,
      keyword: '',
      wikiCategoryId: props.wikiCategoryId || '',
      maxIndex: 0
    });

    const state = reactive({
      showSlide: false
    });

    const onSearch = () => {
      emit('search', forms);
    };

    const carouselRef = ref();
    const onChangeSlide = (type: string) => {
      if (type === 'left') {
        carouselRef.value?.prev();
      } else if (type === 'right') {
        carouselRef.value?.next();
      }
    };
    onMounted(async () => {
      // 获取教材分类列表
      // await catchStore.getMusicSheetCategory()
      // nextTick(() => {
      //   carouselRef.value?.to(100);
      // });
      nextTick(() => {
        // carouselRef.value?.to(100);

        // 最外层宽度
        const carouselContainer = document.querySelector('.carouselContainer');
        const carouselContainerWidth =
          (carouselContainer &&
            carouselContainer.getBoundingClientRect().width) ||
          0;
        const slideDoms = document.querySelectorAll('.n-carousel__slide');
        let slideWidth = 0;
        slideDoms.forEach(doom => {
          const rect = doom.getBoundingClientRect();
          slideWidth += rect.width;
        });
        if (slideWidth >= carouselContainerWidth) {
          state.showSlide = true;
        }
      });
    });
    return () => (
      <div class={styles.searchGroup}>
        <div class={[styles.searchCatatory]}>
          <NSpace size="small" class={styles.btnType}>
            {props.categoryChildList.length > 0 ? (
              <NButton
                type={
                  forms.wikiCategoryId === props.wikiCategoryId
                    ? 'primary'
                    : 'default'
                }
                secondary={
                  forms.wikiCategoryId === props.wikiCategoryId ? false : true
                }
                round
                size="small"
                focusable={false}
                onClick={() => {
                  forms.wikiCategoryId = props.wikiCategoryId;
                  onSearch();
                }}>
                全部
              </NButton>
            ) : (
              ''
            )}
            <div class={styles.carouselGroup}>
              <NCarousel
                ref={carouselRef}
                slidesPerView={'auto'}
                loop={false}
                class={[styles.carouselContainer, 'carouselContainer']}
                showDots={false}
                // spaceBetween={20}
                draggable={state.showSlide}
                currentIndex={forms.currentIndex}
                onUpdate:currentIndex={(val: any) => {
                  //
                  // if (val > forms.maxIndex) {
                  //   forms.maxIndex = val;
                  //   carouselRef.value?.to(0);
                  // }
                  forms.currentIndex = val;
                }}>
                {props.categoryChildList.map((item: any) => (
                  <NCarouselItem>
                    <NButton
                      type={
                        forms.wikiCategoryId === item.id ? 'primary' : 'default'
                      }
                      secondary={
                        forms.wikiCategoryId === item.id ? false : true
                      }
                      round
                      size="small"
                      focusable={false}
                      onClick={() => {
                        forms.wikiCategoryId = item.id;
                        onSearch();
                      }}>
                      {item.name}
                    </NButton>
                  </NCarouselItem>
                ))}
              </NCarousel>

              {state.showSlide && (
                <NSpace class={styles.swipeControll}>
                  <div onClick={() => onChangeSlide('left')}>
                    <NImage
                      previewDisabled
                      class={[
                        styles.leftIcon
                        // forms.currentIndex === 0 && styles.disabled
                      ]}
                      src={iconSlideRight}
                    />
                  </div>
                  <div onClick={() => onChangeSlide('right')}>
                    <NImage
                      // class={
                      //   // forms.currentIndex == forms.openTableList.length - 4 &&
                      //   styles.disabled
                      // }
                      previewDisabled
                      src={iconSlideRight}
                    />
                  </div>
                </NSpace>
              )}
            </div>
          </NSpace>
          <TheSearch
            class={styles.inputSearch}
            placeholder="请输入音乐家关键词"
            round
            onSearch={(val: string) => {
              forms.keyword = val;
              onSearch();
            }}
          />
        </div>
      </div>
    );
  }
});