<template>
  <div>
    <el-button @click="serHandler">设置</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.leftTop" style="width: 70%;" @input="change"></el-input>
            </el-form-item>
            <el-form-item label="右上圆角半径">
              <el-input v-model="formData.rightTop" style="width: 70%;" @input="change"></el-input>
            </el-form-item>
            <el-form-item label="右下圆角半径">
              <el-input v-model="formData.rightBottom" style="width: 70%;" @input="change"></el-input>
            </el-form-item>
            <el-form-item label="左下圆角半径">
              <el-input v-model="formData.leftBottom" 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: "FourRadius",
  props: {
    dictCode: String,
    modelData: String
  },
  data() {
    return {
      dialogVisible: false,
      formData: []
    };
  },
  computed: {
  },
  methods: {
    okHandler() {
      let result = [];
      result.push(this.formData.leftTop);
      result.push(this.formData.rightTop);
      result.push(this.formData.rightBottom);
      result.push(this.formData.leftBottom);
      this.$emit("set-value", this.dictCode, "[" + result.join(",") + "]");
      this.dialogVisible = false;
    },
    serHandler() {
      this.formData = this.initFormData();
      this.dialogVisible = true;
    },
    initFormData() {
      let obj = {};
        if (this.modelData) {
          let arr = eval(this.modelData);
          obj.leftTop = arr[0];
          obj.rightTop = arr[1];
          obj.rightBottom = arr[2];
          obj.leftBottom = arr[3];
        } else {
          obj.leftTop = 0;
          obj.rightTop = 0;
          obj.rightBottom = 0;
          obj.leftBottom = 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>
