<template>
  <div :key="menuKey">
    <div class="filter-adv">
      <!--分组线框-->
      <div v-if="filterData.groups.length > 1" class="filter-group-groupbox">
        <!--条件组合逻辑-->
        <el-switch
          v-model="filterData.logic"
          class="filter-sw"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-text="且"
          active-value="and"
          inactive-text="或"
          inactive-value="or"
        />
      </div>

      <!--占位块-->
      <div v-if="filterData.groups.length > 1" style="width: 120px" />

      <div class="filter-group-items">
        <div
          v-for="(group, groupIndex) in filterData.groups"
          :key="groupIndex"
          class="filter-group-wrap"
        >
          <div class="filter-group">
            <!--分组线框-->
            <div v-if="group.items.length > 1" class="filter-groupbox">
              <!--条件组合逻辑-->
              <el-switch
                v-model="group.logic"
                class="filter-sw"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="且"
                active-value="and"
                inactive-text="或"
                inactive-value="or"
              />
            </div>
            <!--占位块-->
            <div v-if="group.items.length > 1" style="width: 120px" />

            <!--条件组-->
            <div class="filter-items">
              <!--条件项-->
              <div
                v-for="(item, index) in group.items"
                :key="index"
                class="filter-item"
              >
                <!-------------条件项------------->
                <div class="filter-item-wrap">
                  <filterAdvItem
                    :ref="groupIndex.toString() + '_' + index.toString()"
                    :field.sync="item.field"
                    :exp.sync="item.exp"
                    :value.sync="item.value"
                    :filter-config="filterConfig"
                  />
                </div>
                <div class="filter-item-remove">
                  <el-link
                    icon="el-icon-error"
                    type="danger"
                    @click="filterItemRemove(groupIndex, index)"
                    >移除</el-link
                  >
                </div>
              </div>
            </div>
          </div>

          <!--组内按钮-->
          <div class="filter-buttons">
            <el-link
              icon="el-icon-circle-plus"
              @click="filterItemAppend(groupIndex)"
              >添加一个条件</el-link
            >
          </div>
        </div>
      </div>
    </div>
    <!--组外按钮-->
    <el-link icon="el-icon-circle-plus-outline" @click="filterGroupAppend"
      >添加一组条件</el-link
    >
  </div>
</template>

<script>
import filterAdvItem from './filterItem.vue'
export default {
  components: { filterAdvItem },
  props: {
    filterConfig: {
      type: Array,
      default: () => []
    },
    filterData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      isShow: true,
      menuKey: 0
    }
  },
  methods: {
    // 移除过滤项
    filterItemRemove(groupIndex, index) {
      // 当过滤项只剩余一项时，直接移除该组
      // let itemRefName = groupIndex.toString() + '_' + index.toString()
      // // let sss = Object.assign({},this.$refs[itemRefName])
      // // console.log(sss)
      // console.log(this.filterData.groups[groupIndex].items.length)
      // this.$refs[itemRefName][0].removeSelf()
      // console.log(this.filterData.groups[groupIndex].items)
      if (this.filterData.groups[groupIndex].items.length === 1) {
        this.filterData.groups.splice(groupIndex, 1)
      } else {
        this.filterData.groups[groupIndex].items.splice(index, 1)
        // this.isShow = false
        // let thisCom = this
        // window.setTimeout(function(){thisCom.isShow = true},1)
      }
      this.menuKey++ // 用于重新渲染组件
    },
    // 添加过滤项
    filterItemAppend(groupIndex) {
      this.filterData.groups[groupIndex].items.push({
        field: '',
        expression: '',
        value: ''
      })
    },

    // 添加一组条件
    filterGroupAppend() {
      this.filterData.groups.push({
        logic: 'and',
        items: [
          {
            field: '',
            exp: '',
            value: ''
          }
        ]
      })
    }
  }
}
</script>
<style lang="less" scoped>
.filter-group-wrap {
  position: relative;
  background-color: #f8f8f8;
  border: 1px solid #ebeef5;
  z-index: 0;
  padding: 5px;
  margin: 6px;
  border-radius: 4px;
  transition: 0.3s;
}

/* .filter-group-wrap:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
} */

.filter-adv {
  position: relative;
  display: flex;
}

.filter-group-groupbox {
  position: absolute;
  border: 1px solid #b8b8b8;
  border-right: none;
  top: 30px;
  bottom: 30px;
  left: 60px;
  z-index: 0;
  border-radius: 6px;

  display: flex;
  align-items: center;
}

.filter-group-items {
  flex: 1;
}

.filter-group {
  position: relative;
  display: flex;
}

.filter-groupbox {
  position: absolute;
  border: 1px solid #b8b8b8;
  border-right: none;
  top: 15px;
  bottom: 15px;
  left: 60px;
  z-index: 1;
  border-radius: 6px;

  display: flex;
  align-items: center;
}

.filter-sw {
  transform: translateX(-50%);
}

.filter-items {
  z-index: 99;
  position: relative;
  flex: 1;
}

.filter-item {
  margin: 4px 0;
  display: flex;
  align-items: center;
  transition: 0.3s;

  &:hover {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
}

.filter-item-wrap {
  flex: 1;
}

.filter-item-remove {
  width: 60px;
  text-align: center;
}

.filter-buttons {
  margin-left: 120px;
}
</style>
