import { defineComponent, reactive, ref } from 'vue'
import styles from './teacher-item.module.less'
import { Icon, ActionSheet, showToast } from 'vant'
import { useRouter } from 'vue-router'
import defaultIcon from '@/school/images/default-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: 'teacher-item',
  setup(props) {
    const router = useRouter()
    const gotoMsg = async () => {
      try {
        await postMessage({
          api: 'joinChatGroup',
          content: {
            type: 'single', // single 单人 multi 多人
            id: props.item.imUserId
          }
        })
      } catch (e) {
        showToast('发起聊天失败')
      }
    }
    console.log(props.item)
    return () => (
      <>
        <div class={styles.itemWrap} onClick={gotoMsg}>
          <div class={styles.topWrap}>
            <div class={styles.itemLeft}>
              <div class={styles.headerWrap}>
                <img src={props.item.avatar ? props.item.avatar : defaultIcon} alt="" />
              </div>
            </div>
            <div class={styles.itemRight}>
              <div class={styles.infoWrap}>
                <p>{props.item.nickname}</p>
              </div>
              <img class={styles.msgIcon} src={msgIcon} alt="" />
            </div>
          </div>
          <div>
            <div class={styles.bottomWrap}>
              <p>声部：</p>
              <div class={styles.statusTagWrap}>
                {props.item.subjectName.split(',').map((item) => (
                  <div class={styles.statusTag}>{item ? item : '暂无声部'}</div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </>
    )
  }
})
