import { Button, Icon, Image, Tag } from 'vant'
import classNames from 'classnames'
import MusicIcon from '@/student/music/list/icons/music-icon.png'
import InitUserIcon from '@/student/music/list/icons/init-user-icon.png'
// import FavoriteIcon from '@/student/music/album/favorite.svg'
// import FavoritedIcon from '@/student/music/album/favorited.svg'
import { defineComponent } from 'vue'
import styles from './index.module.less'

const chargeTypes = {
  CHARGE: '点播',
  FREE: '免费',
  VIP: 'VIP'
}

export default defineComponent({
  name: 'OrderMusic',
  props: {
    item: {
      type: Object,
      default: {}
    }
  },
  render() {
    const item = this.item
    return (
      <div class={styles.item}>
        <header class={styles.header}>
          <div class={styles.mate}>
            <Image src={MusicIcon} round class={styles.icon} />
            <div class={styles.info}>
              <h4>{item.musicSheetName}</h4>
              <p>{item.composer}</p>
            </div>
          </div>
          <div class={styles.buttons}>
            <Button
              class={classNames(
                styles.btn,
                styles[item.chargeType.toLocaleLowerCase()]
              )}
              disabled
            >
              {chargeTypes[item.chargeType]}
              <Icon name="arrow" />
            </Button>
          </div>
        </header>
        <footer class={styles.footer}>
          <div class={styles.user}>
            <Image
              round
              src={item.addUserAvatar || InitUserIcon}
              class={styles.userIcon}
            />
            <p>{item.addName}</p>
            <div class={styles.tags}>
              {(item.subjectNames || '').split(',').map(item => (
                <Tag>{item}</Tag>
              ))}
            </div>
          </div>
          <div class={styles.icons}>
            {/* <Button style={{ border: 'none' }} disabled>
              <Icon
                class={styles.favorite}
                name={this.data.value ? FavoritedIcon : FavoriteIcon}
              />
            </Button> */}
          </div>
        </footer>
      </div>
    )
  }
})
