<template>
  <template v-if="!listData.length && !loading">
    <van-empty description="暂无收藏得游记" />
  </template>
  <template v-else-if="listData.length">
    <div class="bg-[#f8f8f8] px-15 min-h-screen pt-15 flex flex-col space-y-15">
      <ProfileCollectionTravelNoteCell
        v-for="item in listData"
        :key="item.id"
        :itemData="item"
        @on-cancel="handleCancel(item)"
      />
    </div>
  </template>
</template>

<script setup>
onMounted(() => {
  getCollectionList();
});

const listData = ref([]);

const { loading, setLoading } = useLoading();

async function getCollectionList() {
  setLoading(true);
  const { data } = await request(
    "/website/tourism/projectTravelNotes/userCollectTravelNotesList",
    {
      query: {
        pageSize: 999,
        pageNum: 1,
      },
    }
  );
  setLoading(false);
  listData.value = data.dataList;
}

function handleCancel(item) {
  showConfirmDialog({
    title: "提示",
    message: "确认取消收藏吗",
  }).then(() => {
    request(
      "/website/tourism/projectTravelNotes/userCollectTravelNotesUpdate",
      {
        method: "post",
        body: {
          travelNotesId: item.id,
          type: 0,
        },
      }
    )
      .then(() => {
        showToast("取消收藏成功");
        getCollectionList();
      })
      .catch(() => {});
  });
}
</script>

<style lang="scss" scoped></style>
