import { Grid, GridItem, Icon, Image, Loading } from 'vant'
import { defineComponent, PropType } from 'vue'
import styles from './index.module.less'
import IconXin from '../images/icon-xin.png'

export default defineComponent({
  name: 'TheMusicGrid',
  props: {
    list: {
      type: Array as any,
      default: () => []
    }
  },
  emits: ['goto'],
  setup(props, { emit }) {
    return () => (
      <div class={styles.theMusicGrid}>
        <Grid border={false} columnNum={3}>
          {props.list.map((n: any) => (
            <GridItem>
              <div class={styles.item} onClick={() => emit('goto', n)}>
                <div class={styles.imgWrap}>
                  <Image
                    class={styles.image}
                    width="100%"
                    height="100%"
                    fit="cover"
                    src={n.albumCoverUrl}
                  />
                  <div class={styles.model}>
                    <Icon name={IconXin} />
                    <span class={styles.num}>{n.albumFavoriteCount}人</span>
                  </div>
                </div>
                <div class={styles.title}>{n.albumName}</div>
                <div class={styles.des}>共{n.musicSheetCount}首</div>
              </div>
            </GridItem>
          ))}
        </Grid>
      </div>
    )
  }
})