import TheHeader from "@/components/TheHeader";
import TheImage from "@/components/TheImage";
import { defineComponent, onMounted, reactive, ref, watch } from "vue";
import styles from "./index.module.less";
import IconPan from "./images/pan.png";
import oStart from "@/assets/oStart.png";
import TheTitle from "@/components/TheTitle";
import TheSong from "@/components/TheSong";
import request from "@/helpers/request";
import { useRoute, useRouter } from "vue-router";
import HotAlbum from "@/views/components/hot-album";
import TheMusicGrid from "@/components/TheMusicGrid";
import { useEventListener } from "@vant/use";

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 getAlumn = async () => {
      try {
        const { data } = await request.post(
          "/api-website/open/music/album/detail",
          {
            data: {
              id: route.query.id,
              page: 1,
              relatedNum: 6,
            },
          }
        );
        Object.assign(state, data, {
          musicTagNames: data?.musicTagNames?.split(",") || [],
          musicSheetList: data.musicSheetList?.rows || [],
        });
      } catch (error) {}
    };
    onMounted(() => {
      getAlumn();
    });

    // 滚动监听
    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);
    return () => (
      <div class={styles.musicAlbum}>
        <TheHeader
          style={{ background: `rgba(255,255,255,${backgorundColor.value})` }}
          class={styles.header}
          theme={isTop.value ? "dark" : "light"}
        />
        <img class={styles.bgImg} src={state.albumCoverUrl} />
        <div class={styles.musicContent}>
          <div class={styles.bg}>
            <div class={styles.alumWrap}>
              <div class={styles.img}>
                <TheImage src={state.albumCoverUrl} />
              </div>
              <div class={styles.alumDes}>
                <div class={[styles.alumTitle, "van-ellipsis"]}>
                  {state.albumName}
                </div>
                <div class={styles.tags}>
                  {state.musicTagNames?.map((tag: any) => (
                    <span class={styles.tag}>{tag}</span>
                  ))}
                </div>
                <div class={[styles.des, "van-multi-ellipsis--l3"]}>
                  {state.albumDesc}
                </div>
              </div>
            </div>
            <div class={styles.alumCollect}>
              <img src={IconPan} />
              <span>共{state.musicSheetCount}首曲目</span>
              <img class={styles.right} src={oStart} />
              <span>{state.albumFavoriteCount}人收藏</span>
            </div>
          </div>
        </div>

        <div class={styles.alumnContainer}>
          <div class={styles.alumnList}>
            <TheTitle title="曲目列表" isMore={false} />
            <TheSong list={state.musicSheetList} />
          </div>

          <TheTitle
            title="相关专辑"
            onMore={() => {
              router.push({
                path: "/search",
              });
            }}
          />
          <TheMusicGrid
            list={state.relatedMusicAlbum}
            onGoto={(n: any) =>
              router.push({
                path: "/musicAlum",
                query: {
                  id: n.id,
                },
              })
            }
          />

          <HotAlbum />
        </div>
      </div>
    );
  },
});
