import { CellGroup, Cell, Icon, Image, Popup, Tag, Toast } from 'vant'
import { computed, defineComponent, PropType, ref } from 'vue'
import styles from './index.module.less'
import IconPlay from '@/common/images/icon-play.png'
import { useRouter } from 'vue-router'
export const getAssetsHomeFile = (fileName: string) => {
  const path = `../images/${fileName}`
  const modules = import.meta.globEager('../images/*')
  return modules[path].default
}
export default defineComponent({
  name: 'TheSong',
  props: {
    list: {
      type: Array as PropType<any[]>,
      default: () => []
    },
    showPlay: {
      type: Boolean,
      default: true
    },
    musicNameClass: {
      type: String as PropType<unknown>
    },
    authorClass: {
      type: String as PropType<unknown>
    }
  },
  emits: ['detail'],
  setup(props, { emit }) {

    const list = computed(() => {
      return props.list.map(n => {
        if (typeof n.paymentType === 'string')
          n.paymentType = n.paymentType.split(',')
        return { ...n }
      })
    })

    return () => {
      return (
        <div class={styles.theSong}>
          {list.value.map((n: any) => (
            <div class={styles.item} onClick={() => emit('detail', n)}>
              <div class={styles.content}>
                <div class={styles.top}>
                  {n.exquisiteFlag === 1 && (
                    <Image
                      class={styles.exquisiteFlag}
                      src={getAssetsHomeFile('icon_exquisite.png')}
                    />
                  )}

                  {n.albumNums > 0 && (
                    <Image
                      class={styles.songAlbum}
                      src={getAssetsHomeFile('icon_album_active.png')}
                    />
                  )}

                  <span
                    class={[styles.title, props.musicNameClass, 'van-ellipsis']}
                  >
                    {n.musicSheetName}
                  </span>
                  <span
                    class={[styles.singer, props.authorClass, 'van-ellipsis']}
                  >
                    -{n.composer}
                  </span>

                  <div class={styles.tags}>
                    {n?.subjectNames.split(',').map((name: any) => (
                      <span>{name}</span>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      )
    }
  }
})
