<template>
  <div>
    <div class="node-wrap" v-if="nodeConfig.type != 4">
      <div class="node-wrap-box" @click="setPerson"
        :class="(nodeConfig.type == 0 ? 'start-node ' : '') + (nodeConfig.nodeId === state.auditData?.nodeId ? 'active error' : '')">
        <div>
          <div :class="`title ${getColor(nodeConfig.type, nodeConfig.finalStatus)}`">
            <span style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
              {{ nodeConfig.nodeName }}
            </span>
            <el-icon style="position: absolute; right: 10px" v-if="!disabled && nodeConfig.type != 0 && modifiable"
              @click.stop="delNode">
              <Close />
            </el-icon>
          </div>
          <div class="flow-content">
            <div class="text-cust placeholder" v-if="nodeConfig.type == 0">
              <p>
                {{ $t('flow_applicants') }}
              </p>
            </div>
            <div class="text-cust placeholder" v-if="nodeConfig.type == 1">
              <p v-if="nodeConfig.optionType !== '4' && !nodeConfig.optionValue">
                {{ `${$t('placeholder_prefix_select')?.replace(LABEL_KEY, $t('flow_approver'))}` }}
              </p>
              <p v-else>
                {{ optionTypeMap[nodeConfig.optionType] }}
                <span v-if="nodeConfig.optionType === '3'">【{{ nodePropertyMap[nodeConfig.nodeProperty] }}】</span>
                <template v-if="nodeConfig.optionValue">
                  <el-badge :value="nodeConfig.optionValue?.split(',').length" style="margin: 0 5px 0 0">
                    <el-icon style="vertical-align: middle;">
                      <UserFilled />
                    </el-icon>
                  </el-badge>
                  <span v-if="nodeConfig.optionValue?.split(',').length > 1">{{ signTypeMap[nodeConfig.signType] }}</span>
                </template>
              </p>
            </div>
            <i class="anticon el-icon-arrow-right arrow"></i>
          </div>
          <div class="error_tip" v-if="isTried && nodeConfig.error">
            <i class="anticon anticon-exclamation-circle" style="color: rgb(242, 86, 67)"></i>
          </div>
        </div>
      </div>
      <addNode v-model:childNodeP="nodeConfig.childNode" v-model:modifiable="modifiable"></addNode>
    </div>
    <div class="branch-wrap" v-if="nodeConfig.type == 4">
      <div class="branch-box-wrap">
        <div class="branch-box">
          <button v-if="modifiable" class="add-branch" @click="addTerm">{{ $t('flow_branchcondition') }}</button>
          <button v-else class="add-branch">{{ $t('flow_branch') }}</button>
          <div class="col-box" v-for="(item, index) in nodeConfig.conditionNodes" :key="index">
            <div class="condition-node">
              <div class="condition-node-box" @click="setPerson(item.priorityLevel, index)">
                <div class="auto-judge"
                  :class="nodeConfig.conditionNodes[index].nodeId === state.auditData?.nodeId ? 'error active' : ''">
                  <div class="sort-left" v-if="index != 0 && index != nodeConfig.conditionNodes.length - 1 && modifiable"
                    @click="arrTransfer(index, -1)">&lt;</div>
                  <div class="title-wrapper">
                    <span class="editable-title" @click="clickEvent(index)">{{ item.nodeName }}</span>
                    <span class="priority-title">
                      {{ $t('flow_priority') }}
                      {{ item.priorityLevel }}
                    </span>
                    <el-icon style="position: absolute; right: -10px"
                      v-if="!disabled && index != nodeConfig.conditionNodes.length - 1 && modifiable"
                      @click.stop="delTerm(index)">
                      <Close color="rgba(25, 31, 37, 0.56)" />
                    </el-icon>
                  </div>

                  <div class="sort-right" v-if="index < nodeConfig.conditionNodes.length - 2 && modifiable"
                    @click="arrTransfer(index)">&gt;</div>
                  <div class="placeholder text-cuxt" style="padding-top: 10px;font-size: 14px;"
                    v-if="index < nodeConfig.conditionNodes.length - 1" @click="setPerson(item.priorityLevel, index)">
                    <span v-if="!nodeConfig.conditionNodes[index].businessColumn">
                      {{ $t('placeholder_prefix_select')?.replace(LABEL_KEY, $t('flow_condition')) }}
                    </span>
                    <template v-else>
                      <span>{{ businessColumnMap[nodeConfig.conditionNodes[index].businessColumn] }}</span>
                      <span style="margin-left: 5px">{{ compareMap[nodeConfig.conditionNodes[index].compare] }}</span>
                      <span style="margin-left: 5px">{{ nodeConfig.conditionNodes[index].value }}</span>
                    </template>
                  </div>
                  <div class="error_tip" v-if="isTried && item.error">
                    <i class="anticon anticon-exclamation-circle" style="color: rgb(242, 86, 67)"></i>
                  </div>
                </div>
                <addNode v-model:childNodeP="item.childNode" v-model:modifiable="modifiable"></addNode>
              </div>
            </div>
            <nodeWrap v-if="item.childNode && item.childNode" v-model:nodeConfig="item.childNode" :tableId="tableId"
              :isDetail="isDetail" :isTried="isTried">
            </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 v-model:childNodeP="nodeConfig.childNode" v-model:modifiable="modifiable"></addNode>
      </div>
    </div>
    <nodeWrap v-if="nodeConfig.childNode && nodeConfig.childNode" v-model:nodeConfig="nodeConfig.childNode"
      :tableId="tableId" :isDetail="isDetail" :isTried="isTried" :signTypeMap="signTypeMap"></nodeWrap>
  </div>
