import { defineComponent, PropType } from 'vue'
import { Image, CellGroup, Cell, Icon } from 'vant'
import styles from './live-item.module.less'
import dayjs from 'dayjs'

import iconSuccess from '@common/images/icon_success.png'
import iconTeacher from '@common/images/icon_teacher.png'
import iconTimer from '@common/images/icon_timer3.png'

interface IProps {
  backgroundPic: string
  courseGroupId: number
  courseGroupName: string
  courseNum: string
  courseStartTime?: number
  coursePrice: number
  teacherName: string
  teacherId: number
  avatar?: string
  studentCount: number
  existBuy: number
  subjectName: string
}

export default defineComponent({
  name: 'liveItem',
  props: {
    onClick: {
      type: Function,
      default: (item?: any) => {}
    },
    liveInfo: {
      type: Object as PropType<IProps>,
      default: {}
    },
    coverClass: {
      type: String,
      defualt: ''
    }
  },
  data() {
    return {
      backgroundPic: '',
      avatar: ''
    }
  },
  mounted() {
    this.backgroundPic = this.liveInfo.backgroundPic + '?t' + +new Date()
    this.avatar = this.liveInfo.avatar + '?t' + +new Date()
  },
  render() {
    // console.log(this.liveInfo, 121212)
    return (
      <Cell
        center
        border={false}
        class={styles.liveItem}
        onClick={() => this.onClick(this.liveInfo)}
        v-slots={{
          icon: () => (
            <div style={{ position: 'relative' }}>
              <img
                class={[styles.liCover, this.coverClass]}
                src={this.backgroundPic}
                crossorigin="anonymous"
                style={{
                  objectFit: 'cover'
                }}
              />
              {this.liveInfo.subjectName && (
                <span class={styles.subjectName}>
                  {this.liveInfo.subjectName}
                </span>
              )}
            </div>
          ),
          title: () => (
            <div>
              <div class={[styles.liTitle, 'van-ellipsis', 'itemTitle']}>
                {this.liveInfo.courseGroupName}
              </div>
              <div class={styles.liUserInfo}>
                <p class={styles.liteachername}>
                  {/* 老师： */}
                  {/* <Image
                    src={this.liveInfo.avatar || iconTeacher}
                    class={styles.liteacherIcon}
                  /> */}
                  <img
                    src={this.liveInfo.avatar ? this.avatar : iconTeacher}
                    class={styles.liteacherIcon}
                    crossorigin="anonymous"
                    style={{
                      objectFit: 'cover'
                    }}
                  />
                  {this.liveInfo.teacherName ||
                    `游客${this.liveInfo.teacherId}`}
                </p>
                {this.liveInfo.courseStartTime && (
                  <p>
                    <img src={iconTimer} class={styles.iconTimer} />
                    {dayjs(this.liveInfo.courseStartTime).format(
                      'MM月DD日 HH:mm'
                    )}
                  </p>
                )}
              </div>
              <div class={styles.liPrice}>
                <p>
                  {this.liveInfo.coursePrice > 0 && (
                    <span class={styles.price}>
                      <i>¥</i>
                      {this.liveInfo.coursePrice}
                    </span>
                  )}
                  {this.liveInfo.coursePrice == 0 && (
                    <span class={styles.price}>免费</span>
                  )}

                  <span class={styles.classNum}>
                    {this.liveInfo.courseNum}课时
                  </span>
                </p>
                {this.liveInfo.existBuy === 1 && (
                  <span class={styles.buyNum}>
                    {this.liveInfo.coursePrice == 0 ? '已领取' : '已购买'}
                  </span>
                )}
                {/* : (
                <span class={styles.num}>
                   {this.liveInfo.studentCount}人已购买
                </span>
                ) */}
              </div>
            </div>
          )
        }}
      />
    )
  }
})
