<template>
  <div class="node" :class="{ 'node-error-state': showError }">
    <div class="node-body" :class="{ error: showError }">
      <div
        v-if="level > 1 && diagramMode !== 'viewer'"
        class="node-body-left"
        @click="$emit('leftMove')"
      >
        <i class="x-icon-arrow-left x-iconfont"></i>
      </div>
      <div class="node-body-main" @click="$emit('selected')">
        <div class="node-body-main-header">
          <i class="x-icon-inclusive x-iconfont"></i>
          <a-tooltip>
            <template slot="title">{{ config.nodeName || '条件' + level }}</template>
            <span class="title">{{ config.nodeName || '条件' + level }}</span>
          </a-tooltip>
          <span class="level">优先级{{ level }}</span>
          <span v-if="diagramMode !== 'viewer'" class="option">
            <a-tooltip title="复制条件">
              <i class="x-icon-copy-document x-iconfont" @click.stop="$emit('copy')"></i>
            </a-tooltip>
            <i class="x-icon-close x-iconfont" @click.stop="$emit('delNode')"></i>
          </span>
        </div>
        <div class="node-body-main-content">
          <span v-if="content === ''" class="placeholder">
            {{ level === size && size !== 0 ? '其他条件进入此流程' : placeholder }}
          </span>
          <span v-else class="text-overflow">{{ content }}</span>
        </div>
      </div>
      <div
        v-if="level < size && diagramMode !== 'viewer'"
        class="node-body-right"
        @click="$emit('rightMove')"
      >
        <i class="x-icon-arrow-right x-iconfont"></i>
      </div>
      <div v-if="showError" class="node-error">
        <a-tooltip :title="errorInfo">
          <i class="x-icon-warning-outline x-iconfont"></i>
        </a-tooltip>
      </div>
    </div>
    <div class="node-footer">
      <div v-if="diagramMode !== 'viewer'" class="btn">
        <insert-button @insertNode="handleInserNode($event)" />
      </div>
    </div>
  </div>
</template>

<script>
import InsertButton from '@views/workFlow/designer/common/InsertButton.vue' // 自行调整路径

const ValueType = {
  user: 'user',
  dept: 'dept',
  string: 'string',
  number: 'number',
};

const groupNames = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];
//包容节点
export default {
  name: 'InclusiveNode',
  components: { InsertButton },
  props: {
    config: Object,
    level: Number,
    size: Number,
    diagramMode: {
      type: String,
      default: 'editor'
    }
  },
  data() {
    return {
      placeholder: '请设置条件',
      errorInfo: '',
      showError: false
    };
  },
  computed: {
    content() {
      const groups = this.config.props.groups || [];
      const conditions = groups.map((group) => {
        const subConditions = group.conditions.map((subCondition) => {
          return this.getConditionText(subCondition);
        });
        const logic = group.groupType === 'AND' ? '且' : '或';
        const subText = subConditions.length > 1
          ? `(${subConditions.join(`) ${logic} (`)})`
          : subConditions.join(` ${logic} `);
        return subText;
      });
      return conditions.join(this.config.props.groupsType === 'AND' ? ' 且 ' : ' 或 ');
    }
  },
  methods: {
    getConditionText(subCondition) {
      if ([ValueType.user, ValueType.dept].includes(subCondition.valueType)) {
        const names = (subCondition.value || []).map(u => u.name).join('、');
        return `${subCondition.title}属于[${names}]之一`;
      }

      switch (subCondition.compare) {
        case 'IN':
          return `${subCondition.title}为[${(subCondition.value || []).join('、')}]中之一`;
        case 'B':
          return `${subCondition.value[0]} < ${subCondition.title} < ${subCondition.value[1]}`;
        case 'AB':
          return `${subCondition.value[0]} ≤ ${subCondition.title} < ${subCondition.value[1]}`;
        case 'BA':
          return `${subCondition.value[0]} < ${subCondition.title} ≤ ${subCondition.value[1]}`;
        case 'ABA':
          return `${subCondition.value[0]} ≤ ${subCondition.title} ≤ ${subCondition.value[1]}`;
        case '<=':
          return `${subCondition.title} ≤ ${this.getDefault(subCondition.value[0], '?')}`;
        case '>=':
          return `${subCondition.title} ≥ ${this.getDefault(subCondition.value[0], '?')}`;
        default:
          return `${subCondition.title}${subCondition.compare}${this.getDefault(subCondition.value[0], '?')}`;
      }
    },
    getDefault(val, defVal) {
      return val && val !== '' ? val : defVal;
    },
    validate(err) {
      this.showError = false;

      if (!(this.level === this.size && this.size !== 0) && !this.config.childNode.id) {
        this.showError = true;
        this.errorInfo = '条件分支后不能为空';
        err.push('条件分支后不能为空');
        return false;
      }

      const p = this.config.props;
      if (p.groups.length <= 0) {
        this.showError = true;
        this.errorInfo = '请设置分支条件';
        err.push(`${p.config.name} 未设置条件`);
      } else if (!(p.level === p.size && p.size !== 0)) {
        for (let i = 0; i < p.groups.length; i++) {
          if ((p.groups[i].cids || []).length === 0) {
            this.showError = true;
            this.errorInfo = `请设置条件组${groupNames[i]}内的条件`;
            err.push(`条件 ${p.config.name} 条件组${groupNames[i]}内未设置条件`);
            break;
          } else {
            for (const subc of p.groups[i].conditions) {
              if ((subc.value || []).length === 0) {
                this.showError = true;
                this.errorInfo = `请完善条件组${groupNames[i]}内的${subc.title}条件`;
                err.push(`条件 ${p.config.name} 条件组${groupNames[i]}内${subc.title}条件未完善`);
                return false;
              }
            }
          }
        }
      }

      return !this.showError;
    },
    handleInserNode(e) {
      this.$emit('insertNode', e)
    }
  }
};
</script>

