import { defineComponent, PropType } from 'vue'
import styles from './index.module.less'
import { Cell, Icon, Image, Tag } from 'vant'
import videoStop from '@common/images/icon_video_stop.png'
import bars from '@common/svg/bars.svg'
import iconAlbum from '@views/music/component/images/icon_album_active.png'
import iconMusic from '@views/music/component/images/icon_music_active.png'

/**
 * @description: 课程视频列表项
 * @param {title} 视频标题
 * @param {imgUrl} 视频封面图
 * @param {content} 视频内容
 */
interface IDetail {
  id?: number
  title: string
  content?: string
  imgUrl?: string
  videoUrl?: string
  index?: number
}

interface IInfos {
  relationMusicAlbum: string
  musicAlbumName: string
  musicAlbumId: string | number
}

export default defineComponent({
  name: 'CourseVideoItem',
  props: {
    detail: {
      type: Object as PropType<IDetail>,
      required: true
    },
    musicAlbumInfos: {
      type: Array as PropType<IInfos[]>,
      default: () => {
        return []
      }
    },
    border: {
      type: Boolean,
      default: false
    },
    onPlay: {
      type: Function as PropType<(detail: IDetail) => void>,
      default: () => {}
    },
    onMusicAlbumDetail: {
      type: Function as PropType<(detail: IDetail) => void>,
      default: () => {}
    },
    playId: {
      // 播放视屏编号
      type: Number,
      default: 0
    }
  },
  render() {
    return (
      <div class={styles.CourseVideoItem}>
        <Cell
          class={styles.videoSection}
          border={this.border}
          onClick={() => this.onPlay(this.detail)}
          v-slots={{
            icon: () => (
              <div class={styles.videoImg}>
                <Image src={this.detail.imgUrl} fit="cover" />
                {this.detail.id === this.playId ? (
                  <div class={styles.living}>
                    <Image src={bars} class={styles.animation} />
                    <span>播放中</span>
                  </div>
                ) : (
                  <Icon class={styles.videoStop} name={videoStop} size={26} />
                )}
              </div>
            ),
            title: () => (
              <div class={[styles.videoTitle, 'videoSmall']}>
                <p
                  class={[
                    styles.videoTitleText,
                    'van-ellipsis',
                    this.detail.id === this.playId && styles.active
                  ]}
                >
                  {this.detail.title}
                </p>
                <p class={[styles.videoTitleContent, 'van-multi-ellipsis--l2']}>
                  {this.detail.content}
                </p>
              </div>
            )
          }}
        ></Cell>
        {this.musicAlbumInfos.map((info: any) => (
          <div
            class={[
              styles.infoVideo,
              info.relationMusicAlbum === 'ALBUM'
                ? styles.albumInfo
                : styles.musicInfo
            ]}
            onClick={() => this.onMusicAlbumDetail(info)}
          >
            <div>
              <img
                src={
                  info.relationMusicAlbum === 'ALBUM' ? iconAlbum : iconMusic
                }
              />
              {info.relationMusicAlbum === 'ALBUM' ? (
                <span>专辑：{info.musicAlbumName}</span>
              ) : (
                <span>曲目：{info.musicAlbumName}</span>
              )}
            </div>

            <div>
              {info.useRelationType === 'GIFT' && (
                <Tag type="primary" class={styles.song}>
                  赠送
                </Tag>
              )}
              <Icon name="arrow" />
            </div>
          </div>
        ))}
      </div>
    )
  }
})
