colexiu-project/src/views/albumDetail/modals/musicLIstItem/index.tsx

import { defineComponent, reactive, watch } from 'vue'
import icon from '@/components/videoDetailItem/images/icon.png'
import classes from './index.module.less'
import gou from './images/gou.png'
import music from './images/music.png'
import member from './images/member.png'
import palyer from './images/palyer.png'
// import arrow from './images/arrow.png'
import { goodsType } from '@/constant'
import { useRouter } from 'vue-router'
import start from '@/common/images/start.png'
import lineStart from '@/common/images/lineStart.png'
import arrow from '@/views/home/images/moreArrow.png'

type Props = {
  id?: Number
  addName: String
  addUserAvatar: String
  musicSheetName: String
  titleImg: String
  subjectNames: String
  composer: String
  chargeType: String
}
const chargeTypes = {
  CHARGE: '点播',
  FREE: '免费',
  VIP: '会员'
}
const chargeImg = {
  CHARGE: palyer,
  FREE: gou,
  VIP: member
}
export default defineComponent({
  name: 'musicLIstItem',
  props: {
    item: {
      type: Object as () => Props,
      default: () => ({})
    },
    onClick: {
      type: Function,
      default: (item: any) => {}
    }
  },

  setup(props: any) {
    const state = reactive({
      item: props.item
    })
    const router = useRouter()
    watch(
      () => props.item,
      item => {
        state.item = item
      }
    )
    const gotoMusicDetail = () => {
      router.push({ path: '/muiscDetial', query: { id: state.item.id } })
    }
    return () => (
      <div
        class={classes.itemAllWrap}
        onClick={() => {
          props.onClick(state.item)
        }}
        onMouseover={() => {
          state.item.hoverTop = true
        }}
        onMouseout={() => {
          state.item.hoverTop = false
        }}
      >
        <div class={classes.itemWrap} onClick={() => gotoMusicDetail()}>
          <div class={classes.leftWrap}>
            <div class={classes.left}>
              <div class={classes.imgWrap}>
                <img src={state.item.titleImg || music} alt="" />
              </div>
              <div class={classes.textWrap}>
                <p class={classes.musicName}>{state.item.musicSheetName}</p>
                <p class={classes.authorName}>作曲:{state.item.composer}</p>
                <div class={classes.favoriteWrap}>
                  <img src={state.item.favorite ? lineStart : start} alt="" />
                  <span>{state.item.favoriteCount | 0} 收藏</span>
                </div>
                <div class={[classes.touchButtonO]}>
                  {state.item.hoverTop ? (
                    <div
                      class={[
                        classes.touchButton,
                        classes[state.item.chargeType?.toLocaleLowerCase()]
                      ]}
                    >
                      <p>查看</p>
                    </div>
                  ) : (
                    <>
                      {state.item.paymentType && state.item.paymentType.map((tag: string) => (
                        <div
                          class={[
                            classes.touchButton,
                            classes[tag?.toLocaleLowerCase()]
                          ]}
                        >
                          <div class={classes.touchButtonText}>
                            {chargeTypes[tag]
                              ? chargeTypes[tag]
                              : '点播'}
                          </div>
                        </div>
                      ))}
                    </>
                  )}
                </div>
              </div>
            </div>
            <div class={classes.authorBottom}>
              <div class={classes.authorInfo}>
                <img
                  class={classes.icon}
                  src={state.item.addUserAvatar || icon}
                  alt=""
                />
                <span class={classes.authorName}>
                  {state.item.addName ? state.item.addName : '小酷有谱'}
                </span>
              </div>

              {/* <img class={classes.arrow} src={arrow} alt="" /> */}
              <div class={classes.tagList}>
                {state.item.subjectNames ? (
                  <div class={classes.tag}>{state.item.subjectNames}</div>
                ) : null}

                {/* <div class={classes.tag}>圆号</div> */}
              </div>
            </div>
          </div>
          {/* <div class={classes.right}></div> */}
        </div>
      </div>
    )
  }
})