classroom-instruments/src/views/prepare-lessons/model/select-resources/select-item/resource-search-group/index.tsx

import {
  PropType,
  defineComponent,
  nextTick,
  onMounted,
  reactive,
  ref,
  toRef,
  toRefs,
  watch
} from 'vue';
import styles from './index.module.less';
import {
  NButton,
  NForm,
  NFormItem,
  NImage,
  NPopselect,
  NSpace
} from 'naive-ui';
import { resourceTypeArray2 } from '/src/utils/searchArray';
import { useCatchStore } from '/src/store/modules/catchData';
import { useThrottleFn } from '@vueuse/core';
import TheSearch from '/src/components/TheSearch';
import isCollaose from '/src/views/natural-resources/images/isCollaose.png';
import { audioPlayType } from '/src/utils/contants';

const ChildNodeSearch = defineComponent({
  name: 'ChildNodeSearch',
  props: {
    activeRow: {
      type: Object,
      default: () => ({})
    },
    list: {
      type: Array,
      default: () => []
    }
  },
  emits: ['selectChildTag'],
  setup(props, { emit }) {
    const { activeRow } = toRefs(props);
    const selectItem = ref({});

    watch(
      () => props.activeRow,
      () => {
        activeRow.value = props.activeRow;
        initActiveRow();
      }
    );

    const initActiveRow = () => {
      if (activeRow.value.activeIndex) {
        const childList = activeRow.value.children || [];
        childList.forEach((subject: any) => {
          if (subject.id === activeRow.value.activeIndex) {
            let children: any;
            let columnName = '';
            if (subject.children) {
              children = [
                {
                  columnName: subject.children[0].columnName,
                  name: '全部',
                  id: ''
                },
                ...subject.children
              ];
              columnName = subject.children[0].columnName;

              selectItem.value = {
                ...subject,
                columnName,
                activeIndex: subject.activeIndex,
                children
              };
            }
          }
        });
      } else {
        selectItem.value = {};
      }
    };

    onMounted(() => {
      initActiveRow();
    });
    return () => (
      <>
        {activeRow.value?.id && (
          <>
            <NFormItem label={activeRow.value.columnName + '：'}>
              <NSpace class={styles.spaceSection}>
                {activeRow.value?.children.map((subject: any) => (
                  <span
                    class={[
                      styles.textBtn,
                      (activeRow.value.activeIndex || '') == subject.id &&
                        styles.textBtnActive
                    ]}
                    onClick={() => {
                      activeRow.value.activeIndex = subject.id;
                      let children: any;
                      let columnName = '';
                      if (subject.children) {
                        children = [
                          {
                            columnName: subject.children[0].columnName,
                            name: '全部',
                            id: ''
                          },
                          ...subject.children
                        ];
                        columnName = subject.children[0].columnName;

                        selectItem.value = {
                          ...subject,
                          columnName,
                          activeIndex: '',
                          children
                        };
                      } else {
                        selectItem.value = {};
                      }
                      emit('selectChildTag', activeRow.value.activeIndex);
                    }}>
                    {subject.name}
                  </span>
                ))}
              </NSpace>
            </NFormItem>

            <ChildNodeSearch
              activeRow={selectItem.value}
              onSelectChildTag={(item: any) => {
                emit('selectChildTag', item || activeRow.value.activeIndex);
              }}
            />
          </>
        )}
      </>
    );
  }
});

