import { defineComponent, PropType } from 'vue'
import { Tag } from 'vant'
import qs from 'query-string'
import * as RuntimeUtils from '/src/pages/detail/runtime'
import { MusicSheelDetail } from '../index.d'
import stytles from './base.module.less'
import { useOriginSearch } from '../uses'
import { postMessage } from '/src/helpers/native-message'

const chargeType = {
  VIP: '会员',
  CHARGE: '点播',
  FREE: '免费',
}

const SwitchTag = defineComponent({
  name: 'SwitchTag',
  props: {
    type: String,
  },
  setup(props) {
    return () => (
      <Tag plain class={[stytles.tag, props.type, 'van-hairline--surround']}>
        {chargeType[props.type! as keyof typeof chargeType]}
      </Tag>
    )
  },
})

export default defineComponent({
  name: 'MusicList-MusicScore-Item',
  props: {
    item: {
      type: Object as PropType<MusicSheelDetail>,
    },
  },
  setup(props) {
    const search = useOriginSearch()

    const behaviorId = sessionStorage.getItem('behaviorId') || '' + new Date().valueOf()
    const switchMusic = () => {
      // 暂停播放
      RuntimeUtils.pause()
      // 销毁播放器
      postMessage({
        api: 'cloudDestroy'
      })
      // @ts-ignore
      // if (!window.isLoading) {
      // @ts-ignore
      // window.isLoading = false
      postMessage({
        api: 'cloudLoading',
        content: {
          show: true,
          type: 'fullscreen',
        },
      })
      location.href =
        location.origin +
        location.pathname +
        '?' +
        qs.stringify({
          ...search,
          behaviorId,
          id: props.item?.id as unknown as string,
          _t: new Date().valueOf(),
        })
      // }
    }

    return () => {
      return (
        <div
          class={[stytles.item, { active: (props.item?.id as unknown) == (search.id as unknown) }]}
          onClick={() => switchMusic()}
        >
          <div style={{display: 'flex'}}>{(props.item?.paymentType || '').split(',').map((t: string) => <SwitchTag key={t} type={t} />)}</div>
          <p>{props.item?.musicSheetName}</p>
        </div>
      )
    }
  },
})
