<template>
  <div>
    <el-form label-width="80px" :model="pageInfo" size="mini" class="kr-form">
      <el-row>
        <el-form-item label="模板名称">
          <el-input v-model="pageInfo.title" class="full-w"></el-input>
        </el-form-item>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="模板宽度">
            <el-input-number v-model="pageInfo.width" controls-position="right" :min="0" class="min-input"
              @input="shapeChanged('width')"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="模板高度">
            <el-input-number v-model="pageInfo.height" controls-position="right" :min="0" class="min-input"
              @input="shapeChanged('height')"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="纸张宽度">
          <el-input-number v-model="pageInfo.pageWidth" controls-position="right" :min="0" class="min-input"
            @input="shapeChanged('pageWidth')"></el-input-number>
          <span class="unit-text">(mm)</span>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="纸张高度">
          <el-input-number v-model="pageInfo.pageHeight" controls-position="right" :min="0" class="min-input"
            @input="shapeChanged('pageHeight')"></el-input-number>
          <span class="unit-text">(mm)</span>
        </el-form-item>
      </el-row>
      <el-row>
        <div style="padding:0 12px;">
          注：模板宽度与模板高度的比例将自动同步为纸张宽度与纸张高度的比例
        </div>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  computed: {
    pageInfo() {
      return this.$vptd.state.page
    },
  },
  methods: {
    // 宽度与高度的比例必须约等于纸张宽度与纸张高度的比例，否则拖拽组件将错位
    shapeChanged(element) {
      if (element === "width") {
        const proportion = this.pageInfo.width / this.pageInfo.height
        this.pageInfo.pageWidth = Math.ceil(proportion * this.pageInfo.pageHeight)
      } else if (element === "height") {
        const proportion = this.pageInfo.height / this.pageInfo.width
        this.pageInfo.pageHeight = Math.ceil(proportion * this.pageInfo.pageWidth)
      } else if (element === "pageWidth") {
        const proportion = this.pageInfo.pageWidth / this.pageInfo.pageHeight
        this.pageInfo.width = Math.ceil(proportion * this.pageInfo.height)
      } else if (element === "pageHeight") {
        const proportion = this.pageInfo.pageHeight / this.pageInfo.pageWidth
        this.pageInfo.height = Math.ceil(proportion * this.pageInfo.width)
      }
    }
  }
}
</script>

