import { defineComponent, reactive, watch } from 'vue'
import { Image } from 'vant'
import styles from './index.module.less'
import arrowLine from '../images/week/icon-arrow-line.png'
import arrowPoint from '../images/icon-arrow-point.png'
import teacherArrowLine from '../images/month/teacher-icon-arrow-line.png'
import { reportCourseType } from '../week-report'

export default defineComponent({
  name: 'orchestra-num',
  props: {
    type: {
      type: String,
      default: 'week'
    },
    reportData: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props) {
    const forms = reactive({
      total: 0,
      list: [] as any
    })
    const formatCourse = () => {
      const data = props.reportData || {}

      for (const i in data) {
        if (i === 'TOTAL') {
          forms.total = data[i]
        } else {
          forms.list.push({
            text: reportCourseType[i],
            value: data[i]
          })
        }
      }
    }
    formatCourse()

    watch(
      () => props.reportData,
      () => {
        formatCourse()
      }
    )
    return () => (
      <div class={[styles.trainSection, props.type === 'month' ? styles.teacherTrainSection : '']}>
        <div class={styles.trainTitle}>
          <div class={styles.name}>
            <Image
              src={props.type === 'month' ? teacherArrowLine : arrowLine}
              class={styles.allowLine}
            />
            乐团人数
          </div>
          <div class={styles.countNums}>
            <Image src={arrowPoint} class={styles.arrowPoint} />
            乐团总人数<span>{forms.total}</span>人
          </div>
        </div>

        <div class={styles.trainSectionContent}>
          <div class={styles.tContent}>
            {forms.list.map((item: any) => (
              <div class={styles.tItem}>
                <p class={styles.pople}>
                  {item.value}
                  <span>人</span>
                </p>
                <p class={styles.subjectName}>{item.text}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    )
  }
})
