<template>
  <div>
    <!--    {{nodeConfig}}-->
    <div class="node-wrap" v-if="nodeConfig.type!=4">
      <div class="node-wrap-box"
           :class="(nodeConfig.type==0?'start-node ':'')+(isTried&&nodeConfig.error?'active error':'')">
        <div>
          <div class="title"
               :style="'background: rgb('+ ['87, 106, 149','255, 148, 62','50, 150, 250'][nodeConfig.type] +');'">
            <span class="iconfont" v-show="nodeConfig.type==1"></span>
            <span class="iconfont" v-show="nodeConfig.type==2"></span>
            <!--            <span v-if="nodeConfig.type==0">{{ nodeConfig.nodeName }}</span>-->
            <input type="text" class="ant-input editable-title-input" v-if="nodeConfig.type!=0&&isInput"
                   @blur="blurEvent()" @focus="$event.currentTarget.select()" v-focus
                   v-model="nodeConfig.nodeName" :placeholder="placeholderList[nodeConfig.type]">
            <span class="editable-title" v-if="nodeConfig.type!=0&&!isInput">{{ nodeConfig.nodeName }}</span>
            <span class="anticon anticon-close close" v-if="nodeConfig.type!=0" @click="delNode()">
                          <Icon type="md-close"></Icon>
                        </span>
            <span class="anticon anticon-close close" v-if="nodeConfig.type!=0" @click="delNode()">
                          <Icon type="md-close"></Icon>
                        </span>
          </div>
          <div class="content" @click="setPerson">
            <div class="text" v-if="nodeConfig.type==0">
              {{ $appfunc.arrToStr(flowPermission) ? $appfunc.arrToStr(flowPermission) : '流程开始' }}
            </div>
            <div class="text" v-if="nodeConfig.type==1">
              <span class="placeholder"
                    v-if="!$appfunc.setApproverStr(nodeConfig)">请选择{{ placeholderList[nodeConfig.type] }}</span>
              {{ $appfunc.setApproverStr(nodeConfig) }}
            </div>
            <div class="text" v-if="nodeConfig.type==2">
              <span class="placeholder"
                    v-if="!$appfunc.copyerStr(nodeConfig)">请选择{{ placeholderList[nodeConfig.type] }}</span>
              {{ $appfunc.copyerStr(nodeConfig) }}
            </div>
            <span class="anticon anticon-right arrow">
                          <Icon type="ios-arrow-forward"/>
                        </span>
          </div>
          <div class="error_tip" v-if="isTried&&nodeConfig.error">
                      <span class="anticon anticon-exclamation-circle" style="color: rgb(242, 86, 67);">
                        <Icon type="ios-alert" size="34"/>
                      </span>
          </div>
        </div>
      </div>
      <addNode :childNodeP.sync="nodeConfig.childNode" :docCode="docCode"></addNode>
    </div>
    <div class="branch-wrap" v-if="nodeConfig.type==4">
      <div class="branch-box-wrap">
        <div class="branch-box">
          <Button class="add-branch" @click="addTerm">添加条件</Button>
          <div class="col-box" v-for="(item,index) in nodeConfig.conditionNodes" :key="index">
            <div class="condition-node">
              <div class="condition-node-box">
                <div class="auto-judge" @click="setPerson(item.priorityLevel)"
                     :class="isTried&&item.error?'error active':''">
                  <div class="sort-left" v-if="index!=0&&index!=nodeConfig.conditionNodes.length-1"
                       @click.stop="arrTransfer(index,-1)">
                    <Icon type="md-arrow-back"/>
                  </div>
                  <div class="title-wrapper">
                    <input type="text" class="ant-input editable-title-input" v-if="isInputList[index]"
                           @blur="blurEvent(index)" @focus="$event.currentTarget.select()" v-focus
                           v-model="item.nodeName">
                    <span class="editable-title" v-if="!isInputList[index]">{{ item.nodeName }}</span>
                    <span class="priority-title">优先级{{ item.priorityLevel }}</span>
                    <span class="anticon anticon-close close" @click.stop="delTerm(index)">
                                          <Icon type="md-close"></Icon>
                                        </span>
                  </div>
                  <div class="sort-right" v-if="index<nodeConfig.conditionNodes.length-2"
                       @click.stop="arrTransfer(index)">
                    <Icon type="md-arrow-forward"/>
                  </div>
                  <div class="content">
                    {{ $appfunc.conditionStr(nodeConfig, index) }}
                  </div>
                  <div class="error_tip" v-if="isTried&&item.error">
                                        <span class="anticon anticon-exclamation-circle"
                                              style="color: rgb(242, 86, 67);">
                                          <Icon type="ios-alert" size="34"/>
                                        </span>
                  </div>
                </div>
                <addNode :childNodeP.sync="item.childNode" :docCode="docCode"></addNode>
              </div>
            </div>
            <nodeWrap v-if="item.childNode" :nodeConfig.sync="item.childNode"></nodeWrap>
            <div class="top-left-cover-line" v-if="index==0"></div>
            <div class="bottom-left-cover-line" v-if="index==0"></div>
            <div class="top-right-cover-line" v-if="index==nodeConfig.conditionNodes.length-1"></div>
            <div class="bottom-right-cover-line" v-if="index==nodeConfig.conditionNodes.length-1"></div>
          </div>
        </div>
        <addNode :childNodeP.sync="nodeConfig.childNode" :docCode="docCode"></addNode>
      </div>
    </div>
    <nodeWrap v-if="nodeConfig.childNode" :nodeConfig.sync="nodeConfig.childNode" :docCode="docCode"></nodeWrap>
  </div>
