import { Cell } from 'vant'
import { defineComponent } from 'vue'
import styles from './index.module.less'

import iconStudent from '@common/images/icon_student.png'

export default defineComponent({
  name: 'student',
  props: {
    item: {
      type: Object,
      default: {}
    },
    onClick: {
      type: Function,
      default: (item: any) => {}
    },
    border: {
      type: Boolean,
      default: true
    }
  },
  render() {
    return (
      <Cell
        center
        class={styles.student}
        border={this.border}
        onClick={() => {
          this.onClick(this.item)
        }}
        v-slots={{
          icon: () => (
            <img
              src={this.item.avatar || iconStudent}
              class={styles.studentImg}
            />
          ),
          title: () => (
            <div class={styles.info}>
              <p class={styles.studentName}>{this.item.userName}</p>
              <p>
                {this.item.subjectName && (
                  <span class={styles.subject}>{this.item.subjectName}</span>
                )}
              </p>
            </div>
          )
        }}
      >
        {this.$slots.default && this.$slots.default()}
      </Cell>
    )
  }
})
