import { defineComponent } from 'vue'
import styles from './index.module.less'
import { Cell, CellGroup } from 'vant'
import iconTimer from '@/common/images/icon_timer2.png'
import icon_student from '@/common/images/icon_student.png'
import { moneyFormat } from '@/helpers/utils'

export default defineComponent({
  name: 'teacher-item',
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  setup(props) {
    return () => (
      <CellGroup border={false}>
        {props.list.map((item: any, index) => (
          <Cell class={styles.cell} center>
            {{
              title: () => (
                <div class={styles.timer}>
                  <img src={iconTimer} />
                  <span>购买时间：{item.orderTime}</span>
                </div>
              ),
              label: () => (
                <div class={styles.content}>
                  <div class={styles.userInfo}>
                    <img src={item.userAvatar || icon_student} />
                    <div class={styles.item}>
                      <span class={styles.name}>{item.userName}</span>
                      {item.subjectName && <span class={styles.subjects}>{item.subjectName}</span>}
                    </div>
                  </div>
                  <div class={styles.item} style={{ alignItems: 'center' }}>
                    <span class={styles.name}>课时数</span>
                    <span class={styles.classNum}>
                      {item.bizQuantity} <i style="font-weight: 400;">节</i>
                    </span>
                  </div>
                  <div class={styles.item} style={{ alignItems: 'flex-end' }}>
                    <span class={styles.name}>预计收入</span>
                    <span class={styles.classPrice}>
                      <i>¥</i> {moneyFormat(item.amount || 0)}
                    </span>
                  </div>
                </div>
              )
            }}
          </Cell>
        ))}
      </CellGroup>
    )
  }
})
