import { Cell, Icon, Swipe, SwipeItem } from 'vant'
import styles from './index.module.less'
import { defineComponent, onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import request from '@/helpers/request'
import { openDefaultWebView } from '@/state'
// import event from '../../event'
// import Song from '../component/song'

export default defineComponent({
  name: 'music-list',
  props: {
    title: {
      type: String,
      default: '最热曲目'
    },
    music: {
      type: Array,
      default: () => {
        return []
      }
    },
    defauleParams: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props) {
    const router = useRouter()
    const state = reactive({
      musicList: [] as any
    })
    const arrChange = (num: number, arr: any) => {
      const newArr = [] as any
      arr.forEach((item: any, index: number) => {
        if (index <= 11) {
          newArr.push(item)
        }
      })
      return newArr
    }

    const getMusicList = async () => {
      try {
        // 曲谱
        const music = await request.post(
          '/api-student/music/sheet/appMusicSheet',
          {
            data: {
              ...props.defauleParams
            }
          }
        )
        const musicData = music.data || []
        state.musicList = [
          arrChange(12, musicData.topMusicSheet || []),
          arrChange(12, musicData.newMusicSheet || []),
          arrChange(12, musicData.hotMusicSheet || [])
        ]
      } catch {
        //
      }
    }

    const onDetail = (item: any) => {
      const url =
        location.origin + location.pathname + '#/music-detail?id=' + item.id
      openDefaultWebView(url, () => {
        router.push({
          path: '/music-detail',
          query: {
            id: item.id
          }
        })
      })
    }

    onMounted(() => {
      getWidth()
      getMusicList()
    })

    const swipeWidth = ref(260)
    const swipeShow = ref(false)
    const getWidth = () => {
      swipeShow.value = false
      const clientWidth =
        document.body.clientWidth > 750 ? 750 : document.body.clientWidth

      swipeWidth.value = clientWidth - 120
      swipeShow.value = true
    }
    return () => (
      <>
        <div class={styles.hotMusic}>
          {swipeShow.value && (
            <Swipe showIndicators={false} loop={false} width={swipeWidth.value}>
              {state.musicList.map((item: any, index: number) => (
                <SwipeItem class={styles.swipeItem}>
                  <div class={styles.swipeChild}>
                    <div class={styles.swipeTitle}>
                      {index === 0 && '推荐曲目'}
                      {index === 1 && '最新曲目'}
                      {index === 2 && '最热曲目'}
                    </div>
                    <div class={styles.swipeContent}>
                      {item.map((child: any, j: number) => (
                        <div
                          class={[styles.swipe, j <= 2 && styles.swipeTop]}
                          onClick={() => onDetail(child)}
                        >
                          <div class={styles.num}>{j + 1}</div>
                          {child.musicSheetName}
                          {child.exquisiteFlag === 'YES' && (
                            <span class={styles.hot}>热</span>
                          )}
                        </div>
                      ))}
                    </div>
                  </div>
                </SwipeItem>
              ))}
            </Swipe>
          )}
        </div>
      </>
    )
  }
})
