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 IconPlay from '../images/icon-play.png'
import { useRouter } from 'vue-router'
import { state } from '@/state'
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: () => []
    },
    // showMore: {
    //   type: Boolean,
    //   default: true
    // },
    showPlay: {
      type: Boolean,
      default: true
    },
    musicNameClass: {
      type: String as PropType<unknown>
    },
    authorClass: {
      type: String as PropType<unknown>
    },
    showNumber: {
      type: Boolean,
      default: false
    },
    showTitleImg: {
      type: Boolean,
      default: false
    }
  },
  emits: ['detail'],
  setup(props, { emit }) {
    // const isMore = ref<boolean>(false)
    // const moreData = ref<any>({})
    // const router = useRouter()
    // const colors: any = {
    //   FREE: {
    //     color: '#01B84F',
    //     text: '免费'
    //   },
    //   VIP: {
    //     color: '#CD863E',
    //     text: '会员'
    //   },
    //   CHARGE: {
    //     color: '#3591CE',
    //     text: '点播'
    //   }
    // }

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

    return () => {
      return (
        <div class={styles.theSong}>
          {list.value.map((n: any, index: number) => (
            <div class={styles.item} onClick={() => emit('detail', n)}>
              {props.showNumber && <div class={styles.num}>{index + 1}</div>}
              {props.showTitleImg && (
                <div class={styles.cover}>
                  <img src={n.titleImg} />
                </div>
              )}

              <div class={styles.content}>
                <div class={styles.top}>
                  <span
                    class={[styles.title, props.musicNameClass, 'van-ellipsis']}
                    v-html={n.musicSheetName}
                  ></span>
                  <span
                    class={[styles.singer, props.authorClass, 'van-ellipsis']}
                  >
                    {/* -{n.composer} */}
                  </span>
                </div>
                <div class={styles.user}>
                  <Image
                    src={
                      n.favorite
                        ? getAssetsHomeFile('collection_active.png')
                        : getAssetsHomeFile('collection.png')
                    }
                    class={styles.collection}
                  />

                  {n.exquisiteFlag === 1 && (
                    <div class={styles.exquisiteTag}>精选</div>
                  )}

                  <div class={styles.tags}>
                    {n.subjectNames?.split(',').map((name: any) => (
                      <span>{name}</span>
                    ))}
                  </div>
                  <span class={[styles.name]}>
                    {/* {n.addName ? `上传者：${n.addName}` : `作曲：${n.composer}`} */}
                    {n.addName ? `${n.addName}` : `${n.composer}`}
                  </span>
                </div>
              </div>
              <div class={styles.play}>
                {props.showPlay && <Icon name={IconPlay} size={20} />}

                {/* {props.showMore && (
                  <span class={styles.moreSection}>
                    <Icon
                      name={IconMore}
                      size={18}
                      onClick={(e: MouseEvent) => {
                        e.stopPropagation()
                        isMore.value = true
                        moreData.value = n
                      }}
                    />
                  </span>
                )} */}
              </div>
            </div>
          ))}
        </div>
      )
    }
  }
})