</template>
<script>
import yid from 'yid'
import addNode from './addNode.vue'
import { replace } from '@/utils/index';
import { UserFilled } from '@element-plus/icons-vue';
import { LABEL_KEY } from '@/components/GdElement/common'

const TaskStatus = {
  INACTIVE: 1,
  AUDITING: 2,
  PASS: 3,
  REJECT: 4
}
const { INACTIVE, AUDITING, PASS, REJECT } = TaskStatus
function getColor(type, status, isDetail) {
  let color = 'logo-containe-background-'
  if (type === 0) {
    return color + 'premoter'
  } else if (type === 2) {
    return color + 'copyer'
  }

  switch (status) {
    case INACTIVE:
      color += 'inactive'
      break
    case AUDITING:
      color += 'default'
      break
    case PASS:
      color += 'pass'
      break
    case REJECT:
      color += 'reject'
      break
    default:
      color += isDetail ? 'inactive' : 'default'
      break
  }
  return color
}
export default {
  inject: ['state', 'optionTypeMap', 'signTypeMap', 'nodePropertyMap', 'businessColumnMap', 'compareMap', 'disabled'],
  props: ['nodeConfig', 'flowPermission', 'isTried', 'tableId', 'isDetail'],
  data() {
    return {
      isInputList: [],
      isInput: false,
      LABEL_KEY
    }
  },
  components: { addNode, UserFilled },
  computed: {
    modifiable() {
      return !this.isDetail
    },
    auditHistory() {
      const { auditHistory } = this.nodeConfig
      return auditHistory ? auditHistory.filter(({ status }) => [3, 4].includes(status)) : []
    }
  },
  methods: {
    clickEvent(index) {
      if (index || index === 0 || !this.modifiable) {
        this.isInputList[index] = true
      } else {
        this.isInput = true
      }
    },
    parseName(map, keys = '', prop) {
      if (!keys || keys.length === 0) {
        return ''
      }
      return `${keys}`
        .split(',')
        .map((id) => map[id] && prop ? map[id][prop] : map[id])
        .join(',')
    },
    delNode() {
      this.$emit('update:nodeConfig', this.nodeConfig.childNode)
      replace(this.state.auditData, {})
    },
    addTerm() {
      let length = this.nodeConfig.conditionNodes.length
      this.nodeConfig.conditionNodes.splice(length - 1, 0, {
        nodeId: yid(),
        nodeName: this.$t('flow_condition') + length,
        type: 3,
        priorityLevel: length,
        expression: '',
        childNode: null
      })
      this.nodeConfig.conditionNodes.map((item, index) => {
        if (index < length) {
          item.priorityLevel = index + 1
        } else {
          item.priorityLevel = 999
        }
      })
      this.$emit('update:nodeConfig', this.nodeConfig)
    },
    delTerm(index) {
      replace(this.state.auditData, {})
      this.nodeConfig.conditionNodes.splice(index, 1)
      this.nodeConfig.conditionNodes.map((item, index) => {
        if (index < this.nodeConfig.conditionNodes.length - 1) {
          item.priorityLevel = index + 1
        } else {
          item.priorityLevel = 999
        }
      })
      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, index) {
      if (priorityLevel === 999) {
        return
      }
      if (this.nodeConfig.type === 4) {
        return replace(this.state.auditData, this.nodeConfig.conditionNodes[index])
      }
      replace(this.state.auditData, this.nodeConfig)
      this.$emit('nodeClick', this.nodeConfig)
    },
    arrTransfer(index, type = 1) {
      //向左-1,向右1
      this.nodeConfig.conditionNodes[index] = this.nodeConfig.conditionNodes.splice(index + type, 1, this.nodeConfig.conditionNodes[index])[0]
      this.nodeConfig.conditionNodes.map((item, index) => {
        if (index < this.nodeConfig.conditionNodes.length - 1) {
          item.priorityLevel = index + 1
        } else {
          item.priorityLevel = 999
        }
      })
      this.$emit('update:nodeConfig', this.nodeConfig)
    },
    getColor
  }
}
</script>
<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;
}

