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

import activityLogo from '../images/activity_logo.png'
import { moneyFormat } from '@/helpers/utils'

export default defineComponent({
  name: 'OrderLive',
  props: {
    item: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      collapse: [1]
    }
  },
  render() {
    const item = this.item
    return (
      <div class={styles.liveOrder}>
        <CellGroup border={false}>
          <Cell
            center
            v-slots={{
              title: () => (
                <div class={[styles.title, 'van-ellipsis']}>
                  <span class={styles.line}></span>
                  活动报名
                </div>
              )
            }}
          />
          <Cell
            center
            border={false}
            title={item.goodsName}
            titleClass={styles.teacher}
            v-slots={{
              icon: () => <Image class={styles.userLogo} src={activityLogo} />,
              default: () => (
                <span class={styles.price}>
                  <i>¥</i>
                  {moneyFormat(item.actualPrice)}
                </span>
              )
            }}
          />
          {/* 
          <Cell border={false}>
            <Collapse border={false} v-model={this.collapse}>
              <CollapseItem
                title="课程详情"
                name={1}
                class={styles.collapseItem}
              >
                <div class={styles.classItem}>
                  {item.courseInfo.map((item: any) => (
                    <div class={styles.time}>{item.courseTime}</div>
                  ))}
                </div>
              </CollapseItem>
            </Collapse>
          </Cell> */}
        </CellGroup>
      </div>
      // 视频课
    )
  }
})
