<template>
  <div class="pb-10">
    <!-- 未通过 -->
    <ProfileNotesEmpty v-if="!loading && !draftList.length" />

    <div v-else-if="draftList.length">
      <van-list
        v-model:loading="loading"
        v-model:error="error"
        :finished="finished"
        :immediate-check="false"
        offset="80"
        error-text="请求失败，点击重新加载"
        finished-text=""
        @load="getLoadNotesList"
      >
        <ProfileNotesRejectedItem
          v-for="item in draftList"
          :key="item.id"
          :data="item"
          @on-delete="handleDelete(item)"
        />
      </van-list>
    </div>
  </div>
</template>

<script setup>
const { loading, setLoading } = useLoading()
loading.value = true
const draftList = ref([])
const finished = ref(false)
const error = ref(false)
const pageNum = ref(1)

const getLoadNotesList = () => {
  pageNum.value += 1
  getNotesList()
}

async function getNotesList() {
  setLoading(true)

  try {
    let { data } = await request('/website/tourism/publishTravelNotes/getDraftList', {
      query: {
        pageNum: pageNum.value,
        pageSize: 10,
        type: 2
      }
    })

    if (data.dataList.length == 0) draftList.value = []

    // 去重处理
    if (draftList.value.length > data.totalCount)
      draftList.value = Array.from(new Set([...draftList.value, ...data.dataList]))
    // 去重处理合并处理
    if (draftList.value.length < data.totalCount)
      draftList.value = draftList.value.concat(data.dataList)

    loading.value = false
    if (draftList.value.length >= data.totalCount) {
      finished.value = true
    }
  } finally {
    setLoading(false)
  }
}

async function handleDelete(item) {
  showConfirmDialog({
    title: '提示',
    message: '确定删除吗?',
    confirmButtonColor: '#FF9300'
  })
    .then(async () => {
      try {
        await request(`/website/tourism/publishTravelNotes/removeByDraftId`, {
          method: 'post',
          body: {
            writeId: item.id
          }
        })
        showSuccessToast('删除成功')
        // 页面的渲染处理
        draftList.value = draftList.value.filter((note) => note.id !== item.id)

        getNotesList()
      } catch (error) {}
    })
    .catch(() => {
      // on cancel
    })
}

onMounted(() => {
  getNotesList()
})
</script>

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