classroom-app/src/views/hot-music-more/index.tsx

import {
  computed,
  defineComponent,
  nextTick,
  onMounted,
  onUnmounted,
  reactive,
  ref,
  Teleport,
  toRefs,
  watch
} from 'vue';
import styles from './index.module.less';
import { browser, vaildMusicScoreUrl } from '@/helpers/utils';
import MSticky from '@/components/m-sticky';
import MHeader from '@/components/m-header';
import { useRoute, useRouter } from 'vue-router';
import MSearch from '@/components/m-search';
import { Cell, Icon, Image, List, Popup, Tab, Tabs } from 'vant';
import iconPlayer from './images/icon-player.png';
import iconFire from './images/icon-fire.png';
import iconTitleArrow from './images/icon-title-arrow.png';
import { api_musicSheetPage } from '../co-ai/api';
import { state as baseState } from '@/state';
import request from '@/helpers/request';
import MEmpty from '@/components/m-empty';
import { listenerMessage, postMessage } from '@/helpers/native-message';
import { audioPlayType } from '@/helpers/constant';
import MusicDetail from './music-detail';
import TheVip from '@/components/the-vip';
import { useEventListener } from '@vueuse/core';

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;
        selectItem.value = {};
      }
    );
    return () => (
      <>
        {activeRow.value?.id && (
          <>
            <div class={styles.title}>{activeRow.value.columnName}</div>
            <div class={[styles.subjectContainer]}>
              {activeRow.value?.children.map((subject: any) => (
                <div
                  class={[
                    styles.subjectItem,
                    styles.subjectItem4,
                    (activeRow.value.activeIndex || '') == subject.id &&
                      styles.active
                  ]}
                  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}
                </div>
              ))}
            </div>

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

export default defineComponent({
  name: 'hot-music-more',
  setup() {
    const router = useRouter();
    const route = useRoute();
    const state = reactive({
      background: 'transparent',
      loading: false,
      finished: false,
      isAllStatus: true, // 当前是否已经为全部了
      searchPopup: false,
      musicDetailPopup: false,
      showVip: false,
      vipMember: baseState.user.data.vipMember,
      tabActive: '' as any,
      newTags: [] as any,
      isTagExpand: false,
      musics: [] as any,
      types: [] as any,
      subjectList: [] as any,
      audioPlayTypeList: [] as any, // 场景
      sNt: '' as any, // 标签
      sAPT: '', // 场景
      item: {} as any,
      allSearch: {
        name: '',
        musicTagIds: '' as any,
        audioPlayTypes: [] as any,
        bookVersionId: null as any,
        musicalInstrumentId: ''
      },
      hotSearch: {
        name: ''
      },
      newSearch: {
        name: ''
      },
      recommendSearch: {
        name: ''
      }
    });
    const tabsRef = ref();

    const musicForms = reactive({
      page: 1,
      rows: 20,
      status: 1,
      sortType: 2, // 默认热度排序
      keyword: '' // 关键词
    });

    const data = reactive({
      selectParents: {}, // 选中的数据
      tags: [] as any[],
      tagActiveId: '' as any,
      tagActive: {} as any,
      childSelectId: null as any
    });
    const contentRef = ref()

    const searchValue = computed(() => {
      if (state.tabActive === 'RECOMMEND') {
        return state.recommendSearch.name;
      } else if (state.tabActive === 'HOT') {
        return state.hotSearch.name;
      } else if (state.tabActive === 'NEW') {
        return state.newSearch.name;
      } else {
        return state.allSearch.name;
      }
    });
    const mSearchRef = ref()

    let isClick = false;
    const getMusicList = async () => {
      if (isClick) return;
      isClick = true;
      state.loading = true;
      try {
        const { ...result } = musicForms;
        let params = {
          ...result,
          searchType: state.tabActive
        } as any;
        if (state.tabActive === 'RECOMMEND') {
          params = Object.assign(params, state.recommendSearch);
          params.page = 1
          params.rows = 60
        } else if (state.tabActive === 'HOT') {
          params = Object.assign(params, state.hotSearch);
          params.page = 1
          params.rows = 60
        } else if (state.tabActive === 'NEW') {
          params = Object.assign(params, state.newSearch);
          params.page = 1
          params.rows = 60
        } else {
          params.name = state.allSearch.name;
          params = Object.assign(params, state.allSearch);
        }
        
        const res = await api_musicSheetPage(params);
        if (res.code === 200 && Array.isArray(res?.data?.rows)) {
          const result = res.data.rows || [];
          result.forEach((item: any) => {
            item.audioPlayTypeArray = item.audioPlayTypes
              ? item.audioPlayTypes.split(',')
              : [];
          });
          state.musics = [...state.musics, ...res.data.rows];
          state.finished = !res.data.next;
          musicForms.page = res.data.current + 1;
          // state.listState.dataShow = state.list.length > 0;
        } else {
          state.finished = true;
        }
      } catch (error) {
        // console.log('🚀 ~ error:', error);
        state.finished = true;
      }
      state.loading = false;
      isClick = false;
    };

    const getTags = async () => {
      try {
        const res = await request.get('/edu-app/musicSheetTag/queryList');
        const result = res.data || [];
        state.newTags = [
          {
            name: '全部',
            id: ''
          },
          ...result.map((item: any) => {
            return {
              name: item.name,
              id: item.id
            };
          })
        ];
      } catch {
        //
      }
    };

    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];
        }
      }
      return ids;
    };

    const onSearch = () => {
      musicForms.page = 1;
      state.musics = [];
      state.finished = false;
      getMusicList();
    };

    const onReset = () => {
      state.sNt = '';
      state.sAPT = '';
      data.tagActiveId = '';
      data.childSelectId = null;
      data.selectParents = {}
      // state.allSearch.bookVersionId = data.childSelectId || data.tagActiveId;
      // state.allSearch.audioPlayTypes = state.sAPT
      //   ? state.sAPT === 'PLAY_SING'
      //     ? ['SING', 'PLAY']
      //     : [state.sAPT]
      //   : [];
      // state.allSearch.musicTagIds = state.sNt;
      // state.searchPopup = false;
      // onSearch();
    };

    const onDetail = (item: any) => {
      state.item = item;
      state.musicDetailPopup = true;
    };
    const getMusicTagTree = async () => {
      try {
        const res = await request.get('/edu-app/musicTag/tree');
        const result = res.data || [];
        data.tags = [
          {
            columnName: result[0].columnName,
            name: '全部',
            id: ''
          },
          ...result
        ];
        data.tagActiveId = data.tags[0].id;
      } catch {
        //
      }
    };

    const changeTag = (item: any, activeIndex?: 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: activeIndex || '',
          children
        };
      } else {
        data.selectParents = {};
      }
    };

    const formatUsedNum = (num: number) => {
      if (num < 10000) {
        return num;
      } else {
        const n = num / 10000;
        return Number(n.toFixed(1)) + '万';
      }
    };

    // 判断是否有数据
    // const isSearch = computed(() => {
    //   return data.tags.length > 0 ? true : false;
    // });

    const handleGoto = (
      item: any,
      showMusicImg: string,
      selectMusicInstrumentIndex: number
    ) => {
      if (!state.vipMember && item?.paymentType === 'VIP') {
        state.showVip = true;
        return;
      }
      // 默认进页面显示对应的曲谱
      let lineType = 'staff';
      if (showMusicImg === 'first') {
        lineType = 'firstTone';
      } else if (showMusicImg === 'fixed') {
        lineType = 'fixedTone';
      } else if (showMusicImg === 'staff') {
        lineType = 'staff';
      }
      let src = `${vaildMusicScoreUrl()}/instrument/?id=${
        item?.id
      }&musicRenderType=${lineType}&showGuide=true&part-index=${selectMusicInstrumentIndex}`;
      postMessage({
        api: 'openAccompanyWebView',
        content: {
          url: src,
          orientation: 0,
          isHideTitle: true,
          statusBarTextColor: false,
          isOpenLight: true,
          c_orientation: 0 // 0 横屏 1 竖屏
        }
      });
    };

    const getUserInfo = async () => {
      const res = await request.get('/edu-app/user/getUserInfo', {
        initRequest: true, // 初始化接口
        requestType: 'form',
        hideLoading: true
      });
      if (res?.code === 200) {
        state.vipMember = res.data.vipMember;
      }
    };

    const tabResize = () => {
      tabsRef.value?.resize();
    };

    onMounted(async () => {
      if (route.query.type) {
        state.tabActive = route.query.type;
        state.isAllStatus = false;
      }

      // tabsRef
      // 场景
      const tempAudio = Object.keys(audioPlayType).map(key => {
        return {
          id: key,
          name: audioPlayType[key]
        };
      });
      state.audioPlayTypeList = [{ name: '全部', id: '' }, ...tempAudio];

      state.loading = true;
      getUserInfo();
      await getTags();
      await getMusicTagTree();
      getMusicList();

      window.addEventListener('resize', tabResize);
      useEventListener(document, 'scroll', () => {
        mSearchRef.value?.searchBlur()
      });

      listenerMessage('webViewOnResume', () => {
        tabResize();
      });
    });

    onUnmounted(() => {
      window.removeEventListener('resize', tabResize);
    });
    return () => (
      <div
        class={[
          styles.hotMusicMore,
          browser().isTablet ? styles.hotMusicMoreTablet : ''
        ]}>
        <MSticky position="top">
          <MHeader border={false} background={'transparent'}>
            {{
              content: () => (
                <div class={styles.woringHeader}>
                  <i
                    onClick={() => {
                      if (browser().isApp) {
                        postMessage({
                          api: 'back'
                        });
                      } else {
                        router.back();
                      }
                    }}
                    class={[
                      'van-badge__wrapper van-icon van-icon-arrow-left van-nav-bar__arrow',
                      styles.leftArrow
                    ]}></i>
                  <Tabs
                    ref={tabsRef}
                    class={styles.tabSection}
                    v-model:active={state.tabActive}
                    shrink
                    onClickTab={() => {
                      if (state.tabActive === '') {
                        if (state.isAllStatus) {
                          state.searchPopup = !state.searchPopup;
                          if (state.searchPopup) {
                            const allSearch = state.allSearch
                            if(allSearch.audioPlayTypes.length > 0) {
                              if(allSearch.audioPlayTypes.length == 1) {
                                state.sAPT = allSearch.audioPlayTypes.join(',')
                              } else {
                                state.sAPT = 'PLAY_SING'
                              }
                            } else {
                              state.sAPT = ''
                            }
                            state.sNt = allSearch.musicTagIds
                            if(allSearch.bookVersionId) {
                              const ids = formatParentId(allSearch.bookVersionId,data.tags)
                              console.log(ids)

                              data.tagActiveId = ids[0]

                              if(data.tagActiveId && ids[1]) {
                                const item = data.tags.find((item) => item.id === ids[0])
                                console.log(item, 'item')
                                if(item)  changeTag(item, ids[1])
                              }
                            }
                          }
                        } else {
                          state.isAllStatus = true;
                          onSearch();
                        }
                      } else {
                        state.searchPopup = false;
                        state.isAllStatus = false;
                        onSearch();
                      }
                    }}>
                    <Tab name="">
                      {{
                        title: () => (
                          <div class={styles.moreIcon}>
                            <span>全部</span>
                            <img
                              src={iconTitleArrow}
                              class={[
                                styles.iconArrow,
                                state.searchPopup && styles.iconArrowActive
                              ]}
                            />
                          </div>
                        )
                      }}
                    </Tab>
                    <Tab name="RECOMMEND" title="推荐"></Tab>
                    <Tab name="HOT" title="热门"></Tab>
                    <Tab name="NEW" title="最新"></Tab>
                  </Tabs>
                </div>
              )
            }}
          </MHeader>

          <MSearch
            v-model:modelValue={searchValue.value}
            ref={mSearchRef}
            background={'transparent'}
            inputBackground="transparent"
            class={styles.mSearch11}
            onFocus={() => {
              state.searchPopup = false;
            }}
            onSearch={(val: any) => {
              if (state.tabActive === 'RECOMMEND') {
                state.recommendSearch.name = val;
              } else if (state.tabActive === 'HOT') {
                state.hotSearch.name = val;
              } else if (state.tabActive === 'NEW') {
                state.newSearch.name = val;
              } else {
                state.allSearch.name = val;
              }
              state.searchPopup = false;
              onSearch();
            }}></MSearch>
        </MSticky>
        <List
          loading={state.loading}
          finished={state.finished}
          finishedText=" "
          onLoad={() => {
            if(!state.tabActive) {
              getMusicList()
            }
          }}
          immediateCheck={false}>
          {state.musics.length > 0 && (
            <div class={styles.musicListSection}>
              <div class={styles.musicList}>
                {state.musics.map((item: any) => (
                  <Cell
                    class={styles.musicItem}
                    border={false}
                    center
                    onClick={() => onDetail(item)}>
                    {{
                      icon: () => (
                        <div class={styles.musicImg}>
                          <i
                            class={[
                              styles.iconType,
                              styles[item.paymentType]
                            ]}></i>
                          <Image class={styles.musicImg} src={item.titleImg} />
                        </div>
                      ),
                      title: () => (
                        <div class={styles.musicContnet}>
                          <h2>{item.musicSheetName}</h2>
                          <div class={styles.allStatus}>
                            <span class={styles.hotNum}>
                              <img src={iconFire} class={styles.iconFire} />
                              {formatUsedNum(item.usedNum)}
                            </span>
                            {item.audioPlayTypes?.includes('SING') && (
                              <span
                                class={[styles.iconPlayType, styles.iconSing]}>
                                演唱
                              </span>
                            )}
                            {item.audioPlayTypes?.includes('PLAY') && (
                              <span
                                class={[styles.iconPlayType, styles.iconPlay]}>
                                演奏
                              </span>
                            )}

                            {item.composer && (
                              <p>
                                {item.composer}
                              </p>
                            )}
                          </div>
                        </div>
                      ),
                      'right-icon': () => (
                        <Image class={styles.musicPlayIcon} src={iconPlayer} />
                      )
                    }}
                  </Cell>
                ))}
              </div>
            </div>
          )}
        </List>

        {!state.loading && state.musics.length === 0 && (
          <div class={styles.emptyGroup}>
            <MEmpty description="暂无曲谱" />
          </div>
        )}

        <Teleport to={'body'}>
          <div class={[styles.searchBodySection]}>
            <Popup position="top" round v-model:show={state.searchPopup}>
              <div class={styles.searchContainer}>
                <div class={styles.changeSubjectContainer}>
                  {state.newTags.length > 0 && (
                    <>
                      <div class={styles.title}>标签</div>
                      <div class={styles.subjectContainer}>
                        {state.newTags.map((subject: any) => (
                          <div
                            class={[
                              styles.subjectItem,
                              subject.id === state.sNt && styles.active
                            ]}
                            onClick={() => {
                              state.sNt = subject.id;
                            }}>
                            {subject.name}
                          </div>
                        ))}
                      </div>
                    </>
                  )}

                  {state.audioPlayTypeList.length > 0 && (
                    <>
                      <div class={styles.title}>场景</div>
                      <div class={styles.subjectContainer}>
                        {state.audioPlayTypeList.map((subject: any) => (
                          <div
                            class={[
                              styles.subjectItem,
                              styles.subjectItem4,
                              subject.id === state.sAPT && styles.active
                            ]}
                            onClick={() => {
                              state.sAPT = subject.id;
                            }}>
                            {subject.name}
                          </div>
                        ))}
                      </div>
                    </>
                  )}

                  {data.tags.length > 0 && (
                    <>
                      <div class={styles.title} ref={contentRef}>
                        {data.tags[0]?.columnName}

                        {state.isTagExpand && (
                          <span onClick={() => (state.isTagExpand = false)}>
                            收起
                            <Icon name="arrow-up" />
                          </span>
                        )}
                      </div>
                      <div
                        class={[
                          styles.subjectContainer,
                          styles.subjectContainerTwo
                        ]}>
                        {data.tags.map(
                          (subject: any, index: number) =>
                            ((!state.isTagExpand && index <= 4) ||
                              state.isTagExpand) && (
                              <div
                                class={[
                                  styles.subjectItem,
                                  (subject.id || '') ===
                                    (data.tagActiveId || '') && styles.active
                                ]}
                                onClick={() => {
                                  changeTag(subject);
                                }}>
                                {subject.name}
                              </div>
                            )
                        )}

                        {!state.isTagExpand && data.tags.length > 5 && (
                          <div
                            class={[styles.subjectItem]}
                            onClick={() => {
                              state.isTagExpand = true;
                              nextTick(() => {
                                contentRef.value?.scrollIntoView({ behavior: 'smooth', block: 'start' })
                              })
                            }}>
                            更多 <Icon name="arrow-down" />
                          </div>
                        )}
                      </div>
                      <ChildNodeSearch
                        activeRow={data.selectParents}
                        onSelectChildTag={(val: any) => {
                          data.childSelectId = val;
                          // onSearch();
                        }}
                      />
                    </>
                  )}
                </div>

                <div class={styles.searchHead}>
                  <span class={styles.cancel} onClick={() => onReset()}>
                    重置
                  </span>
                  {/* <span>筛选</span> */}
                  <span
                    class={styles.confirm}
                    onClick={() => {
                      state.allSearch.bookVersionId =
                        data.childSelectId || data.tagActiveId;
                      state.allSearch.audioPlayTypes = state.sAPT
                        ? state.sAPT === 'PLAY_SING'
                          ? ['SING', 'PLAY']
                          : [state.sAPT]
                        : [];
                      state.allSearch.musicTagIds = state.sNt;
                      state.searchPopup = false;
                      onSearch();
                    }}>
                    确定
                  </span>
                </div>
              </div>
            </Popup>
          </div>
        </Teleport>

        <Popup
          position="bottom"
          class={styles.popupMusicDetail}
          closeable
          round
          v-model:show={state.musicDetailPopup}>
          <MusicDetail item={state.item} onHandleGoto={handleGoto} />
        </Popup>

        <Popup
          class="popup-custom van-scale"
          transition="van-scale"
          closeOnClickOverlay={false}
          v-model:show={state.showVip}>
          <TheVip
            onClose={val => {
              if (val) {
                // postMessage({
                //   api: 'openWebView',
                //   content: {
                //     url: `${location.origin}${location.pathname}#/member-center`,
                //     orientation: 1
                //   }
                // });
                router.push('/member-center');
              }
              state.showVip = false;
            }}
          />
        </Popup>
      </div>
    );
  }
});