import { defineComponent, ref } from 'vue';
import styles from './index.module.less';
import MFooter from '@/components/m-footer';
import MHeader from '@/components/m-header';
import TheSubmit from '@/components/the-submit';
import { Swipe, SwipeItem } from 'vant';
import img11 from './images/img1-1.png';
import img12 from './images/img1-2.png';
import img13 from './images/img1-3.png';
import img2 from './images/img3-2.png';
import img4 from './images/img4.png';
import img5 from './images/img5.png';
import img6 from './images/img6.png';
// import img7 from './images/img7.png';
import i1 from './images/i1.png';
import i2 from './images/i2.png';
import i3 from './images/i3.png';
import i4 from './images/i4.png';
import i5 from './images/i5.png';
import i6 from './images/i6.png';
import i7 from './images/i7.png';
import i8 from './images/i8.png';
import i9 from './images/i9.png';
import i10 from './images/i10.png';
import i11 from './images/i11.png';
import i12 from './images/i12.png';
import i13 from './images/i13.png';
import { useRouter } from 'vue-router';

export default defineComponent({
  name: 'colexiu-technology',
  setup() {
    const router = useRouter();
    const activeTab = ref<'trial' | 'teaching' | 'study'>('teaching');
    const productTab = ref<'practice' | 'follow' | 'evaluating'>('practice');
    const classTab = ref<'network' | 'live'>('network');

    const onDetail = (type: string) => {
      if (type === 'ai') {
        router.push('/home');
      } else if (type === 'live') {
        //
        router.push('/home?tab=2');
      } else if (type === 'type') {
        router.push('/music-classroom');
      } else if (type === 'bt') {
        //
        router.push('/colexiu-tenant');
      } else if (type === 'person') {
        router.push('/colexiu-person');
      }
    };
    return () => (
      <div class={styles.technology}>
        <MHeader />

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

        <div class={styles.section1}>
          <div class={[styles.title]}>
            <span>多种器乐音频处理</span>
          </div>

          <Swipe loop={false}>
            <SwipeItem>
              <div class={styles.imgGroup}>
                <img src={i1} class="w100" />
                <img src={i2} class="w100" />
                <img src={i3} class="w100" />
              </div>
            </SwipeItem>
            <SwipeItem>
              <div class={styles.imgGroup}>
                <img src={i4} class="w100" />
                <img src={i5} class="w100" />
                <img src={i6} class="w100" />
              </div>
            </SwipeItem>
            <SwipeItem>
              <div class={styles.imgGroup}>
                <img src={i7} class="w100" />
                <img src={i8} class="w100" />
                <img src={i9} class="w100" />
              </div>
            </SwipeItem>
            <SwipeItem>
              <div class={styles.imgGroup}>
                <img src={i10} class="w100" />
                <img src={i11} class="w100" />
                <img src={i12} class="w100" />
              </div>
            </SwipeItem>
            <SwipeItem>
              <div class={styles.imgGroup}>
                <img src={i13} class="w100" />
              </div>
            </SwipeItem>
          </Swipe>
        </div>

        <div class={styles.section2}>
          <div class={[styles.title]}>
            <span>酷乐秀数字音乐体系</span>
          </div>

          <div class={styles.subTitle}>
            <span>教 / 学 / 练 / 演</span>
          </div>

          <div class={styles.content}>
            在乐器学习过程中，教学、学习、练习和表演四个环节，这四个环节是紧密相连、不可或缺的
          </div>

          <div class={styles.tabGroup}>
            <span
              onClick={() => (activeTab.value = 'teaching')}
              class={[activeTab.value === 'teaching' && styles.active]}>
              备课授课
            </span>
            <span
              onClick={() => (activeTab.value = 'study')}
              class={[activeTab.value === 'study' && styles.active]}>
              练习自学
            </span>
            <span
              onClick={() => (activeTab.value = 'trial')}
              class={[activeTab.value === 'trial' && styles.active]}>
              表演比赛
            </span>
          </div>

          <div
            class={styles.teaching}
            style={{
              display: activeTab.value === 'teaching' ? 'block' : 'none'
            }}>
            <img src={img11} class="w100" />
          </div>
          <div
            class={styles.study}
            style={{ display: activeTab.value === 'study' ? 'block' : 'none' }}>
            <img src={img12} class="w100" />
          </div>
          <div
            class={styles.trial}
            style={{ display: activeTab.value === 'trial' ? 'block' : 'none' }}>
            <img src={img13} class="w100" />
          </div>
        </div>

        <div class={[styles.section3, styles.sectionBg1]}>
          <div class={[styles.title]}>
            <span>产品核心亮点</span>
          </div>

          <div class={styles.subTitle}>
            <span>小酷Ai</span>
          </div>

          <div class={styles.tabGroup}>
            <div
              onClick={() => (productTab.value = 'practice')}
              class={[productTab.value === 'practice' && styles.active]}>
              <i class={[styles.icon, styles.icon1]}></i>
              练习模式
            </div>
            <div
              onClick={() => (productTab.value = 'follow')}
              class={[productTab.value === 'follow' && styles.active]}>
              <i class={[styles.icon, styles.icon2]}></i>
              跟练模式
            </div>
            <div
              onClick={() => (productTab.value = 'evaluating')}
              class={[productTab.value === 'evaluating' && styles.active]}>
              <i class={[styles.icon, styles.icon3]}></i>
              评测模式
            </div>
          </div>

          <div
            class={[styles.tabBg, styles.practice]}
            style={{
              display: productTab.value === 'practice' ? 'block' : 'none'
            }}>
            <img
              src="https://oss.dayaedu.com/klx/1699518481132%E7%BB%83%E4%B9%A0_2.gif"
              class="w100"
            />
          </div>
          <div
            class={[styles.tabBg, styles.follow]}
            style={{
              display: productTab.value === 'follow' ? 'block' : 'none'
            }}>
            <img
              src="https://oss.dayaedu.com/klx/1699518503269%E8%B7%9F%E7%BB%83_2.gif"
              class="w100"
            />
          </div>
          <div
            class={[styles.tabBg, styles.evaluating]}
            style={{
              display: productTab.value === 'evaluating' ? 'block' : 'none'
            }}>
            <img
              src="https://oss.dayaedu.com/klx/1699518824737%E8%AF%84%E6%B5%8B_2.gif"
              class="w100"
            />
          </div>

          <div class={styles.btnMore} onClick={() => onDetail('ai')}>
            更多
          </div>
        </div>

        <div class={styles.section4}>
          <div class={styles.subTitle}>
            <span>直播教室</span>
          </div>

          <div class={styles.tabGroup}>
            <span
              onClick={() => (classTab.value = 'network')}
              class={[classTab.value === 'network' && styles.active]}>
              网络教室
            </span>
            <span
              onClick={() => (classTab.value = 'live')}
              class={[classTab.value === 'live' && styles.active]}>
              直播授课
            </span>
          </div>

          <div
            class={styles.network}
            style={{
              display: classTab.value === 'network' ? 'block' : 'none'
            }}>
            <img
              src="https://oss.dayaedu.com/klx/1699438884399img3-1.png"
              class="w100"
            />
          </div>
          <div
            class={styles.live}
            style={{ display: classTab.value === 'live' ? 'block' : 'none' }}>
            <img src={img2} class="w100" />
          </div>
          <div class={styles.btnMore} onClick={() => onDetail('live')}>
            更多
          </div>
        </div>

        <div class={styles.section5}>
          <div class={[styles.title]}>
            <span>数字课堂解决方案</span>
          </div>

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

          <div class={styles.btnMore} onClick={() => onDetail('type')}>
            更多
          </div>
        </div>

        <div class={styles.section6}>
          <div class={[styles.title]}>
            <span>美育培训解决方案</span>
          </div>

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

          <div class={styles.btnMore} onClick={() => onDetail('bt')}>
            更多
          </div>
        </div>

        <div class={styles.section7}>
          <div class={[styles.title]}>
            <span>音乐学习分享平台</span>
          </div>

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

          <div class={styles.btnMore} onClick={() => onDetail('person')}>
            更多
          </div>
        </div>

        <div class={styles.section8}>
          <img
            src="https://oss.dayaedu.com/klx/1699438975191img7.png"
            class="w100"
          />
        </div>

        <div class={styles.section9}>
          <div class={[styles.title9]}>
            <span class={styles.green}>提交</span>合作信息
          </div>

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

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

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