import request from "@/helpers/request";
import { defineComponent, nextTick, reactive, ref, watch } from "vue";
import styles from "./index.module.less";
import { useToggle } from "@vant/use";
import { List } from "vant";
import TheMusicGrid from "@/components/TheMusicGrid";
import { useRoute, useRouter } from "vue-router";

export default defineComponent({
  name: "searchAlbum",
  setup() {
    const route = useRoute();
    const router = useRouter();
    watch(route, () => {
      params.page = 1;
      params.idAndName = route.query.search || "";
      finish.value = false;
      finishText.value = "暂无数据";
      musicAlbumList.value = [];
    });
    const [loading, toggle] = useToggle(false);
    const finish = ref(false);
    const finishText = ref("暂无数据");
    const musicAlbumList = ref<any[]>([]);
    const params = reactive({
      albumStatus: 1,
      page: 1,
      rows: 33,
      idAndName: route.query.search || "",
    });
    const getMusicAlbumList = async () => {
      if (loading.value) return;
      toggle(true);
      try {
        const res = await request.post("/api-website/open/music/album/list", {
          data: params,
        });
        if (res.data && Array.isArray(res.data.rows)) {
          musicAlbumList.value = [].concat(
            musicAlbumList.value as any,
            res.data.rows
          );
          params.page++;
          if (!res.data.rows.length) {
            finish.value = true;
            finishText.value = res.data.pageNo == 1 ? "暂无数据" : "没有更多了";
          }
        }
      } catch (error) {}
      nextTick(() => {
        toggle(false);
      });
    };
    return () => (
      <div class={styles.searchAlbum}>
        <List
          loading={loading.value}
          finished={finish.value}
          finishedText={finishText.value}
          onLoad={() => getMusicAlbumList()}
        >
          <TheMusicGrid list={musicAlbumList.value} onGoto={(n: any) =>
            router.push({
              path: "/musicAlum",
              query: {
                id: n.id,
              },
            })
          } />
        </List>
      </div>
    );
  },
});
