<template>
  <!-- 聊天消息内容的文本展示 -->

  <van-popover
    theme="dark"
    placement="bottom"
    v-model:show="showPopover"
    :actions="actions"
    actions-direction="horizontal"
    @select="select"
  >
    <template #reference>
      <div
        @touchstart="doTouchstart"
        class="inline-block min-h-40 max-w-full break-words overflow-auto rounded-[4px] relative bg-white box-border text-base p-5 text-wrap"
      >
        {{ item }}看哈金沙萨空间的哈师大将扩大解释
      </div>
    </template>
  </van-popover>
</template>

<script setup>
import { useClipboard } from '@vueuse/core'
const { copy, isSupported } = useClipboard()

const showPopover = ref(false)

defineProps({
  itemData: {
    type: Object,
    default: () => ({})
  }
})

defineEmits(['onDelete'])
// const longPressDuration = 1000
// const pressTimer = ref(null)
const actions = [
  // { text: '引用', icon: 'add-o' },
  { text: '复制', icon: 'add-o' },
  { text: '删除', icon: 'add-o' },
  { text: '撤回', icon: 'add-o' }
]

function doTouchstart() {
  // pressTimer.value = setTimeout(() => {
  showPopover.value = true
  // }, longPressDuration)
}

function select(action, index) {
  console.log(action, index)

  if (action.text == '复制') {
    copy(itemData.text)
    showToast('已复制')
  }
  if (action.text == '删除') {
    $emit('onDelete')
    showToast('已复制')
  }
  showPopover.value = false
}
</script>

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