import { defineComponent, reactive, watch } from 'vue'
import { Image, Progress } 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,
      knowledgeList: [] as any
    })

    watch(
      () => props.reportData,
      () => {
        formatCourse()
      }
    )

    const formatCourse = () => {
      const knowledge = props.reportData
      for (const i in knowledge) {
        i != 'TOTAL' &&
          forms.knowledgeList.push({
            courseName: reportCourseType[i],
            ...knowledge[i]
          })
      }
    }

    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} />
          </div>
        </div>

        <div class={styles.trainSectionContent}>
          <div class={[styles.tContent, styles.tProgress]}>
            {forms.knowledgeList.map((item: any) => (
              <div class={styles.progressItem}>
                <div class={styles.className}>
                  <i class={styles.line}></i>
                  {item.courseName}
                </div>
                <div class={styles.classNum}>
                  <div class={styles.konowCount}>
                    已学习课件<span>{item.learned || 0}</span>个
                  </div>
                  <div class={styles.allCount}>
                    共<span>{item.total || 0}</span>个
                  </div>
                </div>

                <Progress
                  color={'linear-gradient(90deg, #FFC3A1 0%, #FF9895 100%)'}
                  trackColor="#ECECEC"
                  showPivot={false}
                  style={{
                    borderRadius: '10px'
                  }}
                  percentage={item.learned / item.total * 100}
                  strokeWidth={8}
                />
              </div>
            ))}
          </div>
        </div>
      </div>
    )
  }
})
