<template>
  <div class="back-icon" @touchstart="handleTouchStart" @touchend="handleTouchEnd"
    @touchcancel="handleTouchCancel" :class="{ 'tapped': isTouched }">
    <van-icon name="arrow-left" class="icon" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

const isTouched = ref(false)

const handleTouchStart = () => {
  isTouched.value = true
}

const handleTouchEnd = () => {
  if (isTouched.value) {
    setTimeout(() => {
      if (window.history.length <= 1) {
        router.push({ name: 'home' })
      } else {
        router.back()
      }
      isTouched.value = false
    }, 150)
  }
}

const handleTouchCancel = () => {
  isTouched.value = false
}

</script>

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