import { defineComponent, ref } from 'vue'
import { Button, Icon, Image } from 'vant'
import classNames from 'classnames'
import MusicIcon from './icons/music-icon.png'
import styles from './item.module.less'

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

export enum auditStatus {
  UNPASS = '拒绝',
  DOING = '审核中',
  PASS = '通过'
}

export enum auditStatusColor {
  UNPASS = '#f56c6c',
  DOING = '#909399',
  PASS = '#67c23a'
}

export default defineComponent({
  name: 'MusicItem',
  props: {
    data: {
      type: Object,
      default: {}
    },
    onClick: {
      type: Function
    }
  },
  emits: ['favorite'],
  setup({ onClick, data }) {
    return () => {
      const chargeType = data.musicPrice > 0 ? 'charge' : 'free'
      return (
        <div
          class={styles.item}
          onClick={() => {
            onClick?.(data)
          }}
        >
          <header class={styles.header}>
            <div class={styles.mate}>
              <Image src={MusicIcon} round class={styles.icon} />
              <div class={styles.info}>
                <h4 class="van-multi-ellipsis--l2">{data.musicSheetName}</h4>
                <p>
                  <div>
                    <span>
                      审核状态:{' '}
                      <b
                        style={{
                          color: auditStatusColor[data.auditStatus],
                          fontWeight: 'bold'
                        }}
                      >
                        {auditStatus[data.auditStatus]}
                      </b>
                    </span>
                    <span>上传作者: {data.username}</span>
                  </div>
                  <div>
                    <span>收费价格: {data.musicPrice}元</span>
                    <span>审批人员: {data.auditName}</span>
                  </div>
                </p>
                {/* <p>
                  <span
                    style={{
                      color: auditStatusColor[data.auditStatus],
                      fontWeight: 'bold'
                    }}
                  >
                    {auditStatus[data.auditStatus]}
                  </span>{' '}
                  {data.username}
                </p> */}
              </div>
            </div>
            <div class={styles.buttons}>
              <Button class={classNames(styles.btn, styles[chargeType])}>
                {chargeTypes[chargeType.toLocaleUpperCase()]}
              </Button>
            </div>
          </header>
        </div>
      )
    }
  }
})
