<template>
	<view class="move-circle">
		<image v-show="key === 0" src="/static/index/keyimg/where10.png" class="container-img-up" />
		<image v-show="key === 2" src="/static/index/keyimg/where10.png" class="container-img-down" />
		<image v-show="key === 3" src="/static/index/keyimg/where10.png" class="container-img-left" />
		<image v-show="key === 1" src="/static/index/keyimg/where10.png" class="container-img-right" />
		<!-- 上 -->
		<view class="up-container" @click="handleClick(0)">
			<image :src="icons.up" class="container-img" />
		</view>
		<!-- 右 -->
		<view class="right-container" @click="handleClick(1)">
			<image :src="icons.right" class="container-img-shu" />
		</view>
		<!-- 下 -->
		<view class="down-container" @click="handleClick(2)">
			<image :src="icons.down" class="container-img" />
		</view>
		<!-- 左 -->
		<view class="left-container" @click="handleClick(3)">
			<image :src="icons.left" class="container-img-shu" />
		</view>
	</view>
</template>

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

const icons = reactive({
  up: '/static/index/keyimg/up1.png',
  right: '/static/index/keyimg/where2.png',
  down: '/static/index/keyimg/down1.png',
  left: '/static/index/keyimg/where1.png'
})
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: 300rpx;
		left: 0;
		width: 330rpx;
		height: 330rpx;
		border-radius: 50%;
		background: radial-gradient(circle at center,
				/* 圆形渐变，中心点在元素正中 */
				rgba(110, 149, 217, 0.2) 0%,
				/* 中心处纯色 */
				rgba(149, 177, 227, 0.2) 100%
				/* 边缘颜色 */
			);
		border: 5rpx rgba(148, 181, 229, 0.5) solid;
		// opacity: 0.1;	
		z-index: 9999;
	}

	.container-img-up {
		position: absolute;
		top: -48rpx;
		left: 50rpx;
		width: 220rpx;
		height: 120rpx;
	}

	.container-img-down {
		position: absolute;
		bottom: -48rpx;
		left: 50rpx;
		transform: rotate(180deg);
		width: 220rpx;
		height: 120rpx;
	}

	.container-img-left {
		position: absolute;
		left: -97rpx;
		top: 95rpx;
		transform: rotate(270deg);
		width: 220rpx;
		height: 120rpx;
	}

	.container-img-right {
		position: absolute;
		right: -97rpx;
		transform: rotate(90deg);
		top: 95rpx;
		width: 220rpx;
		height: 120rpx;
	}

	.container-img {
		width: 170rpx;
		height: 70rpx;
	}

	.container-img-shu {
		width: 70rpx;
		height: 170rpx;
	}

	.up-container {
		position: absolute;
		top: 30rpx;
		left: 75rpx;
	}

	.down-container {
		position: absolute;
		bottom: 30rpx;
		left: 75rpx;
	}

	.right-container {
		position: absolute;
		top: 75rpx;
		right: 30rpx;
	}

	.left-container {
		position: absolute;
		top: 75rpx;
		left: 30rpx;
	}
</style>