<template>
  <div class="condition">
    <div class="node" :class="{ 'node-error-state': showError }">
        <div class="node-body" :class="{ error: showError }">
          <!-- 左移动按钮 -->
          <div
            v-if="config.priorityLevel > 1 && workflowStore.diagramMode !== 'viewer' && !isLast"
            class="node-body-left"
            @click.stop="leftMove"
          >
            <i class="x-icon-arrow-left x-iconfont"></i>
          </div>

          <!-- 节点主体 -->
          <div class="node-body-main" @click="selectNode">
            <div class="node-body-main-header">
              <i class="x-icon-branch_2 x-iconfont"></i>
              <a-tooltip :title="config.nodeName || '条件' + config.priorityLevel">
                <span class="title">
                  {{ config.nodeName || '条件' + config.priorityLevel }}
                </span>
              </a-tooltip>
              <span class="level">优先级{{ config.priorityLevel }}</span>

              <!-- 操作按钮 -->
              <span v-if="workflowStore.diagramMode !== 'viewer' && !isLast" class="option">
                <a-tooltip placement="top" title="复制条件">
                  <i class="x-icon-copy-document x-iconfont" @click.stop="copyNode"></i>
                </a-tooltip>
                <i class="x-icon-close x-iconfont" @click.stop="delNode"></i>
              </span>
            </div>

            <!-- 条件内容 -->
            <div class="node-body-main-content">
              <span v-if="!content || content.trim() === ''" class="placeholder">
                {{ isLast ? '其他条件进入此分支' : placeholder }}
              </span>
              <span v-else v-html="content"></span>
            </div>
          </div>

          <!-- 右移动按钮 -->
          <div
            v-if="config.priorityLevel < size && workflowStore.diagramMode !== 'viewer'"
            class="node-body-right"
            @click.stop="rightMove"
          >
            <i class="x-icon-arrow-right x-iconfont"></i>
          </div>

          <!-- 错误提示 -->
          <div v-if="showError" class="node-error">
            <a-tooltip :title="errorInfo" placement="top-start">
              <i class="x-icon-warning-outline x-iconfont"></i>
            </a-tooltip>
          </div>
        </div>

        <!-- 节点底部插入按钮 -->
        <div class="node-footer">
          <div v-if="workflowStore.diagramMode !== 'viewer'" class="btn">
            <InsertButton @insertNode="type => insertNode(type)" />
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import InsertButton from '@views/workFlow/designer/common/InsertButton.vue'

export default {
  name: 'Condition',
  components: { InsertButton },
  props: {
    config: {
      type: Object,
      default: ()=>({})
    },
    size: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      placeholder: '请设置条件',
      showError: false,
      errorInfo: '',
    }
  },
  computed: {
    ...mapState({
      workflowStore: state => state.workflow
    }),
    isLast() {
      return this.config.priorityLevel === this.size && this.size!==0;
    },
    content() {
      if (!this.config.conditionList) return ''
      let contentStr = ''
      const operatorMap = {
        '==': '等于',
        '!=': '不等于',
        '>': '大于',
        '>=': '大于等于',
        '<': '小于',
        '<=': '小于等于'
      }

      this.config.conditionList.forEach((group, idx) => {
        let groupStr = idx === 0 ? '当 ' : '或 '
        group.forEach((condition, i) => {
          if (i > 0) groupStr += '且 '
          groupStr += `${condition.label} ${operatorMap[condition.operator]} ${condition.value}`
          if (i !== group.length - 1) groupStr += ','
        })
        contentStr += `${groupStr}<br/>`
      })
      return contentStr
    }
  },
  methods: {
    leftMove() {
      this.$emit('leftMove')
    },
    rightMove() {
      this.$emit('rightMove')
    },
    copyNode() {
      this.$emit('copy')
    },
    selectNode() {
      if(!this.isLast) {
        this.$emit('selected')
      }
    },
    delNode() {
      this.$emit('delNode')
    },
    insertNode(type) {
      this.$emit('insertNode', type)
    },
    validate(err = []) {
      this.showError = false
      this.errorInfo = ''

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

      if (this.config.priorityLevel !== this.size) {
        if (!this.config.conditionList || this.config.conditionList.length === 0) {
          this.showError = true
          this.errorInfo = '请设置分支条件'
          err.push(`${this.config.nodeName || '条件'}未设置条件`)
          return false
        }

        for (let i = 0; i < this.config.conditionList.length; i++) {
          const group = this.config.conditionList[i]
          if (!group || group.length === 0) {
            this.showError = true
            this.errorInfo = `请设置条件组${i + 1}内的条件`
            err.push(`${this.config.nodeName || '条件'}中条件组${i + 1}未设置条件`)
            return false
          }
          for (let ci = 0; ci < group.length; ci++) {
            const condition = group[ci]
            if (!condition.value || condition.value.toString().trim() === '') {
              this.showError = true
              this.errorInfo = `请完善条件组${i + 1}内的${condition.label}条件`
              err.push(`${this.config.nodeName || '条件'}中条件组${i + 1}内${condition.label}条件未完善`)
              return false
            }
          }
        }
      }

      return !this.showError
    }
  }
}
</script>

