<template>
  <div class="modal-rule-three">
    <div class="modal-step3-title">
      <div>计算方式通过多个条件（运算符）和逻辑符组合表达，符号代表含义如下所示：</div>
      <div> 
        <p>1.运算符：等于“=”、不等于“！=”、大于“>”、大于等于“>=”、小于“<”、小于等于“<=”、大于等于且小于等于“[ ]”、大于等于且小于“[ )”、大于且小于等于“( ]”、大于且小于“( )”;</p>
        <p>2.逻辑符：且“&&”、或“||”，例：条件1&&条件2 表示满足条件1且满足条件2;| 条件1||条件2表示满足条件1或条件2；</p>
        <p>3.所有的符号必须是英文符号。</p>
    </div>
    </div>
    <div class="modal-step3-body">
      <div class="modal-step3-body-title">配置规则</div>
      <div class="modal-step3-body-rule">
        <div class="modal-rule-top">
          <div>已选择：</div>
          <div class="modal-rule-top-item">
            字段：{{ruleObj.field}}
          </div>
          <div class="modal-rule-top-item">
            指标类型：{{ruleObj.targetName}}
          </div>
        </div>
        <div class="add-rule">
          <i class="iconfont icon-tianjia" style="cursor:pointer;color:#2DA0F8;padding-right: 10px" @click="handleAdd(ruleObj.targetName)"></i>点击"+"以添加运算条件
        </div>
        <div class="rule integrity-rule" v-show="ruleObj.targetName=='完整性'">
          <div v-show="showIntegrity">
            {{inText}} 
          </div>
        </div>      
        <div class="rule uniformity-rule" v-show="ruleObj.targetName=='一致性'">
          <div v-show="showUniformity1">数据处理前字段值 = 数据处理后字段值
          </div>
          <div class="uniformity-rule-mode" v-show="showUniformity2">
            数据类型为&nbsp;
            <Select v-model="ruleObj.dataType" placeholder="数据类型" style="width: 166px">
              <Option v-for="item in dataTypeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </div>
        </div>
        <div class="rule timeliness-rule" v-show="ruleObj.targetName=='及时性（数据采集）'">
          <Form ref="formDynamicTime1" :model="formCustom" :label-width="0" class="timeliness-form" v-show="showTimeliness1">
            <Row v-for="(item, index) in formCustom.timelinArry1" :key="index">
              <Col span="2">数据采集</Col>
              <Col span="1">{{item.logical}}</Col>
              <Col span="4" class="timeliness-form-col">
                <FormItem :prop="'timelinArry1.'+index+'.dataValue'" :rules="{required: true,type:'number',message: '请输入判断条件',trigger: 'blur'}">
                  <InputNumber v-model="item.dataValue" placeholder="判断条件" :min="1" :max="100000000" :active-change="false"></InputNumber>
                </FormItem>
              </Col>
              <Col span="1"><span class="timeliness-rule-unit">ms</span></Col>
            </Row>
          </Form>
        </div>
        <div class="rule timeliness-rule" v-show="ruleObj.targetName=='及时性（数据入库）'">
          <Form ref="formDynamicTime2" :model="formCustom" :label-width="0" class="timeliness-form" v-show="showTimeliness2">
            <Row v-for="(item, index) in formCustom.timelinArry2" :key="index">
              <Col span="2">数据入库</Col>
              <Col span="1">{{item.logical}}</Col>
              <Col span="4" class="timeliness-form-col">
                <FormItem :prop="'timelinArry2.'+index+'.dataValue'" :rules="{required: true,type:'number',message: '请输入判断条件',trigger: 'blur'}">
                  <InputNumber v-model="item.dataValue" placeholder="判断条件" :min="1" :max="100000000" :active-change="false"></InputNumber>
                </FormItem>
              </Col>
              <Col span="1"><span class="timeliness-rule-unit">ms</span></Col>
            </Row>
          </Form>
        </div>
        <div class="rule timeliness-rule common-scroll" v-show="ruleObj.targetName=='准确性'">
          <Form ref="formDynamicAcc" :model="formCustomAcc" :label-width="0" class="timeliness-form" v-show="showAccuracy">
            <!-- <template v-if="formCustomAcc.accuracyArr && formCustomAcc.accuracyArr.length>0"> -->
            <Row v-for="(item, index) in formCustomAcc.accuracyArr" :key="index">
              <Col span="1">条件{{index+1}}</Col>
              <Col span="3">{{ruleObj.field}}</Col>
              <Col span="4" class="timeliness-form-col timeliness-form-col-select">
                <FormItem :prop="'accuracyArr.' + index + '.logical'" :rules="{required: clickbtn==1 ? true: false,message: '请选择逻辑关系',trigger: 'change',}">
                  <Select v-model="item.logical" style="width: 100%" placeholder="逻辑关系" ref="logical" transfer>
                    <Option v-for="item in symbloList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="4" class="timeliness-form-col">
                <FormItem :prop="'accuracyArr.'+index+'.value'" :rules="{required: clickbtn==1 ? true: false,type:'number',message: '请输入判断条件',trigger: 'blur'}">
                  <InputNumber v-model.trim="item.value" placeholder="判断条件" :max="100000000" :active-change="false"></InputNumber>
                </FormItem>
              </Col>
              <Col span="2">
                <i class="iconfont icon-tianjia" style="cursor:pointer;color:#2DA0F8;;padding-left:10px" @click="handleAddAcc('formDynamicAcc')"></i>
                <i class="iconfont icon-shanchu ivu-col-del" style="cursor:pointer; color:#BC2020;padding-left:6px"  @click="removeAccliness(index)"></i>
              </Col>
            </Row>
            <Row v-if="formCustomAcc.accuracyArr && formCustomAcc.accuracyArr.length>1">
              <Col span="4">各条件间关系表达式</Col>
              <Col span="20" class="accuracy-last-relation">
               <FormItem prop="exprDesc" :rules="{required: clickdel ? true: false,message: '请输入各条件间关系表达式',trigger: 'blur'}">
                 <Input placeholder="条件1&&条件2" clearable v-model.trim="formCustomAcc.exprDesc" />
                </FormItem>    
             </Col>
            </Row>
            <!-- </template> -->
          </Form>     
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "RuleStepThree",
  components:{
  },
  props: {
    currentObj: {
      type: Object,
      default: () => {
        return {};
      },
    }
  },
  data() {
    return {
      ruleObj: {},
      formCustom: {
        timelinArry1: [
          {name: '数据采集',logical: '<=',dataValue:null},
        ],
        timelinArry2:[
          {name: '数据入库',logical: '<=',dataValue:null}
        ],
      },
      inText: '',
      dataTypeList: [{label:'任意',value:'all'},{label:'short',value:'short'},{label:'int',value:'int'},{label:'long',value:'long'},{label:'float',value:'float'},{label:'double',value:'double'},{label:'char',value:'char'},{label:'boolean',value:'boolean'},{label:'BigDecimal',value:'BigDecimal'},{label:'String',value:'String'}],
      // dataType: 'all',
      showIntegrity: false,
      showUniformity1: false,
      showUniformity2: false,
      showTimeliness1: false,
      showTimeliness2: false,
      showAccuracy: false,
      symbloList: [
        { value: '==', label: '==' },
        { value: '!=', label: '!=' },
        { value: '>', label: '>' },
        { value: '<', label: '<' },
        { value: '>=', label: '>=' },
        { value: '<=', label: '<=' } 
      ],
      formCustomAcc: {
        accuracyArr: [{
          logical: '',value:null
        }],
        exprDesc:''
      },
      clickbtn: 1, // 1新增 2删除 
      clickdel: false,
    };
  },
  watch: {
    currentObj: {
    　handler(newValue) {
       this.ruleObj = newValue
       this.showRule()
      },
      // deep: true
    }
   },
  mounted() {
    this.ruleObj = this.currentObj
    this.formCustom.timelinArry1 = [{name: '数据采集',logical: '<=',dataValue:this.ruleObj.dataValue}]
    this.formCustom.timelinArry2 = [{name: '数据入库',logical: '<=',dataValue:this.ruleObj.dataValue}]
    this.formCustomAcc.accuracyArr = this.ruleObj.logicalValueDTOList
    this.formCustomAcc.exprDesc = this.ruleObj.exprDesc
    this.showRule()
  },
  methods: {
    showRule () {
     if (this.ruleObj.targetName == '完整性') {
       this.inText = '不能是字符串null、NULL、无、空格，不能是空'
        this.showIntegrity = true
      } else if (this.ruleObj.targetName == '一致性') {
        this.showUniformity1 = true
        this.showUniformity2 = true
      } else if (this.ruleObj.targetName == '及时性（数据采集）') {
        this.showTimeliness1 = true
      } else if (this.ruleObj.targetName == '及时性（数据入库）') {
        this.showTimeliness2 = true
      } else if (this.ruleObj.targetName == '准确性') {
        this.showAccuracy = true
        if (this.formCustomAcc.accuracyArr && this.formCustomAcc.accuracyArr.length>1) {
          this.clickdel = true
        }
      }
    },
    handleAdd (targetName) {
      this.inText = ''
      this.showUniformity1 = false
      this.showUniformity2 = false
      this.showTimeliness1 = false
      this.showTimeliness2 = false
      if (targetName == '完整性') {
       this.inText = '不能是字符串null、NULL、无、空格，不能是空'
       this.showIntegrity = true
      } else if (targetName == '一致性') {
       this.showUniformity1 = true
       this.showUniformity2 = true
      } else if (targetName == '及时性（数据采集）') {
        this.showTimeliness1 = true
      } else if (targetName == '及时性（数据入库）') {
        this.showTimeliness2 = true
      } else if (targetName == '准确性') {
        if (this.showAccuracy) return;
        this.clickbtn = 1
        this.formCustomAcc.accuracyArr = [{
          logical: '',value:null
        }]
        this.showAccuracy = true
      }
    },
     // 删除完整性
  //   removeIntegrity () { 
  //     this.showIntegrity = false
  //   },
  //   //删除一致性
  //  removeUniformity (i) {
  //    if (i == 1) {
  //      this.showUniformity1 = false
  //    } else {
  //      this.showUniformity2 = false
  //      this.ruleObj.dataType = ''
  //    }
  //  },
  //  // 删除及时性
  //  removeTimeliness (i) {
  //   this.formCustom.timelinArry.splice(i,1)
  //   if (i == 0) {
  //    this.showTimeliness1 = false 
  //   } else if (i == 1) {
  //     this.showTimeliness2 = false
  //   }
  //  },
   handleAddAcc (name) {
     this.clickdel = false
     this.clickbtn = 1
     this.$nextTick(()=> {
       this.$refs[name].validate((valid) => {
        if(valid) {
          this.formCustomAcc.exprDesc = ''
          this.formCustomAcc.accuracyArr.push({
            logical: '',
            value: null,
          });
          if (this.formCustomAcc.accuracyArr.length>1) {
            this.clickdel = true
          }
        }
      })
     })
   },
   // 删除准确性
   removeAccliness (index) {
     this.clickbtn = 2
     this.formCustomAcc.accuracyArr.splice(index,1)
     if (this.formCustomAcc.accuracyArr.length ==0) {
       this.showAccuracy = false
     }
   },
   // 当前步骤校验方法
    saveValid () {
        // 前两行是为了检验准确性
      if (this.ruleObj.targetName == '完整性') {
        if (!this.showIntegrity) {
          this.$Message.info('请配置完整性规则')
          return false
        } else {
         return true
       }
      } else if (this.ruleObj.targetName == '一致性') {
        if (!this.showUniformity1 && !this.showUniformity2) {
          this.$Message.info('请配置一致性规则')
          return false
        } else {
          return true
        }
      } else if (this.ruleObj.targetName == '及时性（数据采集）') {
        if (!this.showTimeliness1) {
          this.$Message.info('请配置及时性（数据采集）规则')
          return false
          } else {
            let validType = false
            this.$refs.formDynamicTime1.validate((valid) => {
              validType = valid
            })
            return validType
        }
      } else if (this.ruleObj.targetName == '及时性（数据入库）') {
        if (!this.showTimeliness2) {
          this.$Message.info('请配置及时性（数据入库）规则')
          return false
          } else {
            let validType = false
            this.$refs.formDynamicTime2.validate((valid) => {
              validType = valid
            })
            return validType
        }
      } else if (this.ruleObj.targetName == '准确性') {
        this.clickbtn = 1
        this.clickdel = true
        if (!this.showAccuracy) {
          this.$Message.info('请配置准确性规则')
          return false
          } else {
            let validType = false
            this.$refs.formDynamicAcc.validate((valid) => {
              validType = valid
            })
            return validType
        }
      }
    },
  }
};
</script>
<style scoped lang="stylus">
.modal-step3-title {
  height: 120px;
  background: #112950;
  border: 1px solid #204A8F;
  border-radius: 6px;
  font-size: 12px;
  color: #FFFFFF;
  padding: 20px;
  line-height: 20px;
}
.modal-step3-body {
  margin-top: 20px;
}
.modal-step3-body-title {
  height: 42px;
  background: #0B2959;
  border: 1px solid #0D2853;
  line-height: 42px;  
  color: #fff; 
  font-size: 16px;
  padding-left: 10px;
}
.modal-step3-body-rule {
  padding: 20px;
  border: 1px solid #204A8F;
  border-top: none;
}
.modal-rule-top {
  display: flex;
  align-items: center;
  font-size: 14PX;
  color: #fff;
}
.modal-rule-top-item {
  border: 1px solid #204A8F;
  padding: 4px;
  border-radius: 4px;
  color: #2b8ee2;
  margin-left: 10px;
  background: #113a7b;
}
.add-rule {
  font-size: 14PX;
  color: #fff;
  margin-top: 10px;
}
.rule {
  font-size: 14PX;
  color: #fff;
  margin-top: 10px;
}
.uniformity-rule-mode {
 margin-top: 10px;
}
>>> .timeliness-form .ivu-row{
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  height: 100%;
}
>>> .timeliness-form .ivu-col{
  height: 100%;
}
>>> .timeliness-form-col .ivu-form-item{
  width: 100%;
  height: 100%;
  margin-bottom: 0;
  .ivu-form-item-content {
    width: 100%;
  }
}
.timeliness-form-col-select {
  padding-right: 10px;
}
.timeliness-rule-unit {
  padding-left: 10px;
}
>>> .accuracy-last-relation .ivu-form-item{
  margin-bottom: 0;
}
.common-scroll {
  max-height: 300px;
  overflow: hidden;
  overflow-y: auto;
}
</style>