</template>
<script>
import {mapState, mapMutations} from 'vuex'

export default {
  props: ["nodeConfig", "flowPermission", "docCode"],
  data() {
    return {
      placeholderList: ["开始", "审批人", "抄送人"],
      isInputList: [],
      isInput: false,
    }
  },
  mounted() {
    // console.log('this.nodeConfig.type', this.nodeConfig.type)
    if (this.nodeConfig.type == 1) {
      this.nodeConfig.error = !this.$appfunc.setApproverStr(this.nodeConfig)
    } else if (this.nodeConfig.type == 2) {
      this.nodeConfig.error = !this.$appfunc.copyerStr(this.nodeConfig)
    } else if (this.nodeConfig.type == 4) {
      for (var i = 0; i < this.nodeConfig.conditionNodes.length; i++) {
        this.nodeConfig.conditionNodes[i].error = this.$appfunc.conditionStr(this.nodeConfig, i) == "请设置条件" && i != this.nodeConfig.conditionNodes.length - 1
      }
    }
  },
  computed: {
    ...mapState(['isTried', 'flowPermission1', 'approverConfig1', 'copyerConfig1', 'conditionsConfig1']),
  },
  watch: {
    flowPermission1(data) {
      if (data.flag && data.id === this._uid) {
        this.$emit('update:flowPermission', data.value)
      }
    },
    approverConfig1(data) {
      if (data.flag && data.id === this._uid) {
        this.$emit('update:nodeConfig', data.value)
      }
    },
    copyerConfig1(data) {
      if (data.flag && data.id === this._uid) {
        this.$emit('update:nodeConfig', data.value)
      }
    },
    conditionsConfig1(data) {
      if (data.flag && data.id === this._uid) {
        this.$emit('update:nodeConfig', data.value)
      }
    },
  },
  methods: {
    ...mapMutations([
      'setPromoter',
      'setApprover',
      'setCopyer',
      'setCondition',
      'setFlowPermission',
      'setApproverConfig',
      'setCopyerConfig',
      'setConditionsConfig'
    ]),
    clickEvent(index) {
      if (index || index === 0) {
        this.$set(this.isInputList, index, true)
      } else {
        this.isInput = true;
      }
    },
    blurEvent(index) {
      if (index || index === 0) {
        this.$set(this.isInputList, index, false)
        this.nodeConfig.conditionNodes[index].nodeName = this.nodeConfig.conditionNodes[index].nodeName ? this.nodeConfig.conditionNodes[index].nodeName : "条件"
      } else {
        this.isInput = false;
        this.nodeConfig.nodeName = this.nodeConfig.nodeName ? this.nodeConfig.nodeName : this.placeholderList[this.nodeConfig.type]
      }
    },
    delNode() {
      this.$emit("update:nodeConfig", this.nodeConfig.childNode);
    },
    addTerm() {
      // debugger
      let len = this.nodeConfig.conditionNodes.length + 1
      this.nodeConfig.conditionNodes.splice(this.nodeConfig.conditionNodes.length - 1, 0, {
        "default": false,
        "nodeName": "条件" + (len - 1),
        "type": 3,
        "priorityLevel": (len - 1),
        "conditionList": [],
        "nodeObjectList": [],
        "childNode": null
      })
      //其他条件移位
      this.$set(this.nodeConfig.conditionNodes[this.nodeConfig.conditionNodes.length - 1], 'nodeName', "条件" + len)
      this.$set(this.nodeConfig.conditionNodes[this.nodeConfig.conditionNodes.length - 1], 'priorityLevel', len)
      for (var i = 0; i < this.nodeConfig.conditionNodes.length; i++) {
        this.nodeConfig.conditionNodes[i].error = this.$appfunc.conditionStr(this.nodeConfig, i) == "请设置条件" && i != this.nodeConfig.conditionNodes.length - 1
      }
      this.$emit("update:nodeConfig", this.nodeConfig);
    },
    delTerm(index) {
      //如果是其他条件，禁止删除
      if (this.nodeConfig.conditionNodes[index].type === 3 && this.nodeConfig.conditionNodes[index].default) {
        return
      }
      this.nodeConfig.conditionNodes.splice(index, 1)
      this.nodeConfig.conditionNodes.map((item, index) => {
        item.priorityLevel = index + 1
        item.nodeName = `条件${index + 1}`
      });
      for (var i = 0; i < this.nodeConfig.conditionNodes.length; i++) {
        this.nodeConfig.conditionNodes[i].error = this.$appfunc.conditionStr(this.nodeConfig, i) == "请设置条件" && i != this.nodeConfig.conditionNodes.length - 1
      }
      this.$emit("update:nodeConfig", this.nodeConfig);
      if (this.nodeConfig.conditionNodes.length == 1) {
        if (this.nodeConfig.childNode) {
          if (this.nodeConfig.conditionNodes[0].childNode) {
            this.reData(this.nodeConfig.conditionNodes[0].childNode, this.nodeConfig.childNode)
          } else {
            this.nodeConfig.conditionNodes[0].childNode = this.nodeConfig.childNode
          }
        }
        this.$emit("update:nodeConfig", this.nodeConfig.conditionNodes[0].childNode);
      }
    },
    reData(data, addData) {
      if (!data.childNode) {
        data.childNode = addData
      } else {
        this.reData(data.childNode, addData)
      }
    },
    setPerson(priorityLevel) {
      var {type} = this.nodeConfig;
      if (type == 0) {
        this.setPromoter(true)
        this.setFlowPermission({
          value: this.flowPermission,
          flag: false,
          id: this._uid
        })
      } else if (type == 1) {
        this.setApprover(true)
        this.setApproverConfig({
          value: {
            ...JSON.parse(JSON.stringify(this.nodeConfig)),
            ...{approverType: this.nodeConfig.approverType ? this.nodeConfig.approverType : 1}
          },
          flag: false,
          id: this._uid
        })
      } else if (type == 2) {
        this.setCopyer(true)
        this.setCopyerConfig({
          value: JSON.parse(JSON.stringify(this.nodeConfig)),
          flag: false,
          id: this._uid
        })
      } else {//其他条件不允许编辑
        if (this.nodeConfig.conditionNodes[priorityLevel - 1].default) {
          return
        }
        this.setCondition(true)
        this.setConditionsConfig({
          value: JSON.parse(JSON.stringify(this.nodeConfig)),
          priorityLevel,
          flag: false,
          id: this._uid
        })
      }
    },
    arrTransfer(index, type = 1) {//向左-1,向右1
      // if(){
      //
      // }
      this.nodeConfig.conditionNodes[index] = this.nodeConfig.conditionNodes.splice(index + type, 1, this.nodeConfig.conditionNodes[index])[0];
      this.nodeConfig.conditionNodes.map((item, index) => {
        item.priorityLevel = index + 1
      })
      for (var i = 0; i < this.nodeConfig.conditionNodes.length; i++) {
        this.nodeConfig.conditionNodes[i].error = this.$appfunc.conditionStr(this.nodeConfig, i) == "请设置条件" && i != this.nodeConfig.conditionNodes.length - 1
      }
      this.$emit("update:nodeConfig", this.nodeConfig);
    }
  }
}
</script>
<style scoped src="./css/workflow.css"/>
<style scoped>
.error_tip {
  position: absolute;
  top: 0px;
  right: 0px;
  transform: translate(150%, 0px);
  font-size: 24px;
}

.promoter_person .el-dialog__body {
  padding: 10px 20px 14px 20px;
}

.selected_list {
  margin-bottom: 20px;
  line-height: 30px;
}

.selected_list span {
  margin-right: 10px;
  padding: 3px 6px 3px 9px;
  line-height: 12px;
  white-space: nowrap;
  border-radius: 2px;
  border: 1px solid rgba(220, 220, 220, 1);
}

.selected_list img {
  margin-left: 5px;
  width: 7px;
  height: 7px;
  cursor: pointer;
}
</style>
