import { defineComponent, reactive, onMounted, ref } from 'vue';
import styles from './index.module.less';
import { NButton, NForm, NFormItem, NImage, NSpace } from 'naive-ui';
import TheSearch from '/src/components/TheSearch';
import { useCatchStore } from '/src/store/modules/catchData';
import { useThrottleFn } from '@vueuse/core';
import isCollaose from '/src/views/natural-resources/images/isCollaose.png';

export default defineComponent({
  name: 'search-group',
  emits: ['search', 'add'],
  setup(props, { emit }) {
    const catchStore = useCatchStore();
    const forms = reactive({
      name: '',
      musicSheetCategoriesId: null
    });

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

    const throttledFn = useThrottleFn(() => {
      onSearch();
    }, 500);

    const collapseWrapRef = ref();
    const divDomList = ref([] as any);
    const orginHeight = ref(0);
    const hiddenHeight = ref(0);
    const line = ref(0);
    const isCollapse = ref(false);
    const loadingCollapse = ref(false); // 是否加载完成
    const musicCateRef = (el: any) => {
      if (el?.selfElRef) {
        divDomList.value.push(el.selfElRef.parentNode);
      }
    };
    const setCollapse = (flag: boolean) => {
      isCollapse.value = flag;
      getLive();
    };
    const getLive = () => {
      try {
        divDomList.value = [...new Set(divDomList.value)];
        let offsetLeft = -1;
        divDomList.value.forEach((item: any, index: number) => {
          if (index === 0) {
            line.value = 1;
            offsetLeft = item.offsetLeft;
          } else if (item.offsetLeft === offsetLeft && index != 0) {
            // 如果某个标签的offsetLeft和第一个标签的offsetLeft相等  说明增加了一行
            line.value++;
          }
          if (!isCollapse.value) {
            if (line.value > 1) {
              //从第3行开始 隐藏标签
              item.style.display = 'none';

              // 显示展开按钮  class名chu是在前面动态添加的
            } else {
              item.style.display = 'block';
            }
          } else {
            item.style.display = 'block';
          }
        });
        loadingCollapse.value = true;
      } catch {
        //
      }
    };

    onMounted(async () => {
      // 获取教材分类列表
      await catchStore.getMusicSheetCategory();
      // 获取声部列表
      await catchStore.getSubjects();

      orginHeight.value = collapseWrapRef.value.offsetHeight;
      hiddenHeight.value = collapseWrapRef.value.offsetHeight / line.value;
      // 默认隐藏
      getLive();
    });
    return () => (
      <div class={styles.searchGroup}>
        <NForm labelAlign="left" labelPlacement="left">
          <div class={styles.collapsSection}>
            <NFormItem label="教材：">
              <div
                class={[
                  styles.collapseWrap,
                  loadingCollapse.value ? '' : styles.hideButton,
                  isCollapse.value ? '' : styles.isHidden
                ]}
                ref={collapseWrapRef}>
                <NSpace class={[styles.spaceSection]}>
                  {catchStore.getAllMusicCategories.map((music: any) => (
                    <NButton
                      ref={musicCateRef}
                      secondary={forms.musicSheetCategoriesId === music.id}
                      quaternary={forms.musicSheetCategoriesId !== music.id}
                      strong
                      focusable={false}
                      type={
                        forms.musicSheetCategoriesId === music.id
                          ? 'primary'
                          : 'default'
                      }
                      onClick={() => {
                        forms.musicSheetCategoriesId = music.id;
                        throttledFn();
                      }}>
                      {music.name}
                    </NButton>
                  ))}
                  {line.value > 1 && (
                    <div
                      style={{
                        height: 'var(--n-blank-height)',
                        position: 'absolute',
                        display: 'flex',
                        alignItems: 'center'
                      }}
                      onClick={() => {
                        setCollapse(!isCollapse.value);
                      }}>
                      <NImage
                        previewDisabled
                        src={isCollaose}
                        class={[
                          styles.collaoseBtn,
                          isCollapse.value ? styles.isStart : ''
                        ]}></NImage>
                    </div>
                  )}
                </NSpace>
              </div>
            </NFormItem>
          </div>
          {/* <NFormItem label="教材：">
            <NSpace class={styles.spaceSection}>
              {catchStore.getAllMusicCategories.map((music: any) => (
                <NButton
                  secondary={forms.musicSheetCategoriesId === music.id}
                  quaternary={forms.musicSheetCategoriesId !== music.id}
                  strong
                  focusable={false}
                  type={
                    forms.musicSheetCategoriesId === music.id
                      ? 'primary'
                      : 'default'
                  }
                  onClick={() => {
                    forms.musicSheetCategoriesId = music.id;
                    throttledFn();
                  }}>
                  {music.name}
                </NButton>
              ))}
            </NSpace>
          </NFormItem> */}
          <TheSearch
            class={styles.inputSearch}
            round
            onSearch={(val: string) => {
              forms.name = val;
              throttledFn();
            }}
          />
        </NForm>
      </div>
    );
  }
});
