import TheSong from "@/components/TheSong";
import TheTitle from "@/components/TheTitle";
import styles from "./index.module.less";
import request from "@/helpers/request";
import { Swipe, SwipeItem } from "vant";
import { defineComponent, onMounted, ref } from "vue";
import { chunkArr } from "@/helpers/utils";
import { useRouter } from "vue-router";

export default defineComponent({
  name: "HotMusic",
  setup() {
    const router = useRouter()
    const musicList = ref<any[]>([]);
    
    const getMusic = async () => {
      try {
        const { data } = await request.post(
          "/api-website/open/music/sheet/list",
          {
            data: {
              albumStatus: "PASS",
              page: 1,
              rows: 12,
              state: 1,
            },
          }
        );
        if (data && Array.isArray(data.rows)) musicList.value = chunkArr(data.rows, 4)
      } catch (error) {}
    };
    onMounted(() => {
      getMusic();
      getWidth();
    });
    const swipeWidth = ref(312);
    const swipeShow = ref(false);
    const getWidth = () => {
      swipeShow.value = false;
      const clientWidth =
        document.body.clientWidth > 750 ? 750 : document.body.clientWidth;
      swipeWidth.value = clientWidth - 63;
      swipeShow.value = true;
    };
    return () => (
      <div class={styles.hotMusic}>
        <TheTitle class={styles.title} title="热门曲目" onMore={() => router.push('/search')} />
        {swipeShow.value && (
          <Swipe showIndicators={false} loop={false} width={swipeWidth.value}>
            {musicList.value.map((n) => (
              <SwipeItem class={styles.swipeItem}>
                <TheSong list={n} />
              </SwipeItem>
            ))}
          </Swipe>
        )}
      </div>
    );
  },
});
