<template>
  <!-- 告警条件 -->
  <div id="alarmModal">
    <div class="rangeSelect">
      <label>告警条件：</label>
      当错误数
      <a-select
        :default-value="this.symbolArr[0]"
        style="width: 65px"
        v-model="alarmObj.warnSymbol"
        @change="handleChange">
        <a-select-option v-for="(item,index) in symbolArr" :value="item.value" :key="index">
          {{ item.title }}
        </a-select-option>
      </a-select>
      <a-input
        style="width: 85px;margin-left: 10px;"
        v-model="alarmObj.warnNum"
      />
      时，则告警
    </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">
export default {
  // eslint-disable-next-line vue/require-prop-types
  props: ['warnNum', 'warnSymbol'],
  mounted() {
    this.alarmObj.warnNum = this.warnNum
    this.alarmObj.warnSymbol = this.warnSymbol
  },
  data() {
    return {
      symbolArr: [
      {
        title: '=',
        value: 0
      },
      {
        title: '>=',
        value: 1
      },
      {
        title: '>',
        value: 2
      },
      {
        title: '<',
        value: 3
      },
      {
        title: '<=',
        value: 4
      }
      ],
      alarmObj: {
        warnNum: null,
        warnSymbol: null,
        alarmStatus: '0'
      }
    }
  },
  methods: {
    handleChange(value, info) {
      this.alarmObj.warnSymbol = value
    },
    // 取消
    handleOk() {
      this.$emit('alarmHandleOk')
    },

    // 提交
    onSubmit() {
      if (this.alarmObj.warnSymbol !== null && this.alarmObj.warnNum !== null) {
        this.alarmObj.alarmStatus = '1'
      }
      this.$emit('getAlarmData', this.alarmObj)
    }

  }
}
</script>

<style scoped lang='less'>
#alarmModal{
  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>
