import { defineComponent, ref } from 'vue';
import styles from './index.module.less';
import MHeader from '@/components/m-header';
import img1 from './images/img1.png';
import img12 from './images/img-1-2.png';
import img13 from './images/img-1-3.png';
import img14 from './images/img-1-4.png';
import img21 from './images/img-2-1.png';
import img22 from './images/img-2-2.png';
import img3 from './images/img3.png';
import MFooter from '@/components/m-footer';
import TheSubmit from '@/components/the-submit';

export default defineComponent({
  name: 'colexiu-person',
  setup() {
    const activeTab = ref<'love' | 'music'>('love');

    return () => (
      <div class={styles.person}>
        <MHeader />

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

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

        <div class={[styles.section2, styles.sectionBg]}>
          <div class={styles.tabGroup}>
            <span
              onClick={() => (activeTab.value = 'love')}
              class={[activeTab.value === 'love' && styles.active]}>
              器乐爱好者
            </span>
            <span
              onClick={() => (activeTab.value = 'music')}
              class={[activeTab.value === 'music' && styles.active]}>
              音乐达人
            </span>
          </div>

          <div
            class={styles.loveImg}
            style={{ display: activeTab.value === 'love' ? 'block' : 'none' }}>
            <img
              src="https://oss.dayaedu.com/klx/1699439078380img-1-1.png"
              class="w100"
            />

            <div class={[styles.title]}>
              <span>找寻你感兴趣的乐曲</span>
            </div>
            <div class={styles.content}>
              音乐达人提供不同级别、不同风格的海量乐谱，让您轻松打破练习路上最大阻碍，更让你能找到音乐道路上志同道合的朋友。
            </div>
          </div>

          <div
            class={styles.musicImg}
            style={{ display: activeTab.value === 'music' ? 'block' : 'none' }}>
            <img src={img21} class="w100" />

            <div class={[styles.title]}>
              <span>曲目分享</span>
            </div>
            <div class={styles.content}>
              还在为自己创作的乐谱无人问津而苦恼吗？还在为自己的才华无处展示而失落吗？酷乐秀音乐分享平台就是你的归处，让你的创作才能得到同好的认可，用你的编曲技巧折服演奏者。
            </div>
          </div>
        </div>

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

            <div class={[styles.title]}>
              <span>寻求导师</span>
            </div>
            <div class={styles.content}>
              在器乐练习的路上难免遇到困难，平台中有着许多乐器上钻研多年的演奏高手，让他们帮助你克服困难，学习更多演奏知识。
            </div>
          </div>

          <div class={[styles.section4, styles.sectionBg]}>
            <img src={img13} class="w100" />

            <div class={[styles.title]}>
              <span>全方位的视频教学</span>
            </div>
            <div class={styles.content}>
              各种声部不同程度的教学视频、达人演奏经验分享，让您在练习途中更快的迈过困难。
            </div>
          </div>

          <div class={[styles.section5, styles.sectionBg]}>
            <img src={img14} class="w100" />

            <div class={[styles.title]}>
              <span>练习分享</span>
            </div>
            <div class={styles.content}>
              将你的演奏成果分享给跟众多同好，大家一起沟通、一起交流，在友好的演奏、分享氛围中不断的精进自己的演奏技艺。
            </div>
          </div>
        </div>

        <div
          class={styles.sectionMusic}
          style={{ display: activeTab.value === 'music' ? 'block' : 'none' }}>
          <div class={[styles.section3, styles.sectionBg]}>
            <img src={img22} class="w100" />

            <div class={[styles.title]}>
              <span>邀约学生</span>
            </div>
            <div class={styles.content}>
              酷乐秀音乐分享平台集合了众多在乐器练习中不得要领的苦行僧，他们需要你的点拨，将你的毕生所学传授下去，让他们也能成长为一个器乐演奏达人。
            </div>
          </div>

          <div class={[styles.section4, styles.sectionBg]}>
            <img
              src="https://oss.dayaedu.com/klx/1699510915684img2-3.png"
              class="w100"
            />

            <div class={[styles.title]}>
              <span>线上授课</span>
            </div>
            <div class={styles.content}>
              只需一部手机，一个良好的网络环境，您便可以将自己的技艺传授给别人，通过云酷琴房、直播秀场让更多的学习者沾染你的演奏精髓。
            </div>
          </div>

          <div class={[styles.section5, styles.sectionBg]}>
            <img
              src="https://oss.dayaedu.com/klx/1699439170844img-2-4.png"
              class="w100"
            />

            <div class={[styles.title]}>
              <span>风采展示</span>
            </div>
            <div class={styles.content}>
              你有一肚子的演奏心得无处传播？你的得意的演奏技巧无法展示？在这里分享你的演奏心得，展示你的演奏技巧，让更多的器乐爱好者得到你的指点，将你的才能传播得更加广阔。
            </div>
          </div>
        </div>

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

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

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

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

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

        {/* {wxStatus.value && (
          <div
            class={styles.wxpopup}
            onClick={() => {
              wxStatus.value = false;
            }}>
            <img src={wxBg} alt="" />
          </div>
        )} */}
      </div>
    );
  }
});
