import { defineComponent, ref } from "vue";
import styles from "./index.module.less";
import IconDonw from "@/assets/icon-donw.png";
import IconApp from "@/assets/icon-app.png";
import { Vue3Lottie } from "vue3-lottie";
import "vue3-lottie/dist/style.css";
import AstronautJSON from "@/assets/animate/kulexiuyunjiaolian.json";
import { Button, Image } from "vant";
import TheFooterApp from "@/components/TheFooterApp";
import TheDown from "@/components/TheDown";

export default defineComponent({
  name: "down",
  setup() {
    const downRef = ref()
    const onDownload = (type: string) => {
      downRef.value?.downLoadApp(type)
    }
    return () => (
      <div class={styles.down} style={{ backgroundImage: `url(${IconDonw})` }}>
        <div class={styles.text}>
          <h1 class={styles.title}>下载酷乐秀APP</h1>
          <div class={styles.item}>
            <span class={styles.dot}></span>
            <span class={styles.des}>
              酷乐秀老师端：器乐教学平台，课程信息一目了然,专业网络教室
            </span>
          </div>
          <div class={styles.item}>
            <span class={styles.dot}></span>
            <span class={styles.des}>
              酷乐秀学生端：您的学习好帮手，专业教师一对一，器乐练习云教练
            </span>
          </div>
        </div>

        <div class={styles.logo}>
          <Vue3Lottie animationData={AstronautJSON} width={78} height={98} />
        </div>
        <div class={styles.app}>
          <Image class src={IconApp} />
          <div class={styles.btns}>
            <Button round type="primary" onClick={() => onDownload('student')}>下载学生端APP</Button>
            <Button round type="primary" onClick={() => onDownload('teacher')}>下载老师端APP</Button>
          </div>
        </div>
        {/* <TheFooterApp /> */}
        <TheDown ref={downRef} />
      </div>
    );
  },
});
