import { Cell, Icon, Image } from 'vant'
import styles from './index.module.less'
import { defineComponent } from 'vue'
import IconXin from '@/common/images/icon-xin.png'
import IconXinActive from '@/common/images/icon-xin-active.png'
import TheTitle from '../the-title'
import { openDefaultWebView } from '@/student/home-layout-orchestra/state-orchestra'
import { useRouter } from 'vue-router'
import event from '../../event'

export default defineComponent({
  name: 'hot-album',
  props: {
    album: {
      type: Array,
      default: []
    }
  },
  setup(props) {
    const router = useRouter()
    return () => (
      <>
        {props.album.length > 0 && (
          <TheTitle
            title="热门专辑"
            onDetail={() => {
              event.emit('downloadApp')
            }}
          />
        )}

        <div class={styles.albumContainer}>
          {props.album.map((item: any) => (
            <div
              class={styles.album}
              key={item.id}
              onClick={() => {
                event.emit('downloadApp')
              }}
            >
              <div class={styles.main}>
                {item.paymentType === 'CHARGE' && (
                  <span class={styles.albumType}>付费</span>
                )}
                <Image class={styles.img} src={item.albumCoverUrl} />
                <div class={styles.model}>
                  <Icon name={item.favorite ? IconXinActive : IconXin} />
                  <span class={styles.num}>{item.albumFavoriteCount}人</span>
                </div>
              </div>
              <h4 class={[styles.title, 'van-ellipsis']}>{item.albumName}</h4>
            </div>
          ))}
        </div>
      </>
    )
  }
})