<template>
  <div class="routerWapper">
		<div>
      <a-row>
        <a-col :span='1'>
          <a-button type='default'>删除</a-button>
        </a-col>
        <a-col :span='1' :offset='1'>
          <a-button type='default'>编辑</a-button>
        </a-col>
        <a-col :span='1' :offset='1'>
          <a-button type='primary' @click="save()">添加</a-button>
        </a-col>
        <a-col :span='19'></a-col>
      </a-row>
    </div>
    <a-divider type='horizontal' />
    <a-form :form='labelForm'>
      <a-form-item label='标签名' :label-col="{span:2}" :wrapper-col="{span:14}">
        <a-input v-decorator="['labelName',{validateTrigger:'blur',rules: []}]"></a-input>
      </a-form-item>
      <a-form-item label='标签分组' :label-col="{span:2}" :wrapper-col="{span:14}">
        <a-select v-decorator="['parentLabel',{validateTrigger:'blur',rules: []}]"></a-select>
      </a-form-item>
      <a-form-item label='业务对象' :label-col="{span:2}" :wrapper-col="{span:14}">
        <a-select v-decorator="['businessObj',{validateTrigger:'blur',rules: []}]">
          <a-select-option value='xq'>小区</a-select-option>
          <a-select-option value='mpz'>门牌幢</a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
    <a-row style="font-weight: bold">信息筛选配置</a-row>
    <a-form :form='infoSettingForm' layout='inline'>
      <div v-for="(item, index) in loopContent.data" :key='index'>
        <a-form-item v-if="!!item.relation">
          <a-select style="width: 160px" placeholder='请选择条件' v-decorator="['relation' + index,{initialValue: item.relation, validateTrigger:'blur',rules: []}]">
            <a-select-option value='and'>与</a-select-option>
            <a-select-option value='or'>或</a-select-option>
            <a-select-option value='ne'>非</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item v-else style="margin-left: 160px"></a-form-item>

        <a-form-item>
          <a-select style="width: 160px" placeholder='请选择业务属性' v-decorator="['businessProperty' + index,{initialValue: item.businessProperty, validateTrigger:'blur',rules: [{required: true, message: '请至少选择一项！'}]}]">
            <a-select-option value='sx1'>属性一</a-select-option>
            <a-select-option value='sx2'>属性二</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item>
          <a-select style="width: 160px" placeholder='区间' v-decorator="['range' + index,{validateTrigger:'blur',rules: [{required: true, message: '请至少选择一项！'}]}]">
            <a-select-option value='equals'>等于</a-select-option>
            <a-select-option value='gt'>大于</a-select-option>
            <a-select-option value='gte'>大于等于</a-select-option>
            <a-select-option value='lt'>小于</a-select-option>
            <a-select-option value='lte'>小于等于</a-select-option>
            <a-select-option value='btw'>区间</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item>
          <a-input placeholder='请输入' v-decorator="['inputOne' + index,{initialValue: item.inputOne, validateTrigger:'blur',rules: [],}]"></a-input>
        </a-form-item>
        <a-form-item v-if="infoSettingForm.getFieldValue('range'+index) == 'btw'">
          <a-input placeholder='请输入' v-decorator="['inputTwo' + index,{initialValue: item.inputTwo, validateTrigger:'blur',rules: []}]"></a-input>
        </a-form-item>

        <a-form-item>
          <a-icon v-if="index+1 == loopContent.data.length" theme='filled' style="color:lightgreen;" type="plus-circle" @click="addRow()" />
          <a-icon v-if="index+1 == loopContent.data.length" theme='filled' style="color:red; margin-left: 5px" type="minus-circle" @click="deleteRow(index)" />
        </a-form-item>
      </div>
    </a-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      labelForm: this.$form.createForm(this),
      infoSettingForm: this.$form.createForm(this),
      loopContent: {
        data: [{
          businessProperty: '',
          range: 'equals',
          inputOne: ''
        }]
      },
      jsonData: []
    }
  },
  mounted() {
  },
  methods: {
    addRow() {
      this.loopContent.data.push({
        businessProperty: '',
        range: 'equals',
        inputOne: '',
        relation: 'and'
      })
      console.log(this.loopContent)
    },
    deleteRow(index) {
      console.log(JSON.stringify(this.loopContent.data))
      console.log(index)
      this.loopContent.data.splice(index, 1)
      console.log(JSON.stringify(this.loopContent.data))
    },
    save() {
      this.jsonData = []
      this.infoSettingForm.validateFields((err, values) => {
        if(!err) {
          let loopCounts = this.loopContent.data.length
          let formData = this.infoSettingForm.getFieldsValue()
          // console.log(loopCounts)
          // console.log(formData)

          for(let i = 0; i < loopCounts; i++) {
            // for(let j = 0; j < Object.keys(formData).length; j++) {
            //   if(Object.keys(formData)[j].indexOf(i) > -1){
            //   }
            // }

            if(formData['inputTwo' + i] !== undefined) {
              this.jsonData.push({
                key: formData['businessProperty'+i],
                val: formData['inputOne' + i],
                condition: formData['range'+i],
                relation: formData['relation' + i],
              })
            } else { // 区间值
              this.jsonData.push({
                key: formData['businessProperty'+i],
                val1: formData['inputOne' + i],
                val2: formData['inputTwo' + i],
                condition: formData['range'+i],
                relation: formData['relation' + i],
              })
            }
          }

          console.log(JSON.stringify(this.jsonData))
        }
      })
    },
  },
}
</script>