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

export default defineComponent({
  name: "searchMusic",
  setup() {
    const route = useRoute();
    watch(route, () => {
      params.page = 1;
      params.idAndName = route.query.search || "";
      finish.value = false;
      finishText.value = "暂无数据";
      musicList.value = [];
      getMusic()
    });
    const [loading, toggle] = useToggle(false);
    const finish = ref(false);
    const finishText = ref("暂无数据");
    const params = reactive({
      albumStatus: "PASS",
      page: 1,
      rows: 20,
      state: 1,
      idAndName: route.query.search || "",
    });
    const musicList = ref<any[]>([]);
    const getMusic = async () => {
      if (loading.value) return;
      toggle(true);
      try {
        const { data } = await request.post(
          "/api-website/open/music/sheet/list",
          {
            data: params,
          }
        );
        if (data && Array.isArray(data.rows)) {
          musicList.value = [].concat(musicList.value as any, data.rows);
          params.page++;
          if (!data.rows.length) {
            finish.value = true;
            finishText.value = data.pageNo == 1 ? "暂无数据" : "没有更多了";
          }
        }
      } catch (error) {}
      nextTick(() => {
        toggle(false);
      });
    };
    return () => (
      <div class={styles.searchMusic}>
        <List
          loading={loading.value}
          finished={finish.value}
          finishedText={finishText.value}
          onLoad={() => getMusic()}
        >
          <TheSong list={musicList.value} />
        </List>
      </div>
    );
  },
});