.auto-judge:hover .editable-title,
.node-wrap-box:hover .editable-title {
  border-bottom: 1px dashed #fff;
}

.auto-judge:hover .editable-title.editing,
.node-wrap-box:hover .editable-title.editing {
  text-decoration: none;
  border: 1px solid #d9d9d9;
}

.auto-judge:hover .editable-title {
  border-color: #15bc83;
}

.editable-title {
  line-height: 15px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-bottom: 1px dashed transparent;
}

.editable-title:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 40px;
}

.editable-title:hover {
  border-bottom: 1px dashed #fff;
}

.editable-title-input {
  flex: none;
  height: 18px;
  padding-left: 4px;
  text-indent: 0;
  font-size: 12px;
  line-height: 18px;
  z-index: 1;
  color: black;
}

.editable-title-input:hover {
  text-decoration: none;
}

.ant-btn {
  position: relative;
}

.node-wrap-box {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  position: relative;
  width: 220px;
  min-height: 72px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
}

.node-wrap-box:after {
  pointer-events: none;
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
}

.node-wrap-box.active:after,
.node-wrap-box:active:after,
.node-wrap-box:hover:after {
  border: 1px solid #3296fa;
  box-shadow: 0 0 6px 0 rgba(50, 150, 250, 0.3);
}

.node-wrap-box.active .close,
.node-wrap-box:active .close,
.node-wrap-box:hover .close {
  display: block;
}

.node-wrap-box.error:after {
  border: 1px solid #3296fa;
  box-shadow: 0 0 6px 0 rgba(50, 150, 250, 0.3);
}

.node-wrap-box .title {
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 16px;
  padding-right: 30px;
  width: 100%;
  height: 24px;
  line-height: 24px;
  font-size: 12px;
  color: #fff;
  text-align: left;
  background: #576a95;
  border-radius: 4px 4px 0 0;
  margin: 0 !important;
}

.node-wrap-box .title .iconfont {
  font-size: 12px;
  margin-right: 5px;
}

.node-wrap-box .placeholder {
  color: #bfbfbf;
}

.node-wrap-box .close {
  display: none;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  font-size: 14px;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 20px;
}

.node-wrap-box .flow-content {
  position: relative;
  font-size: 14px;
  padding: 16px;
  padding-right: 30px;
}

.node-wrap-box .flow-content .text {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.node-wrap-box .flow-content .arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 14px;
  font-size: 14px;
  color: #979797;
}

.start-node.node-wrap-box .flow-content .text {
  display: block;
  white-space: nowrap;
}

.node-wrap-box:before {
  content: '';
  position: absolute;
  top: -12px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 0;
  height: 4px;
  border-style: solid;
  border-width: 8px 6px 4px;
  border-color: #cacaca transparent transparent;
  background: #f5f5f7;
}

.node-wrap-box.start-node:before {
  content: none;
}

.top-left-cover-line {
  left: -1px;
}

.top-left-cover-line,
.top-right-cover-line {
  position: absolute;
  height: 3px;
  width: 50%;
  background-color: #f5f5f7;
  top: -2px;
}

.top-right-cover-line {
  right: -1px;
}

.bottom-left-cover-line {
  left: -1px;
}

.bottom-left-cover-line,
.bottom-right-cover-line {
  position: absolute;
  height: 3px;
  width: 50%;
  background-color: #f5f5f7;
  bottom: -2px;
}

.bottom-right-cover-line {
  right: -1px;
}

.approval-setting {
  border-radius: 2px;
  margin: 20px 0;
  position: relative;
  background: #fff;
}

.ant-btn {
  position: relative;
}

.node-wrap-box .logo-containe-background-default {
  background: #f66902;
}

.node-wrap-box .logo-containe-background-inactive {
  background: grey;
}

.node-wrap-box .logo-containe-background-reject {
  background: red;
}

.node-wrap-box .logo-containe-background-pass {
  background: greenyellow;
}

.node-wrap-box .logo-containe-background-promoter {
  background: rgb(87, 106, 149);
}

.node-wrap-box .logo-containe-background-copyer {
  background: rgb(50, 150, 250);
}

.dingflow-design .branch-wrap,
.dingflow-design .node-wrap {
  display: inline-flex;
  width: 100%;
}

