import { defineComponent, onMounted, onUnmounted, reactive, ref } from 'vue'
import styles from './all-search.module.less'
import { useRoute, useRouter } from 'vue-router'
import MusicGrid from '../component/music-grid'
import request from '@/helpers/request'
import MusicList from '../list'
import { Icon } from 'vant'
import { mitter, openWebViewOrWeb } from './header'
import ColResult from '@/components/col-result'

export default defineComponent({
  name: 'MusicSearch',
  props: {
    defauleParams: {
      type: Object,
      default: () => ({})
    }
  },
  emits: ['confirm'],
  setup(props) {
    const route = useRoute()
    const router = useRouter()
    const state = reactive({
      albumList: [] as any,
      loading: false,
      defauleParams: props.defauleParams as any
    })

    const getAlbumList = async () => {
      state.loading = true
      try {
        const { data } = await request.post('/api-student/music/album/list', {
          data: {
            ...state.defauleParams,
            page: 1,
            rows: 3
          }
        })
        state.albumList = data.rows || []
      } catch {
        //
      }
      state.loading = false
    }

    const musicList = ref(null)
    const onSearch = (val: any) => {
      state.defauleParams.idAndName = val
      getAlbumList()
      const activeRef = musicList
      ;(activeRef.value as any).onSearch?.(val)
    }

    // music-songbook/search
    onMounted(() => {
      getAlbumList()

      mitter.on('search', onSearch)
    })

    onUnmounted(() => {
      mitter.off('search', onSearch)
    })
    return () => (
      <div class={styles.allSearch}>
        {state.albumList.length > 0 && (
          <div class={[styles.albumSection, styles.searchAllTitle]}>
            <div class={styles.albumTitle}>
              <span>专辑</span>

              <span
                class={styles.more}
                onClick={() => {
                  openWebViewOrWeb(
                    `${location.origin}/tenant/#/music-album`,
                    () => {
                      router.push({
                        path: '/music-album'
                      })
                    }
                  )
                }}
              >
                更多 <Icon name="arrow" />
              </span>
            </div>
            <div class={styles.musicGrid}>
              <MusicGrid
                showLight
                lightText={state.defauleParams.idAndName}
                list={state.albumList}
                onGoto={(n: any) => {
                  openWebViewOrWeb(
                    `${location.origin}/tenant/#/music-album-detail/${n.id}`,
                    () => {
                      router.push({
                        name: 'music-album-detail',
                        params: {
                          id: n.id
                        }
                      })
                    }
                  )
                }}
              />

              {state.albumList.length <= 0 && !state.loading && (
                <ColResult
                  tips="暂无专辑"
                  btnStatus={false}
                  classImgSize="SMALL"
                />
              )}
            </div>
          </div>
        )}

        <div
          class={[
            styles.albumSection,
            styles.searchAllTitle,
            styles.musicGroup
          ]}
        >
          <div class={styles.albumTitle}>单曲</div>
          {/* <MusicSwiper defauleParams={props.defauleParams} /> */}
          <MusicList
            hideSearch
            ref={musicList}
            onItemClick={(item: any) => {
              openWebViewOrWeb(
                `${location.origin}/tenant/#/music-detail?id=${item.id}`,
                () => {
                  router.push({
                    path: '/music-detail',
                    query: {
                      id: item.id
                    }
                  })
                }
              )
            }}
            showLight
            lightText={state.defauleParams.idAndName}
            defauleParams={{
              ...props.defauleParams,
              idAndName: props.defauleParams.search
              // search: null
            }}
          />
        </div>
      </div>
    )
  }
})
