import { defineComponent } from 'vue'
import { NoticeBar } from 'vant'
import state from '/src/pages/state'
import styles from './index.module.less'

import MusicIcon from '/src/pages/list/icons/music.png'
import ArrowIcon from '/src/pages/detail/icons/arrow.svg'

export default defineComponent({
  name: 'detail-title',
  props: {
    title: {
      type: String,
      default: ''
    },
    rightView: {
      type: Boolean,
      default: true,
    },
    onClick: {
      type: Function,
    } as any
  },
  render() {
    return (
      <div onClick={this.onClick} class={styles.container}>
        <img class={styles.icon} src={MusicIcon}/>
        <NoticeBar
          text={this.title}
          color="#4a4a4a"
          class={styles.noticeBar}
          background="none"
        />
        {this.rightView ? (
          <img class={styles.status} src={ArrowIcon}/>
        ) : null}
      </div>
    )
  }
})
