<template>
  <div class="params-tab">
    <el-form-item label="宽度">
      <el-input
        :value="app.attrData.options.width"
        type="number"
        size="mini"
        @input="changeW"
      />
    </el-form-item>

    <el-form-item label="高度">
      <el-input
        :value="app.attrData.options.height"
        type="number"
        size="mini"
      />
    </el-form-item>

    <el-form-item label="X轴位置">
      <el-input
        :value="app.attrData.options.x"
        type="number"
        size="mini"
        @input="changeX"
      />
    </el-form-item>

    <el-form-item label="Y轴位置">
      <el-input
        :value="app.attrData.options.y"
        type="number"
        size="mini"
        @input="changeY"
      />
    </el-form-item>
  </div>
</template>
<script>
export default {
  name: "ParamsTab",
  inject: ["app"],
  data() {
    return {};
  },
  watch: {},
  methods: {
    changeX(value) {
      value = Number(value);
      if (isNaN(value)) {
        value = this.app.attrData.options.x;
      } else {
        this.$set(this.app.attrData.options, "x", Number(value));
      }
    },
    changeY(value) {
      value = Number(value);
      if (isNaN(value)) {
        value = this.app.attrData.options.y;
      } else {
        this.$set(this.app.attrData.options, "y", Number(value));
      }
    },
    changeW(value) {
      this.$set(this.app.attrData.options, "width", Number(value));
    }
  }
};
</script>
