<script setup lang="ts" name="NodeWrapBan">
import { computed, ref, watch } from 'vue'
import $func from '@/plugins/preload'
const props = defineProps({
  nodeConfig: {
    type: Object,
    default: () => ({}),
  },
  flowPermission: {
    type: Object,
    default: () => {},
  },
})

const emits = defineEmits(['update:flowPermission', 'update:nodeConfig'])

const bgColors = ['87, 106, 149', '255, 148, 62', '50, 150, 250'] // 节点背景色
const placeholderList = ['发起人', '审核人', '抄送人'] // 节点默认名字
const defaultText = computed(() => { // 节点默认名字
  return placeholderList[props.nodeConfig.type]
})
const showText = computed(() => {
  // 设置发起人节点的showText显示文字
  if (props.nodeConfig.type == 0) {
    // return $func.arrToStr(props.flowPermission) || '所有人'
    // return props.flowPermission.name || userStore.name
    return '所有人'
  }
  // 设置审批节点的showText显示文字
  if (props.nodeConfig.type == 1) {
    return $func.setApproverStr(props.nodeConfig)
  }
  // 设置审批节点的showText显示文字
  return $func.copyerStr(props.nodeConfig)
})

// 监听到节点配置的变化，重新设置节点文字内容
watch(() => props.nodeConfig, (val) => {
  if (props.nodeConfig.type == 1) {
    return $func.setApproverStr(props.nodeConfig) // 审批
  }
  return $func.copyerStr(props.nodeConfig) // 抄送
}, {
  deep: true, // 深度监听的参数
})

const isInputList = ref<{ [key: number]: boolean }>([]) // 条件控制节点显示输入框的字段{0: true}
const isInput = ref(false) // 审批和抄送控制节点名称显示输入框的字段
</script>

<template>
  <div v-if="nodeConfig.type < 3" class="node-wrap">
    <div class="node-wrap-box" :class="(nodeConfig.type === 0 ? 'start-node ' : '') + (nodeConfig.error ? 'active error' : '')">
      <div class="title" :style="`background: rgb(${bgColors[nodeConfig.type]});`">
        <span v-if="nodeConfig.type === 0">{{ nodeConfig.nodeName }}</span>
        <template v-else>
          <span class="iconfont">{{ nodeConfig.type === 1 ? '' : '' }}</span>
          <input
            v-if="isInput"
            v-model="nodeConfig.nodeName"
            v-focus
            type="text"
            class="ant-input editable-title-input"
            :placeholder="defaultText"
          >
          <span v-else class="editable-title">{{ nodeConfig.nodeName }}</span>
        </template>
      </div>
      <div class="content">
        <div class="text">
          <span v-if="!showText" class="placeholder">请选择{{ defaultText }}</span>
          {{ showText }}
        </div>
      </div>
    </div>
    <add-node-ban v-model:childNodeP="nodeConfig.childNode" />
  </div>
  <div v-if="nodeConfig.type === 4" class="branch-wrap">
    <div class="branch-box-wrap">
      <div class="branch-box">
        <button class="add-branch">
          添加条件
        </button>
        <div v-for="(item, index) in nodeConfig.conditionNodes" :key="index" class="col-box">
          <div class="condition-node">
            <div class="condition-node-box">
              <div class="auto-judge" :class="item.error ? 'error active' : ''">
                <div class="title-wrapper">
                  <input
                    v-if="isInputList[index]"
                    v-model="item.nodeName"
                    v-focus
                    type="text"
                    class="ant-input editable-title-input"
                  >
                  <span v-else class="editable-title">{{ item.nodeName }}</span>
                  <span class="priority-title">优先级{{ item.priorityLevel }}</span>
                </div>
                <div class="content">
                  {{ $func.conditionStr(nodeConfig, index) }}
                </div>
              </div>
              <add-node-ban v-model:childNodeP="item.childNode" />
            </div>
          </div>
          <node-wrap-ban v-if="item.childNode" v-model:nodeConfig="item.childNode" />
          <template v-if="index === 0">
            <div class="top-left-cover-line" />
            <div class="bottom-left-cover-line" />
          </template>
          <template v-if="index === nodeConfig.conditionNodes.length - 1">
            <div class="top-right-cover-line" />
            <div class="bottom-right-cover-line" />
          </template>
        </div>
      </div>
      <add-node-ban v-model:childNodeP="nodeConfig.childNode" />
    </div>
  </div>
  <node-wrap-ban v-if="nodeConfig.childNode" v-model:nodeConfig="nodeConfig.childNode" />
</template>

<style>
.error_tip {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(150%, 0);
  font-size: 24px;
}

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

.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 rgb(220 220 220 / 100%);
}

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