import { defineComponent, reactive, ref } from 'vue'
import styles from './student-cell.module.less'
import { Icon, ActionSheet, showToast } from 'vant'
import { useRouter } from 'vue-router'
import defaultIcon from '@/school/images/student-icon.png'
import msgIcon from '@/school/images/msg-icon.png'
import { postMessage } from '@/helpers/native-message'
import { attType } from '@/constant'

export default defineComponent({
  props: ['item'],
  name: 'student-cell',
  setup(props) {
    const router = useRouter()
    const gotoMsg = async () => {
      try {
        await postMessage({
          api: 'joinChatGroup',
          content: {
            type: 'single', // single 单人 multi 多人
            id: props.item.studentImId
          }
        })
      } catch (e) {
        showToast('发起聊天失败')
      }
    }

    return () => (
      <>
        <div class={styles.itemWrap} onClick={gotoMsg}>
          <div class={styles.itemLeft}>
            <div class={styles.headerWrap}>
              <img src={props.item.studentAvatar ? props.item.studentAvatar : defaultIcon} alt="" />
            </div>
          </div>
          <div class={styles.itemRight}>
            <div class={styles.infoWrap}>
              <p>{props.item.nickName}</p>

              <div class={[styles[props.item.status], styles.statusTag]}>
                {attType[props.item.status]}
              </div>
            </div>
            <img class={styles.msgIcon} src={msgIcon} alt="" />
          </div>
        </div>
      </>
    )
  }
})
