colexiu-project/src/views/muiscDetial/modals/musicItem.tsx

import { defineComponent, reactive, watch } from 'vue'
import icon from '../videoDetailItem/images/icon.png'
import classes from './musicItem.module.less'
import music from '@/components/musicLIstItem/images/music.png'
import arrow from '@/components/musicLIstItem/images/arrow.png'
import { useRouter } from 'vue-router'
import { ElTooltip } from 'element-plus'
import iconFine from '@/common/images/icon_fine.png'
import iconAlbum from '@/common/images/icon_album_active.png'
type Props = {
  id?: Number
  addName: String
  addUserAvatar: String
  musicSheetName: String
  subjectNames: String
  titleImg: String
  composer: String
  chargeType: String
}
const chargeTypes = {
  CHARGE: '点播',
  FREE: '免费',
  VIP: 'VIP'
}

export default defineComponent({
  name: 'musicItem',
  emits: ['musicDetail'],
  props: {
    item: {
      type: Object as () => Props,
      default: () => ({})
    },
    onClick: {
      type: Function,
      default: (item: any) => {}
    }
  },
  setup(props: any, conent) {
    const router = useRouter()
    const state = reactive({
      item: props.item
    })

    watch(
      () => props.item,
      item => {
        state.item = item
      }
    )

    const gotoMusicDetail = () => {
      conent.emit('musicDetail', state.item.id)
      // router.push({path:'/muiscDetial',query:{id:state.item.id}})
    }
    return () => (
      <div
        onClick={() => {
          props.onClick(state.item)
        }}
      >
        <div class={classes.itemWrap} onClick={() => gotoMusicDetail()}>
          <div class={classes.left}>
            <div class={classes.imgWrap}>
              <img src={state.item.titleImg || music} alt="" />
            </div>
            <div class={classes.textWrap}>
              <p>
                {state.item.exquisiteFlag === 1 && (
                  <img src={iconFine} class={classes.iconFine} />
                )}

                {state.item.albumNums > 0 && (
                  <img src={iconAlbum} class={classes.iconAlbum} />
                )}
                <ElTooltip placement="top" content={state.item.musicSheetName}>
                  {state.item.musicSheetName}
                </ElTooltip>
              </p>
              <p>
                <span>作曲: {state.item.composer}</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    )
  }
})