export default defineComponent({
  name: 'resource-search-group',
  props: {
    type: {
      type: String as PropType<
        'relateResources' | 'shareResources' | 'myResources' | 'myCollect'
      >,
      default: 'shareResources'
    },
    searchGroup: {
      type: Object,
      default: () => ({})
    },
    subjectId: {
      type: String,
      default: null
    }
  },
  emits: ['search'],
  setup(props, { emit }) {
    const subjectId = toRef(props.subjectId);
    const catchStore = useCatchStore();
    const forms = reactive({
      type: 'IMG', //
      name: '',
      subjectId: subjectId.value as any,
      // grade: null as any,
      audioPlayTypes: props.type == 'myResources' ? 'PLAY' : '',
      bookVersionId: null as any,
      materialTagId: null
      // musicSheetCategoriesId: null as any
    });
    const state = reactive({
      tempSubjectId: null,
      gradeList: [] as any[],
      musicCategory: [] as any
    });
    const data = reactive({
      selectParents: {}, // 选中的数据
      tags: [] as any[],
      tagActiveId: '' as any,
      tagActive: {} as any,
      childSelectId: null as any
    });

    const resourceType = ref([] as any);
    const audioPlayTypeList = ref([] as any);

    const onSearch = (type?: string) => {
      emit(
        'search',
        {
          ...forms,
          subjectId: forms.audioPlayTypes !== 'SING' ? forms.subjectId : null,
          audioPlayTypes: forms.audioPlayTypes
            ? forms.audioPlayTypes === 'PLAY_SING'
              ? ['PLAY', 'SING']
              : [forms.audioPlayTypes]
            : [],
          bookVersionId: data.childSelectId || data.tagActiveId
        },
        type
      );
    };

    const throttleFn = 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 {
        //
      }
    };

    const selectChildObj = (item: any) => {
      const obj: any = {};
      item?.forEach((child: any) => {
        if (child.id === forms.subjectId) {
          obj.selected = true;
          obj.name = child.name;
        }
      });
      return obj;
    };

    const _initTags = () => {
      const tags = catchStore.getMusicTagTree;
      data.tags = [
        {
          columnName: tags[0].columnName,
          name: '全部',
          id: ''
        },
        ...tags
      ];
      data.tagActiveId = data.tags[0].id;
    };

    const changeTag = (item: any) => {
      data.tagActiveId = item.id;
      data.childSelectId = null;
      let children: any;
      let columnName = '';
      if (item.children) {
        children = [
          {
            columnName: item.children[0].columnName,
            name: '全部',
            id: ''
          },
          ...item.children
        ];
        columnName = item.children[0].columnName;
        data.selectParents = {
          ...item,
          columnName,
          activeIndex: '',
          children
        };
      } else {
        data.selectParents = {};
      }

      onSearch();
    };

    /** 默认选中第一个声部 */
    const formatFirstSubject = () => {
      const tempSubjects = catchStore.getSubjectInstrumentOnly;
      if (tempSubjects.length > 0) {
        const firstSubject = tempSubjects[0];
        if (firstSubject.instruments && firstSubject.instruments.length > 1) {
          state.tempSubjectId = firstSubject.instruments[0]?.value;
          forms.subjectId = firstSubject.instruments[0]?.value;
        } else {
          forms.subjectId = firstSubject.value;
        }
      }
    };

    // const mapList: any = new Map();
    const formatParentId = (id: any, list: any, ids = [] as any) => {
      for (const item of list) {
        if (item.children && item.children.length > 0) {
          const cIds: any = formatParentId(id, item.children, [
            ...ids,
            item.id
          ]);
          if (cIds.includes(id)) {
            return cIds;
          }
        }
        if (item.id === id) {
          return [...ids, id];
        }
        // mapList[item.id] = item.parentTagId;
        // mapList.push()
      }
      return ids;
    };

    const formatParentCurrentValue = (ids: any, list: any) => {
      for (const item of list) {
        if (ids.includes(item.id)) {
          if (item.children && item.children.length > 0) {
            let lastId: any;
            item.children.forEach((child: any) => {
              if (ids.includes(child.id)) {
                lastId = child.id;
              }
            });
            item.activeIndex = lastId;
          }
        }
        if (item.children && item.children.length > 0) {
          formatParentCurrentValue(ids, item.children);
        }
      }
    };

    const formatParentresetValue = (list: any) => {
      for (const item of list) {
        if (item.children && item.children.length > 0) {
          // item.children.forEach(() => {
          //   item.activeIndex = '';
          // });
        }
        item.activeIndex = '';

        if (item.children && item.children.length > 0) {
          formatParentresetValue(item.children);
        }
      }
    };

    onMounted(async () => {
      // 场景
      const tempAudio = Object.keys(audioPlayType).map(key => {
        return {
          value: key,
          name: audioPlayType[key]
        };
      });
      audioPlayTypeList.value = [{ name: '全部', value: '' }, ...tempAudio];
      resourceTypeArray2.forEach((item: any) => {
        resourceType.value.push(item);
      });

      // // 获取教材分类列表
      // await catchStore.getMusicSheetCategory();
      await catchStore.getMusicTagTreeApi();
      _initTags();
      // 获取声部
      await catchStore.getSubjects();
      await catchStore.getMaterialTagsApi();

      forms.subjectId = null;

      // 这里开始
      // musicCateRef
      if (forms.type === 'MUSIC') {
        orginHeight.value = collapseWrapRef.value?.offsetHeight;
        hiddenHeight.value = collapseWrapRef.value?.offsetHeight / line.value;
        // 默认隐藏
        getLive();
      }

      formatFirstSubject();
      console.log(props.searchGroup, 'searchGroup - parent');
      if (props.searchGroup.type) {
        const tempSearchGroup = props.searchGroup;
        forms.type = tempSearchGroup.type || 'MUSIC';
        forms.audioPlayTypes = tempSearchGroup?.audioPlayTypes
          ? tempSearchGroup.audioPlayTypes.join('_')
          : '';

        if (tempSearchGroup.musicalInstrumentId) {
          forms.subjectId = tempSearchGroup.musicalInstrumentId;
        }

        if (tempSearchGroup.bookVersionId) {
          // forms.bookVersionId = tempSearchGroup.bookVersionId || '';
          data.childSelectId = tempSearchGroup.bookVersionId;
          let ids = formatParentId(data.childSelectId, data.tags);
          console.log(ids, 'ids');
          data.tagActiveId = ids[0];
          const index = ids.findIndex((id: any) => id === data.childSelectId);
          // console.log(index, 'id');
          ids = ids.slice(0, index + 1);
          formatParentCurrentValue(ids, data.tags);
          data.tags.forEach((item: any) => {
            if (item.id === data.tagActiveId) {
              let children: any;
              let columnName = '';
              if (item.children) {
                children = [
                  {
                    columnName: item.children[0].columnName,
                    name: '全部',
                    id: ''
                  },
                  ...item.children
                ];
                columnName = item.children[0].columnName;

                let id: any;
                item.children.forEach((item: any) => {
                  if (ids.includes(item.id)) {
                    id = item.id;
                  }
                });

                data.selectParents = {
                  ...item,
                  columnName,
                  activeIndex: id || '',
                  children
                };
              } else {
                data.selectParents = {};
              }
            }
          });
        }
      }
      onSearch('timer');
    });
    return () => (
      <div class={styles.searchGroup}>
        <div class={styles.searchCatatory}>
          <NSpace size="small" class={styles.btnType}>
            {resourceType.value.map((item: any) => (
              <NButton
                type={forms.type === item.value ? 'primary' : 'default'}
                secondary={forms.type === item.value ? false : true}
                round
                size="small"
                focusable={false}
                onClick={() => {
                  forms.type = item.value;
                  forms.subjectId = null;
                  data.tagActiveId = '';
                  data.childSelectId = null;
                  data.selectParents = {};
                  forms.audioPlayTypes =
                    props.type === 'myResources' ? 'PLAY' : '';

                  forms.materialTagId = null
                  formatFirstSubject();
                  onSearch();

                  try {
                    nextTick(() => {
                      if (forms.type === 'MUSIC') {
                        orginHeight.value = collapseWrapRef.value?.offsetHeight;
                        hiddenHeight.value =
                          collapseWrapRef.value?.offsetHeight / line.value;
                        // 默认隐藏
                        getLive();
                      } else {
                        divDomList.value = [];
                      }
                    });
                  } catch {
                    //
                  }
                }}>
                {item.label}
              </NButton>
            ))}
          </NSpace>

          <TheSearch
            class={styles.inputSearch}
            round
            onSearch={(val: string) => {
              forms.name = val;
              throttleFn();
            }}
          />
        </div>
        <NForm
          labelAlign="left"
          labelPlacement="left"
          class={styles.searchForm}>
          {forms.type === 'MUSIC' && props.type === 'shareResources' && (
            <>
              <NFormItem label={data.tags[0]?.columnName + '：'}>
                <NSpace class={styles.spaceSection}>
                  {data.tags.map((subject: any) => (
                    <span
                      class={[
                        styles.textBtn,
                        data.tagActiveId === subject.id && styles.textBtnActive
                      ]}
                      onClick={() => {
                        changeTag(subject);
                      }}>
                      {subject.name}
                    </span>
                  ))}
                </NSpace>
              </NFormItem>

              <ChildNodeSearch
                activeRow={data.selectParents}
                onSelectChildTag={(val: any) => {
                  data.childSelectId = val;
                  onSearch();
                }}
              />
            </>
          )}

          {props.type !== 'myResources' && forms.type === 'MUSIC' && (
            <NFormItem label="场景：">
              <NSpace class={styles.spaceSection}>
                {audioPlayTypeList.value.map((subject: any) => (
                  <span
                    class={[
                      styles.textBtn,

                      forms.audioPlayTypes === subject.value &&
                        styles.textBtnActive
                    ]}
                    onClick={() => {
                      forms.audioPlayTypes = subject.value;
                      // if (subject.value === 'SING') {
                      //   state.tempSubjectId = null;
                      //   forms.subjectId = null;
                      // } else {
                      //   formatFirstSubject();
                      // }
                      onSearch();
                    }}>
                    {subject.name}
                  </span>
                ))}
              </NSpace>
            </NFormItem>
          )}

          {forms.audioPlayTypes !== 'SING' && (
            <NFormItem label="乐器：">
              <NSpace class={styles.spaceSection2}>
                {catchStore.getSubjectInstrumentOnly.map((subject: any) =>
                  subject.instruments && subject.instruments.length > 1 ? (
                    <NPopselect
                      options={subject.instruments}
                      trigger="hover"
                      scrollable
                      v-model:value={state.tempSubjectId}
                      onUpdate:value={() => {
                        forms.subjectId = state.tempSubjectId;
                        onSearch();
                      }}
                      key={subject.value}
                      class={[styles.popSelect]}>
                      <span
                        class={[
                          styles.textBtn,
                          selectChildObj(subject.instruments).selected &&
                            styles.textBtnActive
                        ]}>
                        {selectChildObj(subject.instruments).name ||
                          subject.name}
                        <i class={styles.iconArrow}></i>
                      </span>
                    </NPopselect>
                  ) : (
                    <span
                      class={[
                        styles.textBtn,

                        forms.subjectId === subject.value &&
                          styles.textBtnActive
                      ]}
                      onClick={() => {
                        forms.subjectId = subject.value;
                        state.tempSubjectId = null;
                        onSearch();
                      }}>
                      {subject.name}
                    </span>
                  )
                )}
              </NSpace>
            </NFormItem>
          )}

          {forms.type !== 'MUSIC' && (
            <NFormItem label="标签：">
              <NSpace class={styles.spaceSection}>
                {catchStore.getAllMaterialTags.map((subject: any) => (
                  <span
                    class={[
                      styles.textBtn,

                      forms.materialTagId === subject.value &&
                        styles.textBtnActive
                    ]}
                    onClick={() => {
                      forms.materialTagId = subject.value;
                      onSearch();
                    }}>
                    {subject.label}
                  </span>
                ))}
              </NSpace>
            </NFormItem>
          )}
        </NForm>
      </div>
    );
  }
});