<template>
  <div class="img-options">
    <el-dialog :title="'图形选项'" :visible.sync="isShow" :width="dialogWidth" @open="initDialog" :close-on-click-modal="false">
      <el-form :model="config" ref="imgOptionsRef" label-width="120px">
        <el-form-item label="线条形状：" prop="connectorStyle">
          <el-radio-group v-model="config.connectorStyle" size="mini">
            <el-radio-button label="Bezier">曲线</el-radio-button>
            <el-radio-button label="Flowchart">折线</el-radio-button>
            <el-radio-button label="StateMachine">微折线</el-radio-button>
            <el-radio-button label="Straight">直线</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="节点排列：" prop="topPositionFirst">
          <el-radio-group v-model="config.topPositionFirst" size="mini">
            <el-radio-button label="Y">尽量将节点排列在上层</el-radio-button>
            <el-radio-button label="N">尽量将节点排列在下层</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="节点横向间距：" prop="HDistance" :verify="['NotNull']">
          <el-input-number v-model="config.HDistance" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="节点纵向间距：" prop="VDistance" :verify="['NotNull']">
          <el-input-number v-model="config.VDistance" :min="0"></el-input-number>
        </el-form-item>
        <!-- <el-form-item label="节点宽度：" prop="nodeWidth" :verify="['NotNull']">
          <el-input-number v-model="config.nodeWidth" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="节点高度：" prop="nodeHeight" :verify="['NotNull']">
          <el-input-number v-model="config.nodeHeight" :min="0"></el-input-number>
        </el-form-item> -->
      </el-form>
      <div slot="footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" @click="okHandler" :loading="confirmLoading">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: { 'show': Boolean, 'data': Object },
  computed: {
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  data() {
    return {
      confirmLoading: false,
      config: {
        connectorStyle: '',
        topPositionFirst: '',
        HDistance: 0,
        VDistance: 0,
        nodeWidth: 0,
        nodeHeight: 0
      }
    }
  },
  created() {
    if (document.documentElement.clientWidth >= 1920) {
      this.dialogWidth = '25%'
    } else {
      this.dialogWidth = '34%'
    }
  },
  methods: {
    okHandler() {
      this.confirmLoading = true
      this.$emit('confirm', this.config)
      this.confirmLoading = false
      this.isShow = false
    },
    initDialog() {
      this.config.connectorStyle = this.data.connectorStyle ? this.data.connectorStyle : 'Flowchart'
      this.config.topPositionFirst = this.data.topPositionFirst ? this.data.topPositionFirst : 'Y'
      this.config.HDistance = this.data.HDistance ? this.data.HDistance : 80
      this.config.VDistance = this.data.VDistance ? this.data.VDistance : 50
      this.config.nodeWidth = this.data.nodeWidth ? this.data.nodeWidth : 90
      this.config.nodeHeight = this.data.nodeHeight ? this.data.nodeHeight : 30
    }
  }
}

</script>

<style>
  .img-options .el-dialog__header {
    line-height: 0;
  }

  .img-options .el-radio-group label,
  .el-form-item__content label,
  .el-checkbox-group label {
    padding: 0;
  }

  .img-options .el-input__inner{
    padding-right:50px !important;
  }
</style>
