import { Cell, CellGroup, Icon, Image, Tag } from 'vant'
import { defineComponent, PropType } from 'vue'
import styles from './index.module.less'

// import iconUserNum from '@common/images/icon_user_num.png'
import defaultIcon from '@common/images/icon_teacher.png'
import iconTimer from '@common/images/icon_timer4.png'
import iconCourse from './images/icon-course.png'
// import IconXueli from '@common/images/icon-xueli.png'
// import IconJiaozi from '@common/images/icon-jiaozi.png'
// import item from '@/views/coupons/item'
/**
 * @description: 视频详情
 * @param {type} headUrl 头像
 * @param {type} username 姓名
 * @param {type} startTime 开始时间
 * @param {type} courseStartTime
 * @param {type} buyNum 购买用户数
 * @param {type} payType 收费方式
 * @param {type} type 课程类型
 * @param {type} subjectName 科目名称
 * @param {type} lessonPrice 价格
 * @param {type} lessonCoverUrl 视频封面
 * @param {type} lessonDesc 课程描述
 * @param {type} lessonNum 课程数
 * @param {type} lessonName 课程名称
 * @param {type} relationType 赠送类型
 * @param {type} completeCourseNum 已上课时
 * @param {type} isShowCourse 是否显示课程
 */
interface UserType {
  headUrl: string
  username: string
  startTime?: string
  courseStartTime?: any
  id?: number
  buyNum?: number
  payType?: string
  type?: string
  subjectName?: string
  lessonPrice: number
  lessonNum?: number
  lessonDesc?: string
  mixStudentNum?: string | number
  lessonCoverUrl: string
  lessonName: string
  auditVersion: number
  relationType?: string
  completeCourseNum?: number
  isShowCourse?: boolean
}

export default defineComponent({
  name: 'user-detail',
  props: {
    userInfo: {
      type: Object as PropType<UserType>,
      required: true
    },
    showType: {
      type: String as PropType<'BUY' | 'TIME'>,
      default: 'BUY'
    },
    showBuy: {
      type: Boolean,
      default: true
    },
    border: {
      type: Boolean,
      default: false
    },
    onUserDetail: {
      // 点击用户头像等信息
      type: Function,
      default: (item: any) => {}
    }
  },
  render() {
    return (
      <div class={styles.userDetail}>
        {this.userInfo.subjectName ? <span class={styles.subjectName}>{this.userInfo.subjectName}</span> : ""}
        <Image
          class={[styles.banner]}
          src={this.userInfo.lessonCoverUrl}
          fit="cover"
        />
        <CellGroup class={styles.userInfo} border={this.border}>
          <Cell
            title={this.userInfo.lessonName}
            titleClass={styles.userTitle}
            labelClass={styles.userLabel}
            v-slots={{
              label: () =>
                this.userInfo.startTime && (
                  <span
                    class={styles.timers}
                  >
                    <div class={styles.timerSpan}>
                      <Icon
                        name={iconTimer}
                        size="16"
                        style={{ marginRight: '5px' }}
                      />
                      开课时间：
                      {this.userInfo.courseStartTime}
                    </div>

                    {this.showBuy && ['live', 'group'].includes(this.userInfo.type || '') && (
                      <div class={[styles.buyNum, styles.buyNumOther]}>
                        {this.userInfo.type === 'live' ? (
                          <span>
                            {this.userInfo.buyNum}人
                            {this.userInfo.lessonPrice <= 0 &&
                            this.userInfo.auditVersion === 0
                              ? '领取'
                              : '学习'}
                          </span>
                        ) : this.userInfo.type === "group" ?
                          ((this.userInfo.mixStudentNum || 0 > 0) ? <>剩余{this.userInfo.mixStudentNum}个名额</> : '')
                        : ''}
                      </div>
                    )}
                  </span>
                )
            }}
          />
          <Cell
            v-slots={{
              icon: () => (
                <Image
                  onClick={() => {
                    this.onUserDetail(this.userInfo)
                  }}
                  class={styles.avatar}
                  src={this.userInfo.headUrl || defaultIcon}
                  fit="cover"
                />
              ),
              title: () => (
                <div>
                  <div
                    class={styles.name}
                    onClick={() => {
                      this.onUserDetail(this.userInfo)
                    }}
                  >
                    <div class={styles.username}>
                      {this.userInfo.username || `游客${this.userInfo.id || ''}`}
                    </div>
                    {this.showBuy && this.userInfo.type === 'video' && (
                      <div class={[styles.buyNum, styles.buyNumVideo]}>
                        {this.userInfo.buyNum}人学习
                      </div>
                    )}
                  </div>
                  {this.userInfo.isShowCourse ? <div class={styles.classInfo}>
                    <img src={iconCourse} class={styles.iconCourse} />
                    已上课时<span style={{ color: '#2DC7AA'}}>{this.userInfo.completeCourseNum || 0}</span>/总课时 <span>{this.userInfo.lessonNum || 0}</span>
                  </div> : ''}
                </div>
              ),
              value: () => (
                <div class={styles.info}>
                  {/* 0元不显示，为了处理ios审核问题 */}
                  {this.userInfo.payType === 'VIP' ? (
                    <span style={{ color: '#C76E21' }}>会员</span>
                  ) : (
                    <>
                      {this.userInfo.lessonPrice > 0 && (
                        <span class={styles.prices}><span class={styles.fix}>￥</span>{this.userInfo.lessonPrice}</span>
                      )}
                      {this.userInfo.lessonPrice <= 0 &&
                        this.userInfo.auditVersion !== 0 && <>￥{0}</>}
                      {this.userInfo.lessonPrice <= 0 &&
                        this.userInfo.auditVersion === 0 && (
                          <span style={{ color: '#20BEA0' }}>免费</span>
                        )}
                    </>
                  )}
                  <span
                    class={styles.classNum}
                  >
                    /{this.userInfo.lessonNum}课时
                  </span>
                </div>
              )
            }}
          ></Cell>
          {this.userInfo.relationType === 'GIFT' && (
            <Cell
              class={styles.buyTips}
              value={'注：购买本课程即可赠送相关曲目或专辑终生使用权限～'}
            ></Cell>
          )}
        </CellGroup>
      </div>
    )
  }
})
