import { defineComponent, reactive, ref } from 'vue'
import styles from './approval-item.module.less'
import clockIcon from '@/school/attendance/images/clock-icon.png'
import passIcon from '../images/pass-icon.png'
import unpassIcon from '../images/unpass-icon.png'
import defaultIcon from '@/school/images/default-icon.jpg'
import msgIcon from '@/school/images/msg-icon.png'
import { Icon, ActionSheet, showToast } from 'vant'
import dayjs from 'dayjs'
import { useRouter } from 'vue-router'
import { postMessage } from '@/helpers/native-message'
export default defineComponent({
  props: ['item', 'type'],
  name: 'approval-item',
  setup(props) {
    const router = useRouter()
    const gotoStudentDetail = () => {
      // router.push({ path: '/student-att-day', query: { time: props.item.time } })
    }
    const gotoMsg = async () => {
      console.log(props.item)
      try {
        await postMessage({
          api: 'joinChatGroup',
          content: {
            type: 'single', // single 单人 multi 多人
            id: props.item.imUserId
          }
        })
      } catch (e) {
        showToast('发起聊天失败')
      }
    }
    return () => (
      <>
        <div class={styles.itemWrap} onClick={gotoStudentDetail}>
          <div class={styles.itemWrapTop}>
            <div class={styles.itemWrapTopLeft}>
              <div class={styles.clockWrap}>
                <img src={clockIcon} alt="" />
              </div>
              <p class={styles.leftTimer}>
                {dayjs(props.item.createTime).format('YYYY-MM-DD hh:mm')}
              </p>
            </div>
            {props.type == 'end' && props.item.status == 'PASS' ? (
              <div class={styles.itemWrapTopRight}>
                <Icon class={styles.passIcon} name={passIcon}></Icon>
                <p class={styles.passLabel}>通过</p>
              </div>
            ) : null}
            {props.type == 'end' && props.item.status == 'UNPASS' ? (
              <div class={styles.itemWrapTopRight}>
                <Icon class={styles.passIcon} name={unpassIcon}></Icon>
                <p class={styles.unpassLabel}>拒绝</p>
              </div>
            ) : null}
            {props.type == 'doing' && props.item.status == 'DOING' ? (
              <div class={styles.itemWrapTopRight} onClick={gotoMsg}>
                <Icon class={styles.msgIcon} name={msgIcon}></Icon>
              </div>
            ) : null}
          </div>
          <div class={styles.itemWrapBottom}>
            <div class={styles.courseInfo}>
              <div class={styles.courseInfoLeft}>
                <img class={styles.headImgs} src={defaultIcon} alt="" />
                <div class={styles.infoMsg}>
                  <p class={styles.infoMsgMain}>{props.item.nickName}</p>
                  {props.item.clientType == 'STUDENT' ? (
                    <p class={[styles.infoMsgSub, styles.student]}>学生</p>
                  ) : (
                    <p class={[styles.infoMsgSub, styles.teacher]}>老师</p>
                  )}
                </div>
              </div>
              <div class={styles.courseInfoRight}>
                {props.item.leaveCategoryId == 1 ? <p class={styles.approvalType}>请假</p> : null}
                {props.item.leaveCategoryId == 2 ? <p class={styles.approvalType}>退团</p> : null}
                {props.type != 'doing' ? <Icon class={styles.icons} name="arrow"></Icon> : null}
              </div>
            </div>
          </div>
        </div>
      </>
    )
  }
})