import TheMusicGrid from "@/components/TheMusicGrid";
import TheTitle from "@/components/TheTitle";
import request from "@/helpers/request";
import { defineComponent, onMounted, ref } from "vue";
import { useRouter } from "vue-router";

export default defineComponent({
  name: "hotAlbum",
  setup() {
    const router = useRouter();
    // 热门专辑
    const musicAlbumList = ref<any[]>([]);
    const getMusicAlbumList = async () => {
      try {
        const res = await request.post("/api-website/open/music/album/list", {
          data: {
            albumStatus: 1,
            page: 1,
            rows: 9,
          },
        });
        if (res.data && Array.isArray(res.data.rows)) {
          musicAlbumList.value = res.data.rows;
        }
      } catch (error) {}
    };
    onMounted(() => {
      getMusicAlbumList();
    });
    return () => (
      <>
        <TheTitle
          title="热门专辑"
          onMore={() => {
            router.push({
              path: "/search",
            });
          }}
        />
        <TheMusicGrid
          list={musicAlbumList.value}
          onGoto={(n: any) =>
            router.push({
              path: "/musicAlum",
              query: {
                id: n.id,
              },
            })
          }
        />
      </>
    );
  },
});
