<template>
  <el-form-item label="旋转：">
    <el-slider
      style="width: 100px"
      v-model="rotate"
      :min="0"
      :max="360"
      @change="shape.setRotate(rotate, true)"
    />
  </el-form-item>
  <el-form-item label="缩放：">
    <el-slider
      style="width: 100px"
      v-model="scale"
      :min="0.5"
      :step="0.01"
      :max="5"
      @change="shape.setScale(scale, true)"
    />
  </el-form-item>
  <Del @delete="$emit('delete')" />
</template>
<script setup lang="ts">
import { ref, watchEffect } from "vue";
import { BoardShape } from "../board";
import Del from "./delete.vue";

const props = defineProps<{ shape: BoardShape }>();
const emit = defineEmits<{
  (e: "delete"): void;
  (e: "blur"): void;
  (e: "inputIng", ing: boolean): void;
}>();

const rotate = ref<number>(props.shape.data.rotate);
const scale = ref<number>(props.shape.data.scale);
watchEffect(() => {
  props.shape.setRotate(rotate.value, false);
});
watchEffect(() => {
  props.shape.setScale(scale.value, false);
});
</script>
