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 MusicSwiper from './music-swiper'
import { Icon } from 'vant'

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
    })

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

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

    return () => (
      <div class={styles.allSearch}>
        <div class={styles.albumSection}>
          <div class={styles.albumTitle}>
            <p>热门专辑</p>

            <Icon
              name="arrow"
              class={styles.iconArrow}
              onClick={() => {
                router.push({
                  path: '/music-album'
                })
              }}
            />
          </div>
          <div class={styles.musicGrid}>
            <MusicGrid
              list={state.albumList}
              onGoto={(n: any) => {
                router.push({
                  name: 'music-album-detail',
                  params: {
                    id: n.id
                  }
                })
              }}
            />
          </div>
        </div>

        <div class={styles.musicGroup}>
          <MusicSwiper defauleParams={props.defauleParams} />
        </div>
      </div>
    )
  }
})
