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'

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: {}
    }
  },
  render() {
    return (
      <Cell
        center
        border={false}
        class={styles.liveItem}
        onClick={() => this.onClick(this.liveInfo)}
        v-slots={{
          icon: () => (
            <div style={{ position: 'relative' }}>
              <Image
                class={styles.liCover}
                fit="cover"
                src={this.liveInfo.backgroundPic}
              />
              <span class={styles.subjectName}>
                {this.liveInfo.subjectName}
              </span>
            </div>
          ),
          title: () => (
            <div>
              <div class={[styles.liTitle, 'van-ellipsis']}>
                {this.liveInfo.courseGroupName}
              </div>
              <div class={styles.liUserInfo}>
                <p class={styles.liteachername}>
                  {/* 老师： */}
                  <Image
                    src={this.liveInfo.avatar || iconTeacher}
                    class={styles.liteacherIcon}
                  />
                  {this.liveInfo.teacherName ||
                    `游客${this.liveInfo.teacherId}`}
                </p>
                <p>
                  开课时间：
                  {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>
                  )}

                  <span class={styles.classNum}>
                    {this.liveInfo.courseNum}课时
                  </span>
                </p>
                {this.liveInfo.existBuy === 1 && (
                  <span class={styles.buyNum}>
                    {/* <Icon name={iconSuccess} size="15" /> */}
                    学习
                  </span>
                )}
                {/* : (
                <span class={styles.num}>
                   {this.liveInfo.studentCount}人学习
                </span>
                ) */}
              </div>
            </div>
          )
        }}
      />
    )
  }
})