<template>
  <div>
    <span>坐标：</span>
    <div>
      <el-button type="primary" @click="changeFabricPosition(true, 'top')"
        >上移</el-button
      >
      <el-button type="primary" @click="changeFabricPosition(false, 'top')"
        >下移</el-button
      >
      <el-button type="primary" @click="changeFabricPosition(true, 'left')"
        >左移</el-button
      >
      <el-button type="primary" @click="changeFabricPosition(false, 'left')"
        >右移</el-button
      >
    </div>
  </div>
  <div>
    <span>宽度：</span>
    <el-input-number
      v-model="fabricPosition.width"
      :min="1"
      @change="changeFabricPosition($event, 'width')"
      :max="fabricPosition.imgDomWidth"
    />
  </div>
  <div>
    <span>高度：</span>
    <el-input-number
      v-model="fabricPosition.height"
      :min="1"
      @change="changeFabricPosition($event, 'height')"
      :max="fabricPosition.imgDomHight"
    />
  </div>
</template>
<script lang="ts" setup>
const props = defineProps(["change"]);
import { reactive } from "vue";
const fabricPosition = reactive<any>({
  top: 0,
  left: 0,
  width: 0,
  height: 0,
  imgDomHight: 1,
  imgDomWidth: 1,
});

const setSize = (data: any, imgDomWidth: number, imgDomHight: number): void => {
  fabricPosition.top = data.top;
  fabricPosition.left = data.left;
  fabricPosition.width = data.width;
  fabricPosition.height = data.height;
  fabricPosition.imgDomWidth = imgDomWidth;
  fabricPosition.imgDomHight = imgDomHight;
};

const changeFabricPosition = (value: number | boolean, str: string): void => {
  if (typeof value === "boolean") {
    if (str === "top") {
      props.change(value, str);
    } else {
      props.change(value, str);
    }
  } else {
    props.change(value, str);
  }
};

defineExpose({
  setSize,
});
</script>
<style lang="scss" scoped></style>
