<template>
  <div>
    <el-button @click="setHandler">设置</el-button>
    <el-dialog
      :close-on-click-modal="false"
      class="pub_dialog"
      title="边距设置"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <el-container>
        <el-main>
          <el-form size="small" style="margin:10px" :model="formData">
            <el-form-item label="上边距">
              <el-input v-model="formData.top" style="width: 70%;" @input="change"></el-input>
            </el-form-item>
            <el-form-item label="右边距">
              <el-input v-model="formData.right" style="width: 70%;" @input="change"></el-input>
            </el-form-item>
            <el-form-item label="下边距">
              <el-input v-model="formData.bottom" style="width: 70%;" @input="change"></el-input>
            </el-form-item>
            <el-form-item label="左边距">
              <el-input v-model="formData.left" style="width: 70%;" @input="change"></el-input>
            </el-form-item>
          </el-form>
        </el-main>
        <el-footer height="45px" style="text-align:center;padding:5px">
          <el-button type="primary" @click="okHandler">保存</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </el-footer>
      </el-container>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "FourPadding",
  props: {
    dictCode: String,
    modelData: String
  },
  data() {
    return {
      dialogVisible: false,
      formData: []
    };
  },
  computed: {
  },
  methods: {
    okHandler() {
      let result = [];
      result.push(this.formData.top);
      result.push(this.formData.right);
      result.push(this.formData.bottom);
      result.push(this.formData.left);
      this.$emit("set-value", this.dictCode, "[" + result.join(",") + "]");
      this.dialogVisible = false;
    },
    setHandler() {
      this.formData = this.initFormData();
      this.dialogVisible = true;
    },
    initFormData() {
      let obj = {};
      if (this.modelData) {
        let arr = eval(this.modelData);
        obj.top = arr[0];
        obj.right = arr[1];
        obj.bottom = arr[2];
        obj.left = arr[3];
      } else {
        obj.top = 0;
        obj.right = 0;
        obj.bottom = 0;
        obj.left = 0;
      }
      return obj;
    },
    change() {
      this.$forceUpdate();
    }
  }
};
</script>
<style lang="scss">
.pub_dialog {
  display: flex;
  justify-content: center;
  align-items: Center;
  overflow: hidden;
  .el-dialog {
    margin: 0 auto !important;
    height: 90%;
    overflow: hidden;
    .el-dialog__body {
      position: absolute;
      left: 0;
      top: 54px;
      bottom: 0;
      right: 0;
      padding: 0;
      z-index: 1;
      overflow: hidden;
      overflow-y: auto;
    }
  }
}
</style>
