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: () => []
    },
    isSquare: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    return () => (
      <CellGroup border={false}>
        {props.list.map((item: any) => (
          <Cell class={styles.cell} center>
            {{
              title: () => (
                <div class={styles.top}>
                  <div class={styles.timer}>
                    <img src={iconTimer} />
                    <span>购买时间：{item.orderTime}</span>
                  </div>
                  <div class={styles.userInfo}>
                    <span class={styles.name}>{item.userName}</span>
                    <img src={item.userAvatar || icon_student} />
                  </div>
                </div>
              ),
              label: () => (
                <div class={styles.content}>
                  <img class={[styles.cover, props.isSquare && styles.cover1]} src={item.bizCover} />
                  <div class={styles.info}>
                    <div class={styles.iTitle}>{item.bizName}</div>
                    <div class={styles.iPrice}>
                      <span>预计收入</span>
                      <span class={styles.price}>
                        <i>￥</i>
                        {moneyFormat(item.amount || 0)}
                      </span>
                    </div>
                  </div>
                </div>
              )
            }}
          </Cell>
        ))}
      </CellGroup>
    )
  }
})
