import { defineComponent, toRefs, reactive, onMounted, ref } from 'vue'

import classes from './index.module.less'
import hold from '@/components/albumItem/images/hold.png'
import { useRouter } from 'vue-router'
export default defineComponent({
  name: 'albumItem',
  props: {
    detail: {
      type: Object,
      default: {
        albumCoverUrl: '',
        albumDesc: '',
        albumFavoriteCount: 0,
        albumName: '',
        albumStatus: 0,
        albumTag: '',
        auditVersion: 0,
        createBy: 0,
        createTime: '',
        delFlag: null,
        hotFlag: null,
        id: 0,
        musicSheetCount: 0,
        musicTagNames: '',
        sortNumber: 0,
        topFlag: null,
        updateBy: 34,
        updateTime: ''
      }
    }
  },
  emits:['albumDetail'],
  setup(props,conent) {
    const state = reactive({
      detail: props.detail
    })
    const router = useRouter()
    const gotoAlbum = ()=>{
      conent.emit('albumDetail',state.detail.id)
    }
    return () => (
      <>
        <div class={classes.itemWrap} onClick={gotoAlbum}>
          <img
            src={state.detail.albumCoverUrl ? state.detail.albumCoverUrl : hold}
            alt=""
            class={classes.hold}
          />
          <h2>{state.detail.albumName}</h2>
        </div>
      </>
    )
  }
})
