import { Cell, Icon, Swipe, SwipeItem } from 'vant'
import styles from './index.module.less'
import { defineComponent, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import TheSong from '../TheSong'
import TheTitle from '../the-title'
import { openDefaultWebView } from '@/student/home-layout-orchestra/state-orchestra'
import item from '@/views/coupons/item'
import event from '../../event'

export default defineComponent({
  name: 'music-list',
  props: {
    title: {
      type: String,
      default: '最热曲目'
    },
    music: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  setup(props) {
    const router = useRouter()
    onMounted(() => {
      getWidth()
    })

    const swipeWidth = ref(312)
    const swipeShow = ref(false)
    const getWidth = () => {
      swipeShow.value = false
      const clientWidth =
        document.body.clientWidth > 750 ? 750 : document.body.clientWidth
      swipeWidth.value = clientWidth - 63
      swipeShow.value = true
    }
    return () => (
      <>
        {props.music.length > 0 && (
          <TheTitle
            title={props.title}
            onDetail={() => {
              // const url = location.origin + location.pathname + '#/music-list'
              // openDefaultWebView(url, () => {
              //   router.push('/music-list')
              // })
              event.emit('downloadApp')
            }}
          />
        )}
        <div class={styles.hotMusic}>
          {swipeShow.value && (
            <Swipe showIndicators={false} loop={false} width={swipeWidth.value}>
              {props.music.map((n: any) => (
                <SwipeItem class={styles.swipeItem}>
                  <div class={styles.swipeChild}>
                    <TheSong
                      list={n}
                      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
                        //     }
                        //   })
                        // })
                        event.emit('downloadApp')
                      }}
                    />
                  </div>
                </SwipeItem>
              ))}
            </Swipe>
          )}
        </div>
      </>
    )
  }
})