<style scoped>
.condition {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin: 40px 55px 0;
}

/*.connector {
  position: absolute;
  display: flex;
  justify-content: center;
  top: -40px;
  left: 0;
  right: 0;
  height: 40px;
  z-index: 0;
}

.vertical-line {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 20px;
  background-color: #ccc;
  transform: translateX(-50%);
}

.horizontal-line {
  position: absolute;
  top: 20px;
  left: 160px;
  right: 160px;
  height: 2px;
  background-color: #ccc;
  z-index: -1;
}

.child-line-style {
  position: absolute;
  top: 20px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
}

.child-line {
  top: 20px;
  width: 2px;
  height: 40px;
  background-color: #ccc;
}

.parallel-node {
  margin: 20px 50px;
  min-width: 220px;
  z-index: 1;
}

!* ConditionNode 样式 *!
.node-error-state .node-body {
  box-shadow: 0 0 5px 0 #f56c6c !important;
}*/

.node {
  padding: 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;
  transition: box-shadow 0.2s;
}
.node-body:before {
  content: '';
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  border-style: solid;
  border-width: 8px 6px 4px;
  border-color: #cacaca transparent transparent;
  background: #f5f5f7;
}

.node-body:hover {
  box-shadow: 0px 0px 3px 0px #15bca3;
}

/* 左右移动按钮 */
.node-body-left,
.node-body-right {
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  z-index: 2;
}

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

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

.node-body-left i,
.node-body-right i {
  display: none;
  font-size: 18px;
  color: #888;
}

/* 悬停显示左右按钮 */
.node-body:hover .node-body-left i,
.node-body:hover .node-body-right i {
  display: block;
}

/* 节点主体 */
.node-body-main {
  width: 188px;
  margin-left: 17px;
  display: inline-block;
}

/* 节点头部：标题、优先级、操作按钮 */
.node-body-main-header {
  padding: 10px 0 5px;
  position: relative;
}

.node-body-main-header .title {
  color: #15bca3;
  display: inline-block;
  height: 14px;
  width: 125px;
}

.node-body-main-header .level {
  position: absolute;
  right: 15px;
  color: #888;
  transition: opacity 0.2s;
}

/* 悬停隐藏优先级 */
.node-body:hover .node-body-main-header .level {
  opacity: 0;
}

/* 操作按钮（复制/关闭） */
.node-body-main-header .option {
  position: absolute;
  right: 0;
  display: none;
  font-size: medium;
}

.node-body-main-header .option i {
  color: #888;
  padding: 0 3px;
}

/* 悬停显示操作按钮 */
.node-body:hover .node-body-main-header .option {
  display: inline-block;
}

/* 节点内容 */
.node-body-main-content {
  padding: 6px;
  color: #656363;
  font-size: 14px;
}

.node-body-main-content .placeholder {
  color: #8c8c8c;
}

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

.node-footer {
  position: relative;
}

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

.node-footer::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>
