<template>
  <van-swipe-cell>
    <div class="relative group flex space-x-10 p-10 mb-10 bg-[#fff] rounded-xl">
      <div class="w-147 h-109 border-box">
        <img
          :src="formatImgSrc(data?.tourismUrlsAfterConvert) || noteDraftCoverBg"
          class="w-full h-full shrink-0 object-cover"
        />
      </div>
      <div class="flex w-152 justify-between">
        <div class="">
          <div
            class="mt-15 w-152 line-clamp-2 whitespace-normal break-words truncate text-xl font-semibold text-black-3"
          >
            {{ data?.projectTitle || '未命名草稿' }}
          </div>

          <div
            class="w-152 line-clamp-2 text-sm whitespace-normal break-words truncate text-red-600"
          >
            审核未通过：{{ data?.reason || '内容审核未通过' }}
          </div>
        </div>
      </div>
      <div class="absolute top-1/2 right-0 -translate-y-1/2 z-1 w-11 h-10">
        <img class="w-full h-full" :src="left_arrow" alt="" />
      </div>
    </div>
    <template #right>
      <div class="pl-2 h-full">
        <van-button square text="编辑" @click="handleWrite" type="warning" class="delete-button" />
        <van-button
          square
          text="删除"
          @click="$emit('onDelete')"
          type="danger"
          class="delete-button"
        />
      </div>
    </template>
  </van-swipe-cell>
</template>

<script setup>
import noteDraftCoverBg from '~/assets/img/note-create/note_draft_cover_bg.jpg'
import left_arrow from '~/assets/img/note-create/left.svg'
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  }
})

function handleWrite() {
  navigateTo({
    path: '/note-create',
    query: {
      id: props?.data?.id
    }
  })
}
</script>

<style lang="scss" scoped>
.delete-button {
  height: 100%;
}
</style>
