import TheHeader from "@/components/TheHeader";
import { defineComponent, onMounted, reactive, ref, watch } from "vue";
import styles from "./index.module.less";
import TheTitle from "@/components/TheTitle";
import TheSong from "@/components/TheSong";
import request from "@/helpers/request";
import { useRoute, useRouter } from "vue-router";
import { Icon } from "vant";
import { useEventListener } from "@vant/use";
import icon_teacher from "@/assets/icon_teacher.png";
import Plyr from "plyr";
import "plyr/dist/plyr.css";
import TheFooterApp from "@/components/TheFooterApp";
import oStart from "@/assets/icon-xinxin.png";
import printIcon from "@/assets/printIcon.png";
import IconRect from "@/assets/icon-rect.png";
import Iconmusicdetail from "@/assets/icon-music-detail.png";
import TheDown from "@/components/TheDown";

interface IState {
  [_: string]: any;
}
export default defineComponent({
  name: "musicAlumn",
  setup() {
    const route = useRoute();
    const router = useRouter();
    watch(route, () => {
      window.scrollTo({
        top: 0,
      });
      getAlumn();
    });
    const state = reactive<IState>({});
    const mp3 = reactive({
      iframe: "",
      audioFileUrl: "",
    });
    const getAlumn = async () => {
      const id = route.query.id;
      if (!id) return;
      try {
        const { data } = await request.get(
          `/api-website/open/music/sheet/detail/${id}`
        );
        Object.assign(state, data);
        if (Array.isArray(data.background) && data.background.length) {
          const item = data.background[0];
          mp3.audioFileUrl = item.audioFileUrl;
          console.log(route);
          if (
            location.host.includes("dev.colexiu") ||
            location.host.includes("192.168")
          ) {
            mp3.iframe = `https://dev.colexiu.com/accompany/colxiu-website.html?id=${id}&part-index=${item.id}`;
          } else {
            mp3.iframe = `https://online.colexiu.com/accompany/colxiu-website.html?id=${id}&part-index=${item.id}`;
          }
        }
      } catch (error) {}
    };
    onMounted(() => {
      getAlumn();
      initAudio();
    });

    // 滚动监听
    const isTop = ref(true);
    const backgorundColor = ref(0);
    const scorllChange = () => {
      const y = document.body.scrollTop || document.documentElement.scrollTop;
      isTop.value = y > 55 ? false : true;
      backgorundColor.value = y / 55;
    };
    useEventListener("scroll", scorllChange);

    const initAudio = () => {
      const a = new Plyr("#musicAudio", {
        controls: [
          "play-large",
          "play",
          "progress",
          "current-time",
          "duration",
        ],
      });
    };

    const colors: any = {
      FREE: {
        color: "#01B84F",
        text: "免费",
      },
      VIP: {
        color: "#CD863E",
        bgColor: "#FFE1C2",
        text: "会员",
      },
      CHARGE: {
        color: "#3591CE",
        bgColor: "#C7E9FF",
        text: "点播",
      },
    };

    const downRef = ref();
    return () => (
      <div class={styles.musicDeatail}>
        <TheHeader
          style={{ background: `rgba(255,255,255,${backgorundColor.value})` }}
          class={styles.header}
          theme={isTop.value ? "dark" : "light"}
        />
        <img
          class={styles.bgImg}
          src={state.teacher?.userAvatar || icon_teacher || state.titleImg}
        />
        <div class={styles.musicContent}>
          <div class={styles.bg}>
            <div class={styles.alumWrap}>
              <div class={[styles.alumTitle, "van-ellipsis"]}>
                {state.musicSheetName}
              </div>
              <div class={styles.musicDes}>
                <div class={styles.des}>
                  <div class={[styles.desItem, "van-multi-ellipsis--l2"]}>
                    作曲：{state.composer}
                  </div>
                  <div class={styles.desItem}>声部：{state.subjectNames}</div>
                </div>
                <div class={styles.author}>
                  <img
                    class={styles.avator}
                    src={state.teacher?.userAvatar || icon_teacher}
                  />
                  <div class={styles.authorName}>
                    <div class="van-ellipsis">{state.teacher?.userName}</div>
                    <div class={styles.by}>上传者</div>
                  </div>
                  <Icon
                    name={IconRect}
                    onClick={() => {
                      downRef.value?.toggle();
                    }}
                  />
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class={styles.alumnContainer}>
          <div class={[styles.alumnList, !mp3.audioFileUrl && styles.emtry]}>
            {mp3.audioFileUrl && (
              <>
                <div
                  class={styles.tag}
                  style={{
                    color: colors[state.chargeType]?.color,
                    backgroundColor: colors[state.chargeType]?.bgColor,
                  }}
                >
                  {colors[state.chargeType]?.text}
                </div>
                <audio id="musicAudio" src={mp3.audioFileUrl} />
              </>
            )}

            <div class={styles.iframe}>
              <div class={styles.sheetName}>{state.musicSheetName}</div>
              <iframe id="musicIframe" src={mp3.iframe}></iframe>
            </div>
          </div>

          <div class={styles.btns}>
            <div class={styles.btn} onClick={() => downRef.value?.toggle()}>
              <img src={oStart} />
              <div>
                <span style={{ color: "#EB5E00" }}>{state.favoriteNum}</span>{" "}
                收藏
              </div>
            </div>
            <div class={styles.btn} onClick={() => downRef.value?.toggle()}>
              <img src={printIcon} />
              <div>
                <span style={{ color: "#EB5E00" }}></span> 下载
              </div>
            </div>
          </div>

          <img style={{ width: "100%" }} src={Iconmusicdetail} />

          <TheTitle
            title="TA的曲谱"
            onMore={() => {
              router.push({
                path: "/search",
              });
            }}
          />
          <TheSong list={state.teacher?.musicSheetList} />
        </div>
        <TheFooterApp />
        <TheDown ref={downRef} />
      </div>
    );
  },
});
