import { defineComponent } 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'
export default defineComponent({
  name: 'orchestra-num',
  props: {
    type: {
      type: String,
      default: 'week'
    }
  },
  setup(props) {
    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]}>
            {[1, 2, 3, 4, 5, 6].map((item, index) => (
              <div class={styles.progressItem}>
                <div class={styles.className}>
                  <i class={styles.line}></i>
                  长笛班
                </div>
                <div class={styles.classNum}>
                  <div class={styles.konowCount}>
                    已学习知识点<span>33</span>个
                  </div>
                  <div class={styles.allCount}>
                    共<span>33</span>个
                  </div>
                </div>

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