import { Cell, Grid, GridItem, Icon } from 'vant'
import { defineComponent, onMounted, PropType, reactive } from 'vue'
import styles from '../index.module.less'
import iconA from '../images/icon-photo.png'
import iconTime from '../images/icon-time.png'
import iconPrimary from '../images/icon-primary.png'
import iconError from '../images/icon-error.png'
import { courseEmnu } from '@/constant'
import OSticky from '@/components/o-sticky'
import OHeader from '@/components/o-header'
import OEmpty from '@/components/o-empty'
import dayjs from 'dayjs'
import { getSecondRPM } from '@/helpers/utils'
import request from '@/helpers/request'
import { useRoute } from 'vue-router'
import { postMessage } from '@/helpers/native-message'
import { state as baseState } from '@/state'

export default defineComponent({
  name: 'subsidy-detail',
  setup() {
    const route = useRoute()
    const state = reactive({
      record: {} as any
    })

    const getDetails = async () => {
      try {
        let result: any = {}
        if (baseState.platformType === 'TEACHER') {
          const { data } = await request.get(
            '/api-teacher/courseScheduleTeacherSalary/detail/' + route.query.id,
            {}
          )
          result = data || {}
        } else {
          const { data } = await request.post(
            '/api-school/schoolWeekSalaryRecord/detailInfoByCourseType',
            {
              data: {
                ...route.query
              }
            }
          )
          result = data || {}
        }
        state.record = result || {}
        if (Array.isArray(state.record?.courseScheduleTeacherAttendanceList)) {
          state.record.courseScheduleTeacherAttendanceList.forEach((n: any) => {
            n.times =
              (n?.startTime ? dayjs(n.startTime).format('YYYY-MM-DD HH:mm') : '') +
              ' ～ ' +
              (n?.endTime ? dayjs(n.endTime).format('HH:mm') : '')
            n.signInTime = n?.signInTime?.split(' ')[1]
            n.signOutTime = n?.signOutTime?.split(' ')[1]
          })

          state.record.courseScheduleTeacherAttendanceList.push({})
        }
      } catch {
        //
      }
    }
    onMounted(() => {
      getDetails()
    })
    return () => (
      <div>
        <OSticky>
          <OHeader />
        </OSticky>
        {!!state.record && (
          <div class={styles.wrap}>
            <div class={[styles.item, styles.listItem]}>
              <Cell
                border={false}
                center
                class={styles.listItem}
                title="补助标准"
                value={`${state.record.standardSalary || 0}元/天`}
              />
              <Cell
                border={false}
                center
                class={styles.listItem}
                title="补助课程"
                value={courseEmnu[state.record.courseType]}
              />
              {state.record.attendanceInfoList &&
                state.record.attendanceInfoList.map((item: any) => (
                  <Cell
                    border={false}
                    center
                    class={styles.listItem}
                    valueClass={styles.valueColor}
                    title={item.reason}
                    value={`${item.salary}元`}
                  />
                ))}
              <Cell
                border={false}
                center
                class={styles.listItem}
                title="实际补助金额"
                value={`${state.record.actualSalary || 0}元`}
              />
            </div>

            {state.record?.courseScheduleTeacherAttendanceList?.map(
              (item: ICourseScheduleTeacherAttendance) => (
                <div class={styles.item}>
                  <Cell center>
                    {{
                      title: () => (
                        <div class={styles.itemTitle}>
                          <img class={styles.titleIcon} src={iconTime} />
                          <span>{item.times}</span>
                        </div>
                      )
                    }}
                  </Cell>
                  <div class={styles.itemContent}>
                    <div class={styles.itemContentTitle}>
                      <span>
                        {item.classGroupName}-{item.teacherName}
                      </span>
                      <span
                        class={styles.itemContentTitleDetail}
                        style={{
                          color:
                            item.coursewarePlayTime >= item.adviseStudyTimeSecond
                              ? '#358AF5'
                              : '#F44541'
                        }}
                      >
                        课件使用：{getSecondRPM(item.coursewarePlayTime)}/
                        {getSecondRPM(item.adviseStudyTimeSecond)}分钟
                      </span>
                    </div>
                    <div class={styles.itemContentLabel}>{item.orchestraName}</div>
                    <div class={styles.times}>
                      <div class={[styles.timesItem, styles.startTime]}>
                        <div class={styles.startTimeTop}>
                          <span>签到时间</span>
                          <img src={item.signInStatus === 'NORMAL' ? iconPrimary : iconError} />
                        </div>
                        <div class={styles.startTimeBottom}>
                          <span
                            class={styles.startTimeStatus}
                            style={{
                              color: item.signInStatus === 'NORMAL' ? '' : '#F44541'
                            }}
                          >
                            {item.signInStatusTitle}
                          </span>
                          {item.signInTime}
                        </div>
                      </div>
                      <div class={[styles.timesItem, styles.endTime]}>
                        <div class={styles.startTimeTop}>
                          <span>签到定位</span>
                          <img
                            src={
                              item.signInLongitudeLatitudeStatus === 'NORMAL'
                                ? iconPrimary
                                : iconError
                            }
                          />
                        </div>
                        <div
                          class={styles.startTimeBottom}
                          style={{ justifyContent: 'space-between' }}
                        >
                          {item.signInLongitudeLatitude ? (
                            <>
                              <span class={styles.startTimePosition}>
                                {item.signInLongitudeLatitudeStatus === 'NORMAL'
                                  ? '考勤范围内'
                                  : '考勤范围外'}
                              </span>
                              <span
                                class={styles.startTimePositionLook}
                                style={{
                                  color:
                                    item.signInLongitudeLatitudeStatus === 'NORMAL'
                                      ? '#4493F6'
                                      : '#F44541'
                                }}
                                onClick={() => {
                                  postMessage({
                                    api: 'sourseMapApi',
                                    content: {
                                      type: 'display',
                                      myPoint: item.schoolLongitudeLatitude,
                                      orginPoint: item.signInLongitudeLatitude
                                    }
                                  })
                                }}
                              >
                                查看定位 <Icon name="arrow" />
                              </span>
                            </>
                          ) : (
                            <span class={styles.startTimePosition}>暂无定位</span>
                          )}
                        </div>
                      </div>
                    </div>
                    <div class={styles.times}>
                      <div class={[styles.timesItem, styles.startTime]}>
                        <div class={styles.startTimeTop}>
                          <span>签退时间</span>
                          <img src={item.signOutStatus === 'NORMAL' ? iconPrimary : iconError} />
                        </div>
                        <div class={styles.startTimeBottom}>
                          <span
                            class={styles.startTimeStatus}
                            style={{
                              color: item.signOutStatus === 'NORMAL' ? '' : '#F44541'
                            }}
                          >
                            {item.signOutStatusTitle}
                          </span>
                          {item.signOutTime}
                        </div>
                      </div>
                      <div class={[styles.timesItem, styles.endTime]}>
                        <div class={styles.startTimeTop}>
                          <span>签退定位</span>
                          <img
                            src={
                              item.signOutLongitudeLatitudeStatus === 'NORMAL'
                                ? iconPrimary
                                : iconError
                            }
                          />
                        </div>
                        <div
                          class={styles.startTimeBottom}
                          style={{ justifyContent: 'space-between' }}
                        >
                          {item.signOutLongitudeLatitude ? (
                            <>
                              <span class={styles.startTimePosition}>
                                {item.signOutLongitudeLatitudeStatus === 'NORMAL'
                                  ? '考勤范围内'
                                  : '考勤范围外'}
                              </span>
                              <span
                                class={styles.startTimePositionLook}
                                style={{
                                  color:
                                    item.signOutLongitudeLatitudeStatus === 'NORMAL'
                                      ? '#4493F6'
                                      : '#F44541'
                                }}
                                onClick={() => {
                                  postMessage({
                                    api: 'sourseMapApi',
                                    content: {
                                      type: 'display',
                                      myPoint: item.schoolLongitudeLatitude,
                                      orginPoint: item.signOutLongitudeLatitude
                                    }
                                  })
                                }}
                              >
                                查看定位 <Icon name="arrow" />
                              </span>
                            </>
                          ) : (
                            <span class={styles.startTimePosition}>暂无定位</span>
                          )}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              )
            )}
          </div>
        )}
        {!state.record && <OEmpty tips="暂无明细" />}
      </div>
    )
  }
})