import { defineComponent, PropType, reactive, watch } from 'vue'
import icon from './images/icon.png'
import classes from './index.module.less'
import detaile from './images/detaile.png'
import music from './images/music.png'
import arrow from './images/arrow.png'
import { goodsType } from '@/constant'
import { useRouter } from 'vue-router'
import { ElButton } 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
  composer: string
  titleImg: string
  exquisiteFlag: number
  albumNums: number
  chargeType: string
  auditStatus?: string
  paymentType: []
}
const chargeTypes = {
  CHARGE: '点播',
  FREE: '免费',
  VIP: 'VIP'
}

export default defineComponent({
  name: 'music-item',
  props: {
    item: {
      type: Object as () => Props,
      default: () => ({})
    },
    onClick: {
      type: Function,
      default: (item: any) => {}
    },
    onChangeState: {
      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 = () => {
      console.log(1)
      // 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>
                {/* {Array.isArray(state.item.paymentType) &&
                  state.item.paymentType.map((tag: string) => (
                    <div
                      class={[
                        classes.touchButton,
                        classes[tag?.toLocaleLowerCase()]
                      ]}
                    >
                      {chargeTypes[tag] ? chargeTypes[tag] : '点播'}
                    </div>
                  ))} */}
                {state.item.exquisiteFlag === 1 && (
                  <img src={iconFine} class={classes.iconFine} />
                )}
                {state.item.albumNums > 0 && (
                  <img src={iconAlbum} class={classes.iconAlbum} />
                )}
                {state.item.musicSheetName}
              </p>
              <div class={classes.authorInfo}>
                <span>作曲: {state.item.composer}</span>
                {/* <img
                  class={classes.icon}
                  src={state.item.addUserAvatar || icon}
                  alt=""
                />
                <span class={classes.authorName}>
                  {state.item.addName ? state.item.addName : '小酷有谱'}
                </span>
                */}
              </div>

              <div class={classes.tagList}>
                {state.item.subjectNames ? (
                  <div class={classes.tag}>{state.item.subjectNames}</div>
                ) : null}
              </div>
            </div>
          </div>
          <div class={classes.right}>
            {state.item.auditStatus === 'PASS' && (
              <ElButton
                plain
                type="danger"
                round
                size="small"
                style={{
                  padding: '8px 12px'
                }}
                onClick={(e: MouseEvent) => {
                  e.stopPropagation()
                  props.onChangeState(state.item)
                }}
              >
                下架
              </ElButton>
            )}

            <img class={classes.arrow} src={arrow} alt="" />
          </div>
        </div>
      </div>
    )
  }
})
