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

import iconMember from '@common/images/icon_member.png'
import iconTimer from '@common/images/icon_timer.png'
import request from '@/helpers/request'

export default defineComponent({
  name: 'OrderVideo',
  props: {
    item: {
      type: Object,
      default: {}
    }
  },
  render() {
    const item = this.item
    return (
      <div class={styles.videoOrder}>
        <CellGroup
          class={'mb12'}
          border={false}
          style={{ borderRadius: '8px', overflow: 'hidden' }}
        >
          <Cell
            center
            titleClass={styles.titleClass}
            v-slots={{
              icon: () => <Image class={styles.memberLogo} src={iconMember} />,
              title: () => (
                <div class={styles.container}>
                  <div class={styles.title}>小酷Ai{item.title}</div>
                  <div class={styles.price}>
                    <i>¥</i>
                    {(this as any).$filters.moneyFormat(item.price)}
                  </div>
                </div>
              )
            }}
          />

          <Cell
            center
            v-slots={{
              title: () => (
                <div class={styles.timerCell}>
                  <div class={styles.timerTitle}>
                    <Icon name={iconTimer} size={18} />
                    <span style={{ paddingLeft: '5px' }}>生效时间</span>
                  </div>
                  <div class={styles.timer}>
                    {item.startTime} 至 {item.endTime}
                  </div>
                </div>
              )
            }}
          />
        </CellGroup>
      </div>
      // 视频课
    )
  }
})