.dingflow-design .branch-box-wrap {
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: 270px;
  width: 100%;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.dingflow-design .branch-box {
  display: flex;
  overflow: visible;
  min-height: 180px;
  height: auto;
  border-bottom: 2px solid #ccc;
  border-top: 2px solid #ccc;
  position: relative;
  margin-top: 15px;
}

.dingflow-design .branch-box .col-box {
  background: #f5f5f7;
}

.dingflow-design .branch-box .col-box:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  margin: auto;
  width: 2px;
  height: 100%;
  background-color: #cacaca;
}

.dingflow-design .add-branch {
  border: none;
  outline: none;
  user-select: none;
  justify-content: center;
  font-size: 12px;
  padding: 0 10px;
  height: 30px;
  line-height: 30px;
  border-radius: 15px;
  color: #3296fa;
  background: #fff;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  transform-origin: center center;
  cursor: pointer;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.dingflow-design .add-branch:hover {
  transform: translateX(-50%) scale(1.1);
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.1);
}

.dingflow-design .add-branch:active {
  transform: translateX(-50%);
  box-shadow: none;
}

.dingflow-design .col-box {
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-align: center;
  align-items: center;
  position: relative;
}

.dingflow-design .condition-node {
  min-height: 220px;
}

.dingflow-design .condition-node,
.dingflow-design .condition-node-box {
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-flex: 1;
}

.dingflow-design .condition-node-box {
  padding-top: 30px;
  padding-right: 50px;
  padding-left: 50px;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  flex-grow: 1;
  position: relative;
}

.dingflow-design .condition-node-box:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 2px;
  height: 100%;
  background-color: #cacaca;
}

.dingflow-design .auto-judge {
  position: relative;
  width: 220px;
  min-height: 72px;
  background: #fff;
  border-radius: 4px;
  padding: 14px 19px;
  cursor: pointer;
}

.dingflow-design .auto-judge:after {
  pointer-events: none;
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
}

.dingflow-design .auto-judge.active:after,
.dingflow-design .auto-judge:active:after,
.dingflow-design .auto-judge:hover:after {
  border: 1px solid #3296fa;
  box-shadow: 0 0 6px 0 rgba(50, 150, 250, 0.3);
}

.dingflow-design .auto-judge.active .close,
.dingflow-design .auto-judge:active .close,
.dingflow-design .auto-judge:hover .close {
  display: block;
}

.dingflow-design .auto-judge.error:after {
  border: 1px solid #3296fa;
  box-shadow: 0 0 6px 0 rgba(50, 150, 250, 0.3);
}

.dingflow-design .auto-judge .title-wrapper {
  position: relative;
  font-size: 12px;
  color: #15bc83;
  text-align: left;
  line-height: 16px;
}

.dingflow-design .auto-judge .title-wrapper .editable-title {
  display: inline-block;
  max-width: 120px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dingflow-design .auto-judge .title-wrapper .priority-title {
  display: inline-block;
  float: right;
  margin-right: 10px;
  color: rgba(25, 31, 37, 0.56);
}

.dingflow-design .auto-judge .placeholder {
  color: #bfbfbf;
}

.dingflow-design .auto-judge .close {
  display: none;
  position: absolute;
  right: -10px;
  top: -10px;
  width: 20px;
  height: 20px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  text-align: center;
  line-height: 20px;
  z-index: 2;
}

.dingflow-design .auto-judge .flow-content {
  font-size: 14px;
  color: #191f25;
  text-align: left;
  margin-top: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.dingflow-design .auto-judge .sort-left,
.dingflow-design .auto-judge .sort-right {
  position: absolute;
  top: 0;
  bottom: 0;
  display: none;
  z-index: 1;
}

.dingflow-design .auto-judge .sort-left {
  left: 0;
  border-right: 1px solid #f6f6f6;
}

.dingflow-design .auto-judge .sort-right {
  right: 0;
  border-left: 1px solid #f6f6f6;
}

.dingflow-design .auto-judge:hover .sort-left,
.dingflow-design .auto-judge:hover .sort-right {
  display: flex;
  align-items: center;
}

.dingflow-design .auto-judge .sort-left:hover,
.dingflow-design .auto-judge .sort-right:hover {
  background: #efefef;
}

.dingflow-design .add-node-btn-box {
  width: 240px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  position: relative;
}

.dingflow-design .add-node-btn-box:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  margin: auto;
  width: 2px;
  height: 100%;
  background-color: #cacaca;
}

.dingflow-design .node-wrap {
  flex-direction: column;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  padding: 0 50px;
  position: relative;
}
</style>


