import { defineComponent, ref } from 'vue';

import styles from './index.module.less';
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';
// Import Swiper styles
import 'swiper/css';
import downloadBg from '../images/co-tenant/download_bg.png';

// import { Vue3Lottie } from 'vue3-lottie';
// import request from 'umi-request';
export default defineComponent({
  name: 'music-room',
  setup() {
    const swipeIndex = ref(1);
    // const animation = reactive({
    //   animaRef1: null as any,
    //   animaRef2: null as any,
    //   animaRef3: null as any,
    //   subjectJSON: '',
    //   ensembleJSON: '',
    //   soloJSON: ''
    // });

    return () => (
      <div class={styles.coTenant}>
        <div class={styles.section1}>
          <div class={[styles.title]}>
            <span>客制化训练教程</span>
          </div>
          <div class={[styles.content, styles.center]}>
            专属定制训练教程，让学员所学即所练
          </div>

          <Swiper
            class={styles.swipe}
            initialSlide={1}
            slidesPerView={'auto'}
            centeredSlides={true}
            onSlideChange={swiper => {
              swipeIndex.value = swiper.activeIndex;
            }}>
            <SwiperSlide>
              <div class={styles.swipeContainer}>
                <img
                  src="https://oss.dayaedu.com/klx/1699502397893img1.png"
                  class="w100"
                />
                <div class={styles.desc}>
                  <p>
                    声部教材全量制作为练习曲目，课堂所学即课后所练。让学生循序渐进逐步掌握器乐演奏技能
                  </p>
                </div>
              </div>
            </SwiperSlide>
            <SwiperSlide>
              <div class={styles.swipeContainer}>
                <img
                  src="https://oss.dayaedu.com/klx/1699583216469single.png"
                  class="w100"
                />

                <div class={styles.desc}>
                  <p>
                    每首合奏曲目都包含多分轨和对应分轨伴奏。同一教学体系下的合奏训练，合排更容易，演出更出彩
                  </p>
                </div>
              </div>
            </SwiperSlide>
            <SwiperSlide>
              <div class={styles.swipeContainer}>
                <img
                  src="https://oss.dayaedu.com/klx/1699583257327single2.png"
                  class="w100"
                />
                <div class={styles.desc}>
                  <p>
                    不同难度的小曲目、流行乐曲持续更新，每首曲目都带有伴奏，在课程之外提升练习兴趣
                  </p>
                </div>
              </div>
            </SwiperSlide>
          </Swiper>

          <div class={styles.pagination}>
            <i
              class={[
                styles.paginationItem,
                swipeIndex.value === 0 && styles.active
              ]}></i>
            <i
              class={[
                styles.paginationItem,
                swipeIndex.value === 1 && styles.active
              ]}></i>
            <i
              class={[
                styles.paginationItem,
                swipeIndex.value === 2 && styles.active
              ]}></i>
          </div>
        </div>

        <div class={styles.section2}>
          <div class={[styles.title]}>
            <span>训练统计</span>
          </div>
          <div class={[styles.content, styles.center]}>
            学生练习情况统计，让您随时掌握训练情况
          </div>

          <img
            src="https://oss.dayaedu.com/klx/1699439628998img1.png"
            class={'w100'}
          />
        </div>

        <div class={styles.section3}>
          <div class={[styles.title]}>
            <span>即时通讯</span>
          </div>
          <div class={[styles.content]}>
            自定义教学群组，让学生的问题及时解决，让学生和家长感受到全方面的优秀服务
          </div>

          <img
            src="https://oss.dayaedu.com/klx/1699439647448img2.png"
            class={'w100'}
          />
        </div>

        <div class={styles.section4}>
          <div class={[styles.title]}>
            <span>高效管理</span>
          </div>
          <div class={[styles.content, styles.center]}>
            老师、学生信息一手掌握，让您的管理更加高效
          </div>

          <img
            src="https://oss.dayaedu.com/klx/1699439667352img3.png"
            class={'w100'}
          />
        </div>
        <div class={styles.section5}>
          <img src={downloadBg} style={{ width: '100%' }} />
        </div>
      </div>
    );
  }
});
