import { defineComponent, ref } from 'vue';
import styles from './index.module.less';
import TheSubmit from '@/components/the-submit';
import MHeader from '@/components/m-header';
import MFooter from '@/components/m-footer';
import img1 from './images/img1.png';
import img311 from './images/img3-1-1.png';
import img312 from './images/img3-1-2.png';
import img321 from './images/img3-2-1.png';
import img331 from './images/img3-3-1.png';
import img332 from './images/img3-3-2.png';
import img4 from './images/img4.png';

export default defineComponent({
  name: 'music-classroom',
  setup() {
    const activeTab = ref<'room' | 'instrument' | 'service'>('room');
    return () => (
      <div class={styles.musicClassroom}>
        <MHeader />

        <div class={styles.banner}>
          <img
            class={styles.bannerImg}
            src="https://oss.dayaedu.com/klx/1699439777320banner.png"
          />
        </div>

        <div class={styles.section1}>
          <div class={[styles.title]}>
            <span>
              <span class={styles.blue}>数字化课堂</span>建设解决方案
            </span>
          </div>

          <div class={styles.content}>
            构建网络化、数字化、个性化、终身化的教育体系，实现“人人皆学、处处能学、时时能学”的学习型社会目标。
          </div>

          <img src={img1} class="w100" />
        </div>

        <div class={styles.section2}>
          <div class={[styles.title]}>
            <span>
              <span class={styles.blue}>变革</span>传统课堂教学方式
            </span>
          </div>

          <img
            src="https://oss.dayaedu.com/klx/1699517801831img22.png"
            class="w100"
          />
        </div>

        <div class={[styles.section3, styles.sectionBg]}>
          <div class={styles.tabGroup}>
            <span
              onClick={() => (activeTab.value = 'room')}
              class={[activeTab.value === 'room' && styles.active]}>
              音乐数字课堂
            </span>
            <span
              onClick={() => (activeTab.value = 'instrument')}
              class={[activeTab.value === 'instrument' && styles.active]}>
              器乐进课堂
            </span>
            <span
              onClick={() => (activeTab.value = 'service')}
              class={[activeTab.value === 'service' && styles.active]}>
              课后延时服务
            </span>
          </div>

          <div
            class={styles.room}
            style={{ display: activeTab.value === 'room' ? 'block' : 'none' }}>
            <div class={[styles.title]}>
              <span>
                <span class={styles.blue}>解决</span>
                音乐课堂数字化问题
              </span>
            </div>

            <img src={img311} class="w100" />

            <div class={styles.content}>
              运用现代信息技术和互联网平台，为学生提供音乐教育的新型教学模式。它将传统的音乐教学与现代科技相结合，为学生创造更加生动、直观、个性化的学习体验。
            </div>
          </div>

          <div
            class={styles.instrument}
            style={{
              display: activeTab.value === 'instrument' ? 'block' : 'none'
            }}>
            <div class={[styles.title]}>
              <span>
                <span class={styles.blue}>解决</span>新课标器乐进课堂问题
              </span>
            </div>

            <img src={img321} class="w100" />

            <div class={styles.content}>
              《义务教育音乐课程标准 （2011年版）》对我国小学音
              乐课程提出了明确的要求。激发学生对乐器的兴趣，培养音乐欣赏能力和创作能力。使学生掌握基本的乐器演奏技巧，具备一定的乐器演奏水平。学生可以利用小酷Al进行器乐学习，提高音乐技能。实现
              “每个孩子会一门乐器”的目标，让更多学生在音乐教育中受益。同时，也有助于提高我国整体音乐教育水平，培养更多音乐人才。
            </div>
          </div>

          <div
            class={styles.service}
            style={{
              display: activeTab.value === 'service' ? 'block' : 'none'
            }}>
            <div class={[styles.title]}>
              <span>
                <span class={styles.blue}>解决</span>课后四点半课后服务问题
              </span>
            </div>

            <img src={img331} class="w100" />

            <div class={styles.content}>
              新增课后服务的音乐课程设置，让学生在多样化的课程中找到自己的兴趣所在。
            </div>
          </div>
        </div>

        <div
          class={[styles.section4, styles.sectionBg]}
          style={{ display: activeTab.value === 'room' ? 'block' : 'none' }}>
          <img src={img312} class="w100" />

          <div class={styles.content}>
            音乐数字课堂拥有海量的教学资源，包括乐曲、音频、视频、图片；音乐数字课堂可以根据学生的学习进度、兴趣和能力制定个性化的教学方案，有助于提高学生的学习兴趣和成就感。音乐数字课堂可以收集学生的学习数据，对学生的学习情况进行分析，为教师提供有针对性的教学指导。
          </div>
        </div>

        <div
          class={[styles.section5, styles.sectionBg]}
          style={{ display: activeTab.value === 'service' ? 'block' : 'none' }}>
          <img src={img332} class="w100" />

          <div class={styles.content}>
            采用创新的教学手段，如线上线下相结合、实践与理论相结合等，激发学生的学习兴趣，提高教学效果。
          </div>
        </div>

        <div class={styles.section6}>
          <div class={[styles.title6]}>
            <span class={styles.blue}>提交</span>合作信息
          </div>

          <div class={styles.content}>我们将在提交后尽快与您取得联系</div>

          <TheSubmit type="classroom" />
        </div>

        <div class={styles.section7}>
          <div class={[styles.title7]}></div>

          <img src={img4} class={'w100'} />
        </div>

        <MFooter />
      </div>
    );
  }
});
