<template>
  <div class="cube-filter-node">
    <div class="left-panel">
      <div class="relation-line"></div>
      <div class="relation-btn" @click="onToggleRelation">{{ node.relation == 'AND' ? '且' : '或' }}</div>
    </div>
    <div class="right-panel">
      <div class="relation" v-for="(item, i) of node.conditions" :key="i" draggable @dragstart="onNodeDrag(node, i)">
        <div class="name">{{ item.columnTitle }}</div>
        <i v-show="level < 2" class="el-icon-bottom-right icon" title="添加组合" @click="onAddGroup(item, i)"></i>
        <i class="el-icon-delete icon" style="color: #f56c6c" @click="onDelFilter(item, node, i)"></i>
        <i class="el-icon-setting icon" style="color: #409eff" @click="editFilterByUniqId(item)"></i>
      </div>
      <div class="virtual" @dragover="onDragOver" @drop="onNodeDrop(node)"></div>
      <dataset-filter-node v-for="(filter, i) of node.filters" :key="i" :node="filter" :level="level + 1"></dataset-filter-node>
    </div>
  </div>
</template>
<script>
export default {
  name: 'dataset-filter-node',
  props: ['node', 'level'],
  inject: ['editFilterByUniqId', 'onNodeDrag', 'onNodeDrop', 'onDelFilter'],
  data() {
    return {}
  },
  methods: {
    onToggleRelation() {
      this.node.relation = this.node.relation == 'AND' ? 'OR' : 'AND'
    },
    onAddGroup(item, index) {
      this.node.conditions.splice(index, 1)
      this.node.filters.push({
        conditions: [item],
        filters: [],
        relation: 'AND'
      })
    },
    onDragOver(e) {
      e.preventDefault()
    }
  }
}
</script>
<style lang="scss">
.cube-filter-node {
  display: flex;
  .left-panel {
    width: 30px;
    position: relative;
    .relation-line {
      position: absolute;
      top: 10px;
      bottom: 10px;
      width: 2px;
      background-color: #409eff;
      left: 14px;
      &::before {
        content: '';
        position: absolute;
        background-color: #409eff;
        height: 2px;
        width: 13px;
        left: 0;
        top: 0;
      }
      &::after {
        content: '';
        position: absolute;
        background-color: #409eff;
        height: 2px;
        width: 13px;
        left: 0;
        bottom: 0;
      }
    }
    .relation-btn {
      position: absolute;
      left: 3px;
      top: 50%;
      transform: translateY(-12px);
      z-index: 1;
      background-color: white;
      border: 1px solid #409eff;
      color: #409eff;
      box-sizing: border-box;
      width: 24px;
      height: 24px;
      line-height: 24px;
      font-size: 14px;
      cursor: pointer;
      border-radius: 2px;
      text-align: center;
    }
  }
  .right-panel {
    flex: 1;
    .relation {
      padding: 0 8px;
      margin: 8px 4px;
      width: 200px;
      height: 26px;
      line-height: 26px;
      font-size: 14px;
      box-sizing: border-box;
      border: 1px solid #666;
      color: #666;
      display: flex;
      align-items: center;
      .name {
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .icon {
        margin-left: 8px;
        cursor: pointer;
      }
    }
    .virtual {
      margin: 8px 4px;
      box-sizing: border-box;
      border: 1px dashed #666;
      width: 200px;
      height: 26px;
    }
  }
}
</style>
