<template>
  <div>
    <div v-for="(conditionGroup, index) in selectedNode.conditionList" :key="index + '_g'">
      <div v-if="index !== 0" class="text-gray-700 mb-3">或满足</div>
      <div class="group mb-3">
        <div class="group-header">
          <span class="group-name">条件组 {{ index + 1 }}</span>
          <div class="group-cp">
            <span>组内条件关系：且</span>
          </div>
          <div class="group-operation">
            <a-icon type="delete" @click="delGroup(index)" />
          </div>
        </div>
        <div class="group-content">
          <div v-for="(condition, idx) in conditionGroup" :key="idx">
            <div class="condition-relation">
              <span>{{ idx === 0 ? '当' : '且' }}</span>
              <a-icon type="delete" class="cursor-pointer" @click="rmCondition(conditionGroup, idx)" />
            </div>
            <div class="condition-key">
              <a-select
                v-model="condition.field"
                :options="conditionOptions"
                size="small"
                @change="value => conditionKeyUpdateHandle(value, condition)"
              />
            </div>
            <div class="condition-content">
              <div class="compare-select mb-2">
                <a-select v-model="condition.operator" :options="operatorOptions" size="small" />
              </div>
              <div class="content-value">
                <a-input v-model="condition.value" size="small" />
              </div>
            </div>
          </div>
          <a-button class="mt-3" type="dashed" size="small" @click="addCondition(conditionGroup)">
            <a-icon type="plus" />
            添加条件
          </a-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { ValueType } from '../../form/ComponentsConfigExport';

export default {
  name: 'ConditionGroupItemConfig',
  computed: {
    ...mapState({
      selectedNode: state => state.workflow.selectedNode,
      formItems: state => state.workflow.design.formItems
    }),
    operatorOptions() {
      return Object.entries(this.operatorMap).map(([key, label]) => ({
        label,
        value: key
      }));
    },
    conditionOptions() {
      this.conditionItems = [];
      this.conditionItemMap = new Map();
      this.formItems.forEach(item => this.filterCondition(item, this.conditionItems));
      return this.conditionItems.map(item => ({
        label: item.title,
        value: item.id
      }));
    }
  },
  data() {
    return {
      conditionItems: [],
      conditionItemMap: new Map(),
      supportTypes: [ValueType.number, ValueType.string],
      operatorMap: {
        '==': '等于',
        '!=': '不等于',
        '>': '大于',
        '>=': '大于等于',
        '<': '小于',
        '<=': '小于等于'
      }
    };
  },
  methods: {
    delGroup(index) {
      this.selectedNode.conditionList.splice(index, 1);
    },
    addCondition(group) {
      group.push({
        label: '',
        field: '',
        operator: '==',
        value: ''
      });
    },
    rmCondition(conditionGroup, index) {
      conditionGroup.splice(index, 1);
    },
    filterCondition(item, list) {
      this.conditionItemMap.set(item.id, item);
      if (item.name === 'SpanLayout') {
        (item.props.items || []).forEach(sub => this.filterCondition(sub, list));
      } else if (this.supportTypes.includes(item.type) && item.props.required) {
        list.push(item);
      }
    },
    conditionKeyUpdateHandle(value, condition) {
      const formItem = this.conditionItemMap.get(value);
      if (formItem) {
        condition.label = formItem.title;
        condition.field = formItem.id;
        condition.operator = '==';
        condition.value = '';
      }
    }
  }
};
</script>

<style scoped lang="less">
.group {
  color: #5e5e5e;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid #e3e3e3;

  .group-header {
    padding: 8px 12px;
    background: #f4f6f8;
    position: relative;

    div {
      display: inline-block;
    }

    .group-name {
      font-size: small;
    }

    .group-cp {
      font-size: small;
      position: absolute;
      left: 100px;
      top: 8px;
      display: flex;
      align-items: center;
    }

    .group-operation {
      position: absolute;
      right: 10px;

      i,
      .anticon {
        padding: 0 10px;
        cursor: pointer;
      }
    }
  }

  .group-content {
    padding: 10px 5px;

    .condition-relation {
      color: #aaa;
      display: flex;
      align-items: center;
      height: 36px;
      justify-content: space-between;
      padding: 0 2px;
    }

    .condition-content {
      margin-top: 8px;
    }
  }

  .condition-title {
    display: block;
    width: 100px;
  }
}
.ant-select {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5;
  list-style: none;
  font-feature-settings: 'tnum';
  position: relative;
  display: inline-block;
  outline: 0;
  width: 150px;
}
</style>
