<template>
  <div class="clear-fix">
    <div
      v-for="(sItem, sIndex) in form.sqlBuilderConditionList"
      :key="sIndex"
      class="clear-fix conditionGroup"
      :class="{mt20:sIndex!=0}"
    >

      <el-select
            v-if="sIndex != 0 "
            v-model="sItem.logic"
            filterable
            placeholder="请选择逻辑符"
            class="w200 margin-r10 margin-t20"
            :class="{positiontop:sIndex!=0}"
          >
            <el-option
              v-for="(item,mIndex) in mergeList"
              :key="mIndex"
              :label="item.name"
              :value="item.key"
            >
            </el-option>
          </el-select>

      <div v-for="(item, index) in sItem.children" :key="index">
        <div style="width: 86%; float: left;position: relative;">
          <el-select
            v-if="index !=0"
            v-model="item.logic"
            filterable
            placeholder="请选择逻辑符"
            class="w200 margin-r10 margin-t20"

          >
          <!-- :class="{positiontop:sIndex!=0}" -->
            <el-option
              v-for="(item,mIndex) in mergeList"
              :key="mIndex"
              :label="item.name"
              :value="item.key"
            >
            </el-option>
          </el-select>
          <p style="height:1px;width:100%"></p>
          <el-select
            v-model="item.columnName"
            filterable
            placeholder="请选择字段"
            class="w200 margin-r10 margin-t20"
          >
            <el-option
              v-for="(item,sIndex) in form.sqlBuilderColumnList"
              :key="sIndex"
              :label="item.columnName"
              :value="item.columnName"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="item.opt"
            filterable
            placeholder="请选择操作符"
            class="w200 margin-r10 margin-t20"
          >
            <el-option
              v-for="(item,oIndex) in operatorList"
              :key="oIndex"
              :label="item.name"
              :value="item.key"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="item.parameterTyep"
            filterable
            placeholder="请选择值类型"
            class="w200 margin-r10 margin-t20"
            @change='isParameter(item,true,sIndex,index)'
          >
            <el-option
              v-for="(item,pIndex) in paraTypeList"
              :key="pIndex"
              :label="item.name"
              :value="item.key"
            >
            </el-option>
          </el-select>
          <el-input v-model="item.parameterName" placeholder="输入别名" class="w200 margin-r10 margin-t20" v-if='item.parameterTyep == "parameter"' ></el-input>
          <el-input v-model="item.customValue" placeholder="输入值" class="w200 margin-t20" v-if="item.parameterTyep == 'static'"></el-input>
          <el-select v-if="item.parameterTyep == 'otherColumn'" v-model="item.customValue" filterable placeholder="请选择字段" class="w200 margin-r10 margin-t20" >
              <el-option v-for="(item,sIndex) in form.sqlBuilderColumnList" :key="sIndex" :label="item.columnName" :value="item.columnName" > </el-option>
          </el-select>
        </div>
        <div class="margin-t20" style="width: 14%; float: left">
          <el-button
            type="primary"
            icon="el-icon-plus"
            @click="addChildren(sIndex)"
            v-if="index == 0"
          ></el-button>

           <el-button
              v-else
              type="primary"
              icon="el-icon-minus"
              @click="reduceChildren(sIndex, index)"
            ></el-button>
          <!-- <el-button type="primary" icon="el-icon-minus"></el-button> -->
        </div>
      </div>
      <div style="position:absolute;top:50%;right:10px;margin-top: -14px;"><el-button type="warning " icon="el-icon-delete" @click="deleteLine(sIndex)"></el-button></div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'SqlBuilderList',
  props: ['form'],
  data() {
    return {
      operatorList: [
        { name: '等于', key: 'EQ' },
        { name: '小于', key: 'LT' },
        { name: '大于', key: 'GT' },
        { name: '大于等于', key: 'GE' },
        { name: '小于等于', key: 'LE' },
        { name: '不等于', key: 'NE' },
        { name: '包含', key: 'LIKE' },
        { name: '不包含', key: 'NLIKE' },
        { name: '为空', key: 'NULL' },
        { name: '不为空', key: 'NN' },
        { name: '在...中', key: 'IN' },
        { name: '不在什么中', key: 'NIN' },
        { name: '右LIKE', key: 'LLIKE' },
        { name: '左LIKE', key: 'PLIKE' },
        { name: '在什么之间', key: 'BETWEEN' }
      ],
      paraTypeList: [
        { name: '静态值', key: 'static' },
        { name: '参数', key: 'parameter' },
        { name: '其他字段', key: 'otherColumn' }
      ],
      // 条件合并方式
      mergeList: [
        { name: 'AND', key: 'and' },
        { name: 'OR', key: 'or' }
      ],
      // 表达式对象
      sqlBuilderConditionItem: {
        columnName: '',
        parameterName: '',
        id: '',
        logic: '',
        opt: '', // 匹配规则
        pid: '',
        sqlBuilderId: '', // sqlID
        tableName: '', // 表名
        parameterTyep: '', // 参数类型
        customValue: '', // 自定义值
        columnType: '' // TYPE_NAME 字段类型
      }
    }
  },
  methods: {
    // 表达式相关
    addChildren(index) {
      const newItem = JSON.parse(JSON.stringify(this.sqlBuilderConditionItem))
      this.form.sqlBuilderConditionList[index].children.push(newItem)
    },
    reduceChildren(index, cIndex) {
      this.form.sqlBuilderConditionList[index].children.splice(cIndex, 1)
    },
    deleteLine(index) {
      this.form.sqlBuilderConditionList.splice(index, 1)
      // 如果全部删除，添加一个空的数组
      if (this.form.sqlBuilderConditionList.length == 0) {
        const newItem = JSON.parse(JSON.stringify(this.sqlBuilderConditionItem))
        this.form.sqlBuilderConditionList.push(newItem)
      }
    },
    isParameter(item, isChildren, index, cIndex) {
      const o = JSON.parse(JSON.stringify(item))// 解除双向绑定
      if (isChildren) { // 是子节点
        if (item.parameterTyep == 'parameter') {
          this.form.sqlBuilderConditionList[index].children[cIndex].parameterName = o.columnName
        } else {
          this.form.sqlBuilderConditionList[index].children[cIndex].parameterName = ''
        }
      } else { // 是根节点
        if (item.parameterTyep == 'parameter') {
          this.form.sqlBuilderConditionList[index].parameterName = o.columnName
        } else {
          this.form.sqlBuilderConditionList[index].parameterName = ''
        }
      }
    }

  }
}
</script>
<style type="text/scss" lang="scss" scoped>
.conditionGroup{
    border: 1px solid #dcdfe6;
    padding: 0 10px;
    padding-bottom: 20px;
    margin-bottom: 10px;
    position: relative;
}
.mt20{
    margin-top: 50px;
}
.positiontop{
    position: absolute;
    top: -58px;
}
.el-select {
  width: 50%;
}
.w200 {
  width: 18%;
  min-width: 120px;
}

</style>
<style type="text/scss">
/* 修改label样式，需要删除 scoped */
.label_t10 .el-form-item__label {
  margin-top: 10px;
}
</style>
