<template>
  <div class="code-fun-flex-row code-fun-justify-center code-fun-relative list-item_7">
    <!-- 便签条 -->
    <div class="code-fun-flex-col code-fun-relative section_17" @click="handlePress" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd" :style="{ transform: `translateX(${slideOffset}px)` }">
      <div class="code-fun-flex-row code-fun-justify-between">
        <!-- 便签编辑时间 -->
        <span class="font_2 text_18">{{ formattedDate }}</span>
        <div class="code-fun-flex-row group_3">
          <!-- 是否置顶状态&置顶按钮 -->
          <img class="image_11 image_29" :src="isTop ? '/assets/icons/drawable-xxhdpi/icon_top_checked.png' : '/assets/icons/drawable-xxhdpi/icon_top_normal.png'" @click.stop="handleTopToggle" />
          <!-- 是否收藏状态&收藏按钮 -->
          <img class="image_26 ml-5" :src="isStarred ? '/assets/icons/drawable-xxhdpi/icon_detail_star_checked.png' : '/assets/icons/drawable-xxhdpi/icon_detail_star_unchecked.png'" @click.stop="handleStarToggle" />
        </div>
      </div>
      <div class="code-fun-flex-row code-fun-justify-between mt-17-5">
        <!-- 便签正文第一行 -->
        <span class="font_3 text_19">{{ content }}</span>
        <!-- 便签中是否存在图片 -->
        <img v-if="hasImage" class="image_28" src="/assets/icons/drawable-xxhdpi/list_item_image_icon.png" />
      </div>
    </div>
    <!-- 删除按钮 -->
    <button class="btn_delete">
      <span>删除</span>
    </button>
    <!-- 便签夹未滑动状态 -->
    <img class="image_27 pos_18" :src="isSliding ? '/assets/icons/drawable-xxhdpi/note_item_clip_up.png' : '/assets/icons/drawable-xxhdpi/note_item_clip_normal.png'" />
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'

const props = defineProps({
  content: {
    type: String,
    required: true,
  },
  date: {
    type: String,
    required: true,
  },
  isStarred: {
    type: Boolean,
    default: false,
  },
  isTop: {
    type: Boolean,
    default: false,
  },
  hasImage: {
    type: Boolean,
    default: false,
  },
  onPress: {
    type: Function,
    default: () => {},
  },
  onStarToggle: {
    type: Function,
    default: () => {},
  },
  onTopToggle: {
    type: Function,
    default: () => {},
  },
  onDelete: {
    type: Function,
    default: () => {},
  },
})

// 滑动相关状态
const slideOffset = ref(0)
const startX = ref(0)
const isSliding = ref(false)
const isSlided = ref(false) // 是否已经滑动到阈值

const formattedDate = computed(() => {
  // 简单的日期格式化，实际项目中可能需要更复杂的处理
  return props.date
})

// 滑动阈值（删除按钮宽度）
const SLIDE_THRESHOLD = 64 // 4rem 转换为 px

const handlePress = () => {
  // 只有在未滑动状态下才触发点击事件
  if (slideOffset.value === 0 && props.onPress) {
    props.onPress()
  }
}

const handleStarToggle = () => {
  if (props.onStarToggle) {
    props.onStarToggle()
  }
}

const handleTopToggle = () => {
  if (props.onTopToggle) {
    props.onTopToggle()
  }
}

const handleDelete = () => {
  if (props.onDelete) {
    props.onDelete()
  }
}

// 触摸开始
const handleTouchStart = e => {
  // 重置滑动状态
  startX.value = e.touches[0].clientX
}

// 触摸移动
const handleTouchMove = e => {
  if (!startX.value) return

  const currentX = e.touches[0].clientX
  const diffX = currentX - startX.value

  // 只处理右滑动（正值）
  if (diffX > 0) {
    e.preventDefault() // 防止页面滚动

    // 设置滑动状态
    isSliding.value = true

    // 应用阻尼效果
    let offset = 0
    if (diffX <= SLIDE_THRESHOLD) {
      // 线性滑动
      offset = diffX
    } else {
      // 超过阈值后应用阻尼效果
      const excess = diffX - SLIDE_THRESHOLD
      offset = SLIDE_THRESHOLD + excess * 0.03 // 0.3 为阻尼系数
    }

    slideOffset.value = offset
    isSlided.value = offset >= SLIDE_THRESHOLD
  } else if (diffX < 0) {
    // 左滑动，将便签条移回原位
    const offset = Math.max(0, slideOffset.value + diffX)
    slideOffset.value = offset
    isSlided.value = offset >= SLIDE_THRESHOLD

    // 更新 startX 以确保连续滑动的正确性
    startX.value = currentX
  }
}

// 触摸结束
const handleTouchEnd = () => {
  if (!startX.value) return

  // 如果滑动超过阈值，保持滑出状态；否则回弹
  if (slideOffset.value >= SLIDE_THRESHOLD) {
    slideOffset.value = SLIDE_THRESHOLD
    isSlided.value = true
  } else {
    // 回弹到初始位置
    slideOffset.value = 0
    isSliding.value = false
    isSlided.value = false
  }

  // 重置起始位置
  startX.value = 0
}
</script>

<style lang="less" scoped>
.ml-15 {
  margin-left: 0.94rem;
}
.mt-17-5 {
  margin-top: -1rem;
}
.btn_delete {
  background: url(/assets/icons/drawable-xxhdpi/btn_slide_delete_normal.png);
  background-size: cover;
  width: 4rem;
  height: 2rem;
  position: absolute;
  top: 50%;
  left: 1rem;
  z-index: 1;
  transform: translate(0, -50%);
  color: white;
  text-align: right;
  border: none;
  padding: 0;
  span {
    margin-right: 0.7rem;
    font-size: 0.6rem;
  }
}
.list-item_7 {
  width: 100%;
  height: 3.16rem;
  .section_17 {
    box-sizing: border-box;
    width: 95%;
    height: 100%;
    background: var(--background);
    z-index: 2;
    padding: 0.44rem 0.69rem 0.88rem 2.69rem;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.23);
    transition: transform 0.2s ease-out;
    .font_2 {
      font-size: 0.71rem;
      line-height: 0.71rem;
      color: #c2bdb1;
    }
    .text_18 {
      margin-top: 0.061rem;
      color: #c3beb4;
    }
    .group_3 {
      margin-right: 0.19rem;
      margin-bottom: 0.063rem;
      .image_11 {
        width: 2.2rem;
        height: 2.2rem;
        object-fit: contain;
        position: relative;
        top: -0.15rem;
      }
      .image_29 {
        margin-top: 0.063rem;
      }
      .image_26 {
        width: 1.2rem;
        height: 1.2rem;
      }
    }
    .font_3 {
      font-size: 0.88rem;
      line-height: 0.88rem;
    }
    .text_19 {
      margin-bottom: 0.065rem;
      color: #816d61;
      font-size: 0.9rem;
      line-height: 0.9rem;
      word-break: break-all;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      -webkit-line-clamp: 1;
    }
    .image_28 {
      width: 1.06rem;
      height: 0.91rem;
    }
  }
  .image_27 {
    width: 1.7rem;
    height: 1.7rem;
    object-fit: cover;
  }
  .pos_18 {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    z-index: 3;
    transition: transform 0.3s ease-out;
  }
}
</style>
