import { ElImage } from 'element-plus'
import { defineComponent } from 'vue'
import pan from '../../images/pan.png'
import start from '../../images/start.png'
import hold from '../../images/hold.png'
// import iconStart from '../../images/icon_start.png'
import iconStartActive from '@/components/albumItem/images/lineStart.png'
import iconStart from '@/components/albumItem/images/start.png'
import styles from './index.module.less'

export default defineComponent({
  name: 'item',
  props: {
    item: {
      type: Object,
      default: () => ({})
    },
    onItemClick: {
      type: Function,
      default: (item: any) => {}
    }
  },
  render() {
    const item = this.item
    return (
      <div
        class="rounded-[10px] w-[156px] cursor-pointer overflow-hidden relative transition-all"
        onClick={() => {
          this.onItemClick(item)
        }}
      >
        {item.paymentType === 'CHARGE' && (
          <span class={styles.albumType}>付费</span>
        )}
        {/* favorite */}
        <ElImage
          src={item.favorite ? iconStartActive : iconStart}
          class="w-6 h-6 !absolute top-2 right-4 z-10"
        />
        <ElImage
          class="w-full h-[156px] align-middle rounded-[10px]"
          fit="cover"
          src={item.albumCoverUrl || hold}
        />
        <div class="text-lg text-black whitespace-nowrap text-ellipsis overflow-hidden pb-0.5 pt-2">
          {item.albumName}
        </div>
        <div class="flex justify-between text-sm text-[#999]">
          <div class="flex items-center">
            {/* <img src={pan} class="w-[18px] h-[18px] mr-1" /> */}
            <span>{item.musicSheetCount}首</span>
          </div>
          <div class="flex items-center ">
            {/* <img src={start} class="w-[18px] h-[18px] mr-1" /> */}
            <span>{item.albumFavoriteCount}收藏</span>
          </div>
        </div>
      </div>
    )
  }
})
