import { Grid, GridItem, Icon, Image, Loading } from "vant";
import { defineComponent, PropType } from "vue";
import styles from "./index.module.less";
import IconXin from "@/assets/icon-xin.png";
import TheLoading from "../TheLoading";
import TheImage from "../TheImage";

export default defineComponent({
  name: "TheMusicGrid",
  props: {
    list: {
      type: Array as any,
      default: () => [],
    },
  },
  emits: ['goto'],
  setup(props, {emit}) {
    const imageSlots = {
      loading: () => <TheLoading />,
      error: () => <TheLoading />,
    };
    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}>
                  <TheImage 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>
    );
  },
});
