import { defineComponent, reactive, ref, onMounted } from 'vue'
import styles from './teacher-attendDetail.module.less'
import clockIcon from '../images/clock-icon.png'
import errorIcon from '../images/error-icon.png'
import successIcon from '../images/success-icon.png'
import defaultIcon from '@/school/images/default-icon.png'
import sendmsgIcon from '@/school/images/sendmsg-icon.png'
import phoneIcon from '@/school/images/phone-icon.png'
import OHeader from '@/components/o-header'
import msgIcon from '@/school/images/msg-icon.png'
import { Icon, ActionSheet, showToast } from 'vant'
import dayjs from 'dayjs'
import { useRoute, useRouter } from 'vue-router'
import { state as globalState } from '@/state'
import request from '@/helpers/request'
import { postMessage } from '@/helpers/native-message'
import { teacherAttType } from '@/constant/index'
export default defineComponent({
  props: ['item'],
  name: 'teacher-attendDetail',
  setup(props) {
    const router = useRouter()
    const route = useRoute()
    const gotoStudentDetail = () => {
      // router.push({ path: '/student-att-day', query: { time: teacherAttInfo.value.time } })
    }
    const attendanceScope = ref(0)
    const teacherAttInfo = ref({} as any)
    const platformApi = ref(globalState.platformApi)
    console.log(platformApi.value)
    const showContact = ref(false)
    const startContact = () => {
      showContact.value = true
    }
    const closeSheet = () => {
      showContact.value = false
    }
    const postMsg = async () => {
      try {
        await postMessage({
          api: 'joinChatGroup',
          content: {
            type: 'single', // single 单人 multi 多人
            id: teacherAttInfo.value.imUserId
          }
        })
        closeSheet()
      } catch (e) {
        showToast('发起聊天失败')
        closeSheet()
      }
    }

    const callPhone = async () => {
      try {
        await postMessage({
          api: 'callPhone',
          content: {
            phone: teacherAttInfo.value.teacherPhone
          }
        })
        closeSheet()
      } catch (e) {
        showToast('拨号失败')
        closeSheet()
      }
    }
    const getCourseAtt = async () => {
      try {
        const res = await request.post(
          `${platformApi.value}/courseSchedule/teacherAttendance/course/${route.query.courseScheduleId}`,
          {}
        )
        teacherAttInfo.value = res.data
        // res.data.sysParamConfigs.forEach((item: any) => {
        //   if (item.paramName == 'scope_of_attendance') {
        //     attendanceScope.value = item.paramValue
        //   }
        // })
      } catch (e) {
        console.log(e)
      }
    }
    onMounted(() => {
      getCourseAtt()
    })

    const setAddress = async (myPoint: string) => {
      if (!myPoint) {
        // showToast('当前暂无定位')
        return
      }

      try {
        await postMessage({
          api: 'sourseMapApi',
          content: {
            type: 'display',
            orginPoint: teacherAttInfo.value.schoolLongitudeLatitude,
            myPoint: myPoint,
            limitDistance: teacherAttInfo.value.scopeOfAttendance
          }
        })
      } catch (e) {
        console.log(e)
      }
    }
    return () => (
      <>
        <OHeader></OHeader>
        <div class={styles.itemWrap} onClick={gotoStudentDetail}>
          <div class={styles.itemWrapTopCard}>
            <div class={styles.itemWrapTop}>
              <div class={styles.itemWrapTopLeft}>
                <div class={styles.clockWrap}>
                  <img src={clockIcon} alt="" />
                </div>
                <p class={styles.leftTimer}>
                  {dayjs(teacherAttInfo.value?.startTime).format('YYYY-MM-DD HH:mm')}
                  {'~'}
                  {dayjs(teacherAttInfo.value?.endTime).format('HH:mm')}
                </p>
              </div>
              <div class={styles.itemWrapTopRight}>{/* <Icon name="arrow"></Icon> */}</div>
            </div>
            <div class={styles.itemWrapBottom}>
              <div class={styles.courseInfo}>
                <img
                  class={styles.headImgs}
                  src={
                    teacherAttInfo.value.teacherAvatar
                      ? teacherAttInfo.value.teacherAvatar
                      : defaultIcon
                  }
                  alt=""
                />
                <div class={styles.infoMsg}>
                  <p class={styles.infoMsgMain}>
                    {teacherAttInfo.value?.classGroupName}-{teacherAttInfo.value?.teacherName}
                  </p>
                  <p
                    class={[
                      styles.infoMsgSub,
                      platformApi.value == '/api-teacher' ? styles.infoMsgSubTeacher : ''
                    ]}
                  >
                    {teacherAttInfo.value?.orchestraName}
                  </p>
                </div>
              </div>
              {platformApi.value == '/api-teacher' ? null : (
                <div
                  class={styles.msgIcon}
                  onClick={(e: any) => {
                    e.stopPropagation()
                    e.preventDefault()
                    startContact()
                  }}
                >
                  <img src={msgIcon} alt="" />
                </div>
              )}
            </div>
          </div>

          <div class={styles.attInfo}>
            <div
              class={
                teacherAttInfo.value?.signInStatus === 'NORMAL' ? styles.passWrap : styles.goWrap
              }
            >
              <div class={styles.attInfoDot}>
                <div class={styles.attInfoDotTitle}>
                  <span>
                    上课时间 <span>{dayjs(teacherAttInfo.value?.startTime).format('HH:mm')}</span>
                  </span>
                  <img
                    src={teacherAttInfo.value?.signInStatus === 'NORMAL' ? successIcon : errorIcon}
                    alt=""
                  />
                </div>
                <p class={styles.signTime}>
                  {teacherAttInfo.value?.signInTime ? (
                    <div class={styles.textWidth}>
                      {teacherAttInfo.value?.signInStatus === 'NORMAL'
                        ? '签到时间'
                        : teacherAttType[teacherAttInfo.value?.signInStatus]}
                    </div>
                  ) : (
                    ''
                  )}
                  {teacherAttInfo.value?.signInTime ? (
                    <span>{dayjs(teacherAttInfo.value?.signInTime).format('HH:mm:ss')}</span>
                  ) : (
                    '未签到'
                  )}
                </p>
              </div>
            </div>
            <div
              class={
                teacherAttInfo.value?.signInLongitudeLatitudeStatus === 'NORMAL'
                  ? styles.passWrap
                  : styles.goWrap
              }
            >
              <div class={styles.attInfoDot}>
                <div class={styles.attInfoDotTitle}>
                  <span>签到定位</span>
                  <img
                    src={
                      teacherAttInfo.value?.signInLongitudeLatitudeStatus === 'NORMAL'
                        ? successIcon
                        : errorIcon
                    }
                    alt=""
                  />
                </div>
                <div
                  class={styles.attRang}
                  onClick={() => {
                    setAddress(teacherAttInfo.value.signInLongitudeLatitude)
                  }}
                >
                  {teacherAttInfo.value.signInLongitudeLatitude ? (
                    <p>
                      {teacherAttInfo.value?.signInLongitudeLatitudeStatus === 'NORMAL'
                        ? '考勤范围内'
                        : '考勤范围外'}
                    </p>
                  ) : (
                    <p>暂无定位</p>
                  )}
                  {teacherAttInfo.value.signInLongitudeLatitude ? (
                    <p
                      class={[
                        styles.locP,
                        teacherAttInfo.value?.signInLongitudeLatitudeStatus === 'NORMAL'
                          ? styles.pass
                          : styles.error
                      ]}
                    >
                      查看定位<Icon name="arrow" class={styles.arrow}></Icon>
                    </p>
                  ) : null}
                </div>
              </div>
            </div>
          </div>
          <div class={[styles.attInfo, styles.attBackInfo]}>
            <div
              class={
                teacherAttInfo.value?.signOutStatus === 'NORMAL' ? styles.passWrap : styles.goWrap
              }
            >
              <div class={styles.attInfoDot}>
                <div class={styles.attInfoDotTitle}>
                  <p>
                    下课时间 <span>{dayjs(teacherAttInfo.value?.endTime).format('HH:mm')}</span>
                  </p>
                  <img
                    src={teacherAttInfo.value?.signOutStatus === 'NORMAL' ? successIcon : errorIcon}
                    alt=""
                  />
                </div>
                <p class={styles.signTime}>
                  {teacherAttInfo.value?.signOutTime ? (
                    <>
                      <div class={styles.textWidth}>
                        {teacherAttInfo.value?.signOutStatus === 'NORMAL'
                          ? '签退时间'
                          : teacherAttType[teacherAttInfo.value?.signOutStatus]}
                      </div>
                      <span>{dayjs(teacherAttInfo.value?.signOutTime).format('HH:mm:ss')}</span>
                    </>
                  ) : (
                    '未签退'
                  )}
                </p>
              </div>
            </div>
            <div
              class={
                teacherAttInfo.value?.signOutLongitudeLatitudeStatus === 'NORMAL'
                  ? styles.passWrap
                  : styles.goWrap
              }
            >
              <div class={styles.attInfoDot}>
                <div class={styles.attInfoDotTitle}>
                  <span>签退定位</span>
                  <img
                    src={
                      teacherAttInfo.value?.signOutLongitudeLatitudeStatus === 'NORMAL'
                        ? successIcon
                        : errorIcon
                    }
                    alt=""
                  />
                </div>
                <div
                  class={styles.attRang}
                  onClick={() => {
                    setAddress(teacherAttInfo.value.signOutLongitudeLatitude)
                  }}
                >
                  {teacherAttInfo.value.signOutLongitudeLatitude ? (
                    <>
                      <p>
                        {' '}
                        {teacherAttInfo.value?.signOutLongitudeLatitudeStatus === 'NORMAL'
                          ? '考勤范围内'
                          : '考勤范围外'}
                      </p>
                      <p
                        class={[
                          styles.locP,
                          teacherAttInfo.value?.signOutLongitudeLatitudeStatus === 'NORMAL'
                            ? styles.pass
                            : styles.error
                        ]}
                      >
                        查看定位<Icon name="arrow" class={styles.arrow}></Icon>
                      </p>
                    </>
                  ) : (
                    <>
                      <p>暂无定位</p>
                      <p></p>
                    </>
                  )}
                </div>
              </div>
            </div>
          </div>
          <ActionSheet
            class="bottomSheet"
            v-model:show={showContact.value}
            v-slots={{
              description: () => (
                <div class={styles.bottomTitle}>
                  <div class={styles.bottomTitleLeft}>
                    <span></span>
                    <p>联系方式</p>
                  </div>
                  <div
                    class={styles.bottomTitleRight}
                    onClick={(e: any) => {
                      e.stopPropagation()
                      e.preventDefault()
                      closeSheet()
                    }}
                  >
                    <Icon class={styles.cross} name="cross"></Icon>
                  </div>
                </div>
              )
            }}
          >
            <div class={styles.bottomConent}>
              <div
                class={styles.bottomConentLeft}
                onClick={(e: any) => {
                  e.stopPropagation()
                  e.preventDefault()
                  postMsg()
                }}
              >
                <div class={styles.bottomImgWrap}>
                  <img src={sendmsgIcon} alt="" />
                </div>
                <p>发送消息</p>
              </div>
              <div
                class={styles.bottomConentRight}
                onClick={(e: any) => {
                  e.stopPropagation()
                  e.preventDefault()
                  callPhone()
                }}
              >
                <div class={styles.bottomImgWrap}>
                  <img src={phoneIcon} alt="" />
                </div>
                <p>拨打电话</p>
              </div>
            </div>
          </ActionSheet>
        </div>
      </>
    )
  }
})