<template>
	
  <view class="move-circle">
    <!-- 上 -->
    <view class="up-container" @click="handleClick('up', 0)">
      <image :src="icons.up" class="container-img" />
    </view>
    <!-- 右 -->
    <view class="right-container" @click="handleClick('right', 1)">
      <image :src="icons.right" class="container-img" />
    </view>
    <!-- 下 -->
    <view class="down-container" @click="handleClick('down', 2)">
      <image :src="icons.down" class="container-img" />
    </view>
    <!-- 左 -->
    <view class="left-container" @click="handleClick('left', 3)">
      <image :src="icons.left" class="container-img" />
    </view>
  </view>
</template>

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

const icons = reactive({
  up: '/static/index/movemode/bupicon.png',
  right: '/static/index/movemode/brighticon.png',
  down: '/static/index/movemode/bdownicon.png',
  left: '/static/index/movemode/blefticon.png'
})

function handleClick(key, dir) {
  // icons[key] = `/static/index/movemode/blue${key}icon.png`
  emit('movecard', dir)

  // 延迟一点时间再恢复图标（视觉反馈）
  // setTimeout(() => {
  //   icons[key] = `/static/index/movemode/${key}icon.png`
  // }, 150)
}
</script>

<style lang="less" scoped>
.move-circle {
  position: absolute;
  bottom: 300rpx;
  left: 0;
  width: 350rpx;
  height: 350rpx;
  // border-radius: 50%;
  background-image: url('/static/index/movemode/bj.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  // background-color: rgba(127, 127, 127, 0.3);
  z-index: 9999;
}
.container-img {
  width: 120rpx;
  height: 120rpx;
}
.up-container {
  position: absolute;
  top: 0;
  left: 115rpx;
  width: 120rpx;
  height: 120rpx;
}
.down-container {
  position: absolute;
  bottom: 0;
  left: 115rpx;
  width: 120rpx;
  height: 120rpx;
}
.right-container {
  position: absolute;
  top: 115rpx;
  right: 5rpx;
  width: 120rpx;
  height: 120rpx;
}
.left-container {
  position: absolute;
  top: 115rpx;
  left: 0rpx;
  width: 120rpx;
  height: 120rpx;
}
</style>
