import { Cell, Grid, GridItem } from 'vant'
import { defineComponent, 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'

export default defineComponent({
  name: 'subsidy-detail',
  props: {
    item: {
      type: Object,
      default: () => {}
    }
  },
  setup(props) {
    console.log("🚀 ~ props", props)
    const item = (props?.item || {}) as ICourseSalaryRecordDetailItem
    return () => (
      <div class={styles.wrap}>
        <div class={[styles.item, styles.listItem]}>
          <Cell border={false} center class={styles.listItem} title="补助标准" value={`${item.standardSalary}元/天`} />
          <Cell
            border={false}
            center
            class={styles.listItem}
            title="补助课程"
            value={courseEmnu[item.courseType]}
          />
          <Cell
            border={false}
            center
            class={styles.listItem}
            title="课件使用未达标"
            value={`-${item.reduceSalary}元`}
          />
          <Cell border={false} center class={styles.listItem} title="早退" value={`-0.00元`} />
          <Cell
            border={false}
            center
            class={styles.listItem}
            title="实际补助金额"
            value={`${item.actualSalary}元`}
          />
        </div>

        {item?.courseScheduleTeacherAttendanceList.map((item: ICourseScheduleTeacherAttendance) => (
          <div class={styles.item}>
            <Cell center>
              {{
                title: () => (
                  <div class={styles.itemTitle}>
                    <img class={styles.titleIcon} src={iconTime} />
                    <span>{item.startTime} - {item.endTime}</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' }}
                >
                  课件使用：15/20分钟
                </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>
    )
  }
})
