<template>
  <!-- 规则参数 -->
  <div id="parameModal">
    <div class="rangeSelect">
      <label>选择值域范围：</label>
      <a-input-number
        id="minInputNumber"
        v-model="parameDataArr.parameterRuleMin"
        :max="parameDataArr.parameterRuleMax-1"
        @change="minOnChange" />
      <div class="line">~</div>
      <a-input-number
        id="maxInputNumber"
        v-model="parameDataArr.parameterRuleMax"
        :min="parameDataArr.parameterRuleMin+1"
        @change="maxOnChange" />
    </div>

    <div class="btn-list">
      <a-button type="stop" style="margin-right: 20px;" @click="handleOk">
        取消
      </a-button>
      <a-button type="add" @click="onSubmit">
        确定
      </a-button>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { number } from 'echarts'
export default {
  props: {
    parameterRuleMin: {
      type: number,
      default: () => {}
    },
    parameterRuleMax: {
      type: number,
      default: () => {}
    }
  },
  data() {
    return {
      parameDataArr: {
        parameterRuleMin: null,
        parameterRuleMax: null
      }
    }
  },
  mounted() {
    this.parameDataArr.parameterRuleMax = this.parameterRuleMax
    this.parameDataArr.parameterRuleMin = this.parameterRuleMin
    this.hh()
  },
  methods: {
    minOnChange() {
      // console.log('minchanged', value)
    },
    hh() {
      console.log('this.parameDataArr', this.parameDataArr)
      console.log('this.parameterRuleMax', this.parameterRuleMax)
    },
    maxOnChange(value) {
      if (this.parameDataArr.parameterRuleMin < value) {
        this.parameDataArr.parameterRuleMax = value
      } else {
        this.parameDataArr.parameterRuleMax = null
      }
    },

    // 取消
    handleOk() {
      this.$emit('parameModalHandleOk')
    },

    // 提交
    onSubmit() {
      this.$emit('getRuleParameters', this.parameDataArr)
      // console.log('最大最小：', this.obj)
    }

  }

}
</script>

<style scoped lang='less'>
#parameModal{
  margin-top: 10px;
  .rangeSelect{
    label{
      font-size: 14px;
    }
    .line{
      font-size: 24px;
      display: inline-block;
      padding: 0 6px
    }

  }
  .btn-list {
    margin: 20px 0 0;
    text-align: center;
  }

}

</style>