<style lang="less" scoped>
.node-error-state {
  .node-body {
    box-shadow: 0 0 5px 0 #f56c6c !important;
  }
}

.node {
  padding: 30px 55px 0;
  width: 220px;

  .node-body {
    cursor: pointer;
    min-height: 80px;
    max-height: 120px;
    position: relative;
    border-radius: 5px;
    background-color: white;
    box-shadow: 0 0 5px 0 #d8d8d8;

    &:hover {
      .node-body-left,
      .node-body-right {
        i {
          display: block !important;
        }
      }

      .node-body-main {
        .level {
          display: none !important;
        }

        .option {
          display: inline-block !important;
        }
      }

      box-shadow: 0 0 3px 0 @primaryColor;
    }

    .node-body-left,
    .node-body-right {
      display: flex;
      align-items: center;
      position: absolute;
      height: 100%;

      i {
        display: none;
      }

      &:hover {
        background-color: #ececec;
      }
    }

    .node-body-left {
      left: 0;
    }

    .node-body-right {
      right: 0;
      top: 0;
    }

    .node-body-main {
      //position: absolute;
      width: 188px;
      margin-left: 17px;
      display: inline-block;

      .node-body-main-header {
        padding: 10px 0 5px;
        font-size: xx-small;
        position: relative;

        .title {
          color: #425c9d;
          display: inline-block;
          height: 14px;
          width: 125px;
        }

        .level {
          position: absolute;
          right: 15px;
          color: #888888;
        }

        .option {
          position: absolute;
          right: 0;
          display: none;
          font-size: medium;

          i {
            color: #888888;
            padding: 0 3px;
          }
        }
      }

      .node-body-main-content {
        padding: 6px;
        color: #656363;
        font-size: 14px;

        i {
          position: absolute;
          top: 55%;
          right: 10px;
          font-size: medium;
        }

        .placeholder {
          color: #8c8c8c;
        }
      }
    }

    .node-error {
      position: absolute;
      right: -40px;
      top: 20px;
      font-size: 25px;
      color: #f56c6c;
    }
  }

  .node-footer {
    position: relative;

    .btn {
      width: 100%;
      display: flex;
      height: 70px;
      padding: 20px 0 32px;
      justify-content: center;
    }

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: -1;
      margin: auto;
      width: 2px;
      height: 100%;
      background-color: #cacaca;
    }
  }
}
</style>
