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 '@/state'
import item from '@/views/coupons/item'

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')
              })
            }}
          />
        )}
        <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
                            }
                          })
                        })
                      }}
                    />
                  </div>
                </SwipeItem>
              ))}
            </Swipe>
          )}
        </div>
      </>
    )
  }
})