import { Cell, Grid, GridItem } from 'vant'
import { defineComponent, onMounted, PropType } 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 { courseSalaryRecordDetailItem } from './exercise-detail'
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'

export default defineComponent({
  name: 'subsidy-detail',
  setup() {
    const record: ICourseSalaryRecordDetailItem = courseSalaryRecordDetailItem.value! || ''
    if (Array.isArray(record?.courseScheduleTeacherAttendanceList)) {
      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]
      })
    }
    return () => (
      <div>
        <OSticky>
          <OHeader />
        </OSticky>
        {!!record && (
          <div class={styles.wrap}>
            <div class={[styles.item, styles.listItem]}>
              <Cell
                border={false}
                center
                class={styles.listItem}
                title="补助标准"
                value={`${record.standardSalary}元/天`}
              />
              <Cell
                border={false}
                center
                class={styles.listItem}
                title="补助课程"
                value={courseEmnu[record.courseType]}
              />
              <Cell
                border={false}
                center
                class={styles.listItem}
                title="课件使用未达标"
                value={`-${record.reduceSalary}元`}
              />
              <Cell border={false} center class={styles.listItem} title="早退" value={`-0.00元`} />
              <Cell
                border={false}
                center
                class={styles.listItem}
                title="实际补助金额"
                value={`${record.actualSalary}元`}
              />
            </div>

            {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: 1 ? '#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}>{item.signInTime}</div>
                      </div>
                      <div class={[styles.timesItem, styles.endTime]}>
                        <div class={styles.startTimeTop}>
                          <span>签退时间</span>
                          <img src={item.signOutStatus === 'NORMAL' ? iconPrimary : iconError} />
                        </div>
                        <div class={styles.startTimeBottom}>{item.signOutTime}</div>
                      </div>
                    </div>
                  </div>
                </div>
              )
            )}
          </div>
        )}
        {!record && <OEmpty tips="暂无明细" />}
      </div>
    )
  }
})