<template>
	<view class="move-circle">
		<image src="/static/index/keyimg/lunpan.png" class="move-circle-all" />
		<view class="click-box-top" @click="handleClick(0)">
		</view>
		<view class="click-box-left" @click="handleClick(3)">
		</view>
		<view class="click-box-bottom" @click="handleClick(2)">
		</view>
		<view class="click-box-right" @click="handleClick(1)">
		</view>
	</view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
const emit = defineEmits(['movecard'])

const key = ref(-1)

// 保存当前定时器 ID
let resetTimer = null

function handleClick(dir: number) {
  // 清除上一次定时器
  if (resetTimer !== null) {
    clearTimeout(resetTimer)
  }

  // 显示当前方向
  key.value = dir
  emit('movecard', dir)

  // 重新开启 800ms 定时器
  resetTimer = setTimeout(() => {
    key.value = -1
    resetTimer = null
  }, 500)
}
</script>



<style lang="less" scoped>
	.move-circle {
		position: absolute;
		bottom: 100rpx;
		left: 100rpx;
		width: 330rpx;
		height: 330rpx;
		border-radius: 50%;	
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;
		.click-box-top{
			position: absolute;
			top: 0;
			left: 100rpx;
			width: 130rpx;
			height: 120rpx;
		}
		.click-box-bottom{
			position: absolute;
			bottom: 0;
			left: 100rpx;
			width: 130rpx;
			height: 120rpx;
		}
		.click-box-left{
			position: absolute;
			bottom: 100rpx;
			left: 0;
			width: 98rpx;
			height: 120rpx;
		}
		.click-box-right{
			position: absolute;
			bottom: 100rpx;
			right: 0;
			width: 98rpx;
			height: 120rpx;
		}
	}
	.move-circle-all{
		width: 300rpx;
		height: 300rpx;
	}
	
</style>