import { Image } from 'vant'
import { defineComponent, PropType } from 'vue'
import styles from './index.module.less'

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

interface UserType {
  avatar: string
  studentId?: number
  studentName: string
  createTime: string
}

export default defineComponent({
  name: 'UserDetail',
  props: {
    users: {
      type: Object as PropType<UserType>,
      default: {}
    }
  },
  render() {
    return (
      <div class={styles['user-detail']}>
        <div class={styles['user-names']}>
          <Image
            class={styles['user-logo']}
            src={this.users.avatar || defaultIcon}
            fit="cover"
          />
          {this.users.studentName || `游客${this.users.studentId || ''}`}
        </div>
        <span class={styles['user-time']}>{this.users.createTime}</span>
      </div>
    )
  }
})
