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: {
    isHiddenTag: {
      type: Boolean,
      default: false
    },
    showLight: {
      type: Boolean,
      default: false
    },
    /** 需要高亮的文案 */
    lightText: {
      type: String,
      default: ''
    },
    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) => {
            let name = ''
            console.log(props.lightText, 'props.lightText')
            if (props.lightText) {
              name = n.albumName.replace(
                props.lightText,
                `<span style="color: #FE2451">${props.lightText}</span>`
              )
            } else {
              name = n.albumName
            }
            return (
              <GridItem>
                <div class={styles.item} onClick={() => emit('goto', n)}>
                  <div class={styles.imgWrap}>
                    {n.paymentType === 'CHARGE' && !props.isHiddenTag && (
                      <span class={styles.albumType}>付费</span>
                    )}
                    <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} v-html={name}></div>
                  {/* <div class={styles.des}>共{n.musicSheetCount}首</div> */}
                </div>
              </GridItem>
            )
          })}
        </Grid>
      </div>
    )
  }
})