import { Grid, GridItem, Icon, Image, Loading } from "vant";
import { defineComponent, PropType } from "vue";
import styles from "./index.module.less";

export default defineComponent({
  name: "TheVideoGrid",
  props: {
    list: {
      type: Array as any,
      default: () => [],
    },
  },
  emits: ['goto'],
  setup(props, {emit}) {
    const imageSlots = {
      loading: () => <Loading size={20} />,
      error: () => <Loading size={20} />,
    };
    return () => (
      <div class={styles.theMusicGrid}>
        <Grid border={false} columnNum={1}>
          {props.list.map((n: any) => (
            <GridItem>
              <div class={styles.item} onClick={() => emit('goto', n)}>
                <div class={styles.imgWrap}>
                  <Image
                    width="100%"
                    height="100%"
                    src={n.lessonCoverUrl}
                    v-slots={imageSlots}
                  />
                  <div class={styles.model}>
                    <span class={styles.classNum}>{n.lessonCount}课时</span>
                    <div class={styles.num}>
                      <span class={styles.dot}></span>{n.countStudent}人在学
                    </div>
                  </div>
                </div>
                <div class={styles.itemContent}>
                  <div class={styles.title}>{n.lessonName} {n.lessonDesc}</div>
                  <div class={styles.des}>
                    <span>{n.username}</span>
                    <span>{n.lessonSubjectName}</span>
                  </div>
                </div>
              </div>
            </GridItem>
          ))}
        </Grid>
      </div>
    );
  },
});
