<template>
  <!--  -->
  <div
    class="relative pt-180 h-screen w-full bg-[url('~/assets/img/note-create/note_create_bg.png')] bg-cover bg-cover"
  >
    <NuxtLink
      to="/note-create"
      class="block mx-auto pt-25 px-10 flex h-174 w-274 cursor-pointer flex-col items-center justify-center rounded-[30px] bg-[#fff1db] transition-all hover:opacity-90"
    >
      <img src="~/assets/img/note-create/note_create_entry.png" class="h-auto w-full" />

      <div class="-mt-5 text-2xl font-semibold text-primary">旅行日记</div>
    </NuxtLink>

    <NuxtLink
      to="/profile/notes?tab=draft"
      class="w-165 box-border mx-auto mt-90 flex h-60 cursor-pointer items-center space-x-5 rounded-xl bg-[#fff1c7] px-20 hover:opacity-80"
    >
      <img src="~/assets/img/note-create/note_create_book.png" class="h-29 w-23" alt="" srcset="" />
      <span class="text-sm pl-5 text-black-6">我的草稿箱（{{ draftTotal }}）</span>
    </NuxtLink>

    <div class="mx-auto mt-30 flex w-280 items-center justify-center">
      <img
        src="~/assets/img/note-create/note_create_start_icon.png"
        class="h-45 w-45"
        alt=""
        srcset=""
      />

      <span class="text-sm text-white opacity-60">
        世界年轻一代更喜欢用的旅游网站 年轻旅行者共同打造的"旅行神器”
      </span>
    </div>
    <!-- absolute  left-1/2 -translate-x-1/2-->
    <!-- absolute top-460  left-1/2  -translate-x-1/2-->
    <!-- bottom-60 left-1/2 -translate-x-1/2 -->
    <!-- <span class="text-[8px] text-black-9"> 
        夕阳下的金色狂野，是我心中最美的风景，也是我旅行的意义。
      </span> -->
  </div>
</template>

<script setup>
onMounted(() => {
  getDraftList()
})

const draftTotal = ref(0)

async function getDraftList() {
  const { data } = await request('/website/tourism/publishTravelNotes/getDraftList', {
    query: {
      pageNum: 1,
      pageSize: 10000,
      type: 0
    }
  })
  draftTotal.value = data.totalCount
}
</script>

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