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

import iconTeacher from '@common/images/icon_teacher.png'
import request from '@/helpers/request'
import { moneyFormat } from '@/helpers/utils'

export default defineComponent({
  name: 'OrderVideo',
  props: {
    item: {
      type: Object,
      default: {}
    }
  },
  render() {
    const item = this.item
    return (
      <div class={styles.videoOrder}>
        <CellGroup border={false}>
          <Cell
            center
            v-slots={{
              title: () => (
                <div class={[styles.title, 'van-ellipsis']}>
                  <span class={styles.tag}>视频课</span>
                  {item.courseGroupName}
                </div>
              )
            }}
          />
          <Cell
            center
            title={item.teacherName}
            titleClass={styles.teacher}
            v-slots={{
              icon: () => (
                <Image
                  class={styles.userLogo}
                  src={item.avatar || iconTeacher}
                />
              ),
              default: () => (
                <span class={styles.price}>
                  <i>¥</i>
                  {moneyFormat(item.coursePrice)}
                </span>
              )
            }}
          />
        </CellGroup>
      </div>
    )
  }
})