<template>
  <a-modal
      :visible='showModal'
      :title="this.$t('functional-analysis.top-btn.property-tagged')"
      class='creat-update-modal'
      :width='700'
      @ok='handleSave'
      @cancel='handleCancel'
  >

    <a-form-model layout='vertical' ref="ruleForm" :model="queryParam" :rules="rules">
      <a-card :bordered='false'>
        <a-row :gutter='24'>
          <a-col :span='24'>
            <a-form-model-item ref="severityMax"  prop="severityMax"
                               :label="$t( 'functional-analysis.top-modal.S start')">
              <a-input-number
                  allowClear
                  v-model="queryParam.severityMax"
                  :placeholder="$t('functional-analysis.top-modal.Please enter S start')"
                  :maxLength='2'
                  :min="1"
                  :max="10"
                  class="inputLength"
              />
            </a-form-model-item>
          </a-col>

          <a-col :span='24'>
            <a-form-model-item ref="severityMin"  prop="severityMin"  :label="$t( 'functional-analysis.top-modal.S end')">
              <a-input-number
                  v-model="queryParam.severityMin"
                  :placeholder="$t('functional-analysis.top-modal.Please enter S end')"
                  :maxLength='2'
                  allowClear
                  :min="1"
                  :max="10"
                  class="inputLength"
              />
            </a-form-model-item>
          </a-col>

          <a-col :span='24'>
            <a-form-model-item ref="occurrenceMax"  prop="occurrenceMax"  :label="$t('functional-analysis.top-modal.O start')">
              <a-input-number
                  allowClear
                  v-model="queryParam.occurrenceMax"
                  :placeholder="$t('functional-analysis.top-modal.Please enter O start')"
                  :maxLength='2'
                  :min="1"
                  :max="10"
                  class="inputLength"
              />
            </a-form-model-item>
          </a-col>
          <a-col :xl='24' :lg='24' :md='24' :sm='12' :xs='8'>
            <a-form-model-item ref="occurrenceMin"  prop="occurrenceMin" :label="$t('functional-analysis.top-modal.O end')">
              <a-input-number
                  allowClear
                  v-model="queryParam.occurrenceMin"
                  :placeholder="$t( 'functional-analysis.top-modal.Please enter O end')"
                  :maxLength='2'
                  :min="1"
                  :max="10"
                  class="inputLength"
              />
            </a-form-model-item>
          </a-col>

        </a-row>
      </a-card>
    </a-form-model>
  </a-modal>
</template>

<script>


export default {
  name: "EditPropertyTagged",
  data() {
    const validatorNumber = (rule, value, callback) => {
        if (!value || !/^([0-9]|10)$/.test(value)) {
          callback(new Error(this.$t('functional-analysis.top-modal.Please enter number')))
        } else {
          callback()
        }
    }
    return {
      //模态窗是否显示
      showModal: false,
      // formData: {},
      queryParam: {},
      rules: {
        severityMax: [{ validator: validatorNumber, trigger: 'blur'}],
        severityMin: [{validator: validatorNumber, trigger: 'blur'}],
        occurrenceMax: [{validator: validatorNumber, trigger: 'blur'}],
        occurrenceMin: [{validator: validatorNumber, trigger: 'blur'}]
      },
    }
  },
  methods: {
    handleSave() {
      // 保存数据校验
      if (!this.isNull()) {
        return;
      }
      var data = {
        fmeaId:this.$route.query.rfmeaId,
        pductClassifyId: this.queryParam.pductClassifyId,
        detailId: this.queryParam.detailId,
        severityMax: parseInt(this.queryParam.severityMax),
        severityMin: parseInt(this.queryParam.severityMin),
        occurrenceMax: parseInt(this.queryParam.occurrenceMax),
        occurrenceMin: parseInt(this.queryParam.occurrenceMin)
      };
      this.$api.saveRPClassify(data).then(res => {
        if (res.flag) {
          this.$message.success(res.message, 1);
        } else {
          this.$message.error(res.message, 1);
        }
      })
      this.showModal = false;
      this.queryParam.sMax = undefined;
      this.queryParam.sMin = undefined;
      this.queryParam.oMax = undefined;
      this.queryParam.oMin = undefined;
      this.$parent.initData();
    },
    handleCancel() {
      this.showModal = false;
      this.queryParam.sMax = undefined;
      this.queryParam.sMin = undefined;
      this.queryParam.oMax = undefined;
      this.queryParam.oMin = undefined;
      this.resetForm();
    },
    /**
     * 保存数据校验（非空校验，以及最大最小值比较校验）
     */
    isNull() {
      if (!this.queryParam.severityMax || this.queryParam.severityMax === undefined) {
        this.$notification.warning({message: this.$t('functional-analysis.top-modal.s-max-not-empty')});
        return false;
      }
      if (!this.queryParam.severityMin || this.queryParam.severityMin === undefined) {
        this.$notification.warning({message: this.$t('functional-analysis.top-modal.s-min-not-empty')});
        return false;
      }
      if (!this.queryParam.occurrenceMax || this.queryParam.occurrenceMax === undefined) {
        this.$notification.warning({message: this.$t('functional-analysis.top-modal.o-max-not-empty')});
        return false;
      }
      if (!this.queryParam.occurrenceMin || this.queryParam.occurrenceMin === undefined) {
        this.$notification.warning({message: this.$t('functional-analysis.top-modal.o-min-not-empty')});
        return false;
      }
      if (this.queryParam.severityMin > this.queryParam.severityMax) {
        this.$notification.warning({message: this.$t('functional-analysis.top-modal.s-min-cannot-be-greater-than-s-max')});
        return false;
      }
      if (this.queryParam.occurrenceMin > this.queryParam.occurrenceMax) {
        this.$notification.warning({message: this.$t('functional-analysis.top-modal.o-min-cannot-be-greater-than-o-max')});
        return false;
      }
      return true;
    },
    //清空验证规则
    resetForm(){
      this.$nextTick(() =>{
        this.$refs.ruleForm.resetFields();
      })
      // console.log(this.$refs.ruleForm)
      // this.$refs['ruleForm'].resetFields();
    },
    mounted() {
    },
    // validatorPhone(rule, value, callback){
    //   const pattern= /^\d{1,10}$/;
    //   if (!pattern.test(value)){
    //     callback('请输入1-10的整数')
    //     return
    //   }
    //   callback();
    //
    // }
  },
}
</script>

<style scoped>
.inputLength {
    width: 100%
}
</style>
