<script lang="ts" setup name="NodeWrap">
import { onMounted, ref } from 'vue'
import addNode from './addNode.vue'
// import cptPopver from './cptPopver'
const props = defineProps({
  nodeConfig: {
    type: Object,
    default: () => ({}),
  },
  dataFields: {
    type: Array,
    default: () => ([]),
  } as any,
  isTried: {
    type: Boolean,
  },
})
// import {
//   companyRoles, //树状app角色
//   companyUsersList, //用户列表
// } from '@/api/company'
const emits = defineEmits(['update:nodeConfig'])
const placeholderList = ['发起人', '审核人', '抄送人']
const directorLevelList = ref([{
  value: '1',
  label: '第一级主管',
},
{
  value: '2',
  label: '第二级主管',
},
])
// 审批弹框字段Obj
const approverConfig = ref({}) as any
const searchUser = ref('')
const directorLevel = ref('1') // 主管层级
const nodeUser = ref('') // 审批人（stringList）
const approverDrawer = ref(false) // 审批弹框
const defaultApprovalDrawer = ref(false) // 默认条件弹框
const conditionDrawer = ref(false) // 条件弹框
// 条件弹框字段
const conditionsConfig = ref({}) as any
const conditionConfig = ref({}) // 条件弹框item
const useroptions = ref([
  { name: 'admin', id: '1', userName: 'admin' },
  { name: 'Anna', id: '2', userName: 'Anna' },
])
const userInfo = ref({
  data: [],
  total: 0,
})
const examineModeList = ref([{
  value: '1',
  label: '会签审批',
  mark: '需要所有审批人同意，该审批节点才通过',
},
{
  value: '2',
  label: '或签审批',
  mark: '任意一名审批人同意，该审批节点即通过',
},
{
  value: '3',
  label: '逐级审批',
  mark: '按人事部门层级逐级依次审批后，该审批节点才通过',
},
])
const operatorList = ['=', '!=', '>', '>=', '<', '<=']
const isInputList = ref([])
const isInput = ref(false)
const hasFlag = ref(false)
const conditionTip = ref('')
const bPriorityLevel = ref('')
const setTypeLabel = ref('')
const conditionList = ref([])
const pager = ref({
  current: 1,
  size: 10,
})
const selectionList = ref([]) // 表格选中id
const userOriginList = ref([])

watch(() => approverDrawer.value, (newValue) => {
  if (!newValue) {
    defaultApprovalDrawer.value = false
    hasFlag.value = false
    conditionTip.value = ''
  }
})

watch(() => approverConfig.value, (newValue: any) => {
  if (newValue.nodeUserType.type === 'manager') {
    setTypeLabel.value = '部门主管：'
  }
  if (newValue.nodeUserType.type === 'role' && newValue.type === 1) {
    setTypeLabel.value = '审批角色：'
  }
  if (newValue.nodeUserType.type === 'role' && newValue.type === 2) {
    setTypeLabel.value = '抄送角色：'
  }
  if (newValue.nodeUserType.type === 'user') {
    setTypeLabel.value = '指定用户：'
  }
  setTypeLabel.value = ''
})

const remoteMethod = (query: any) => {
  searchUser.value = query
  if (query !== '') {
    if (approverConfig.value.nodeUserType.type === 'user') {
      // this.companyUsersList();
    }
  }
  else {
    useroptions.value = userOriginList.value
  }
}

const selectionChange = (val: any) => {
  selectionList.value = val.map((item: any) => item.id)
}

const saveUserInfo = () => {
  approverConfig.value.nodeUserType.valueList = selectionList.value
  // this.dialogFlag = false;
}

// 删除条件组和条件
const removeCondition = (conditonflag: string | number, index: number | string, ind: number | string) => {
  if (conditonflag === 'group') {
    approverConfig.value.conditionList.splice(index, 1)
    return
  }
  approverConfig.value.conditionList[
    index
  ].conditionChildrenNodes.splice(ind, 1)
}

// 审批选择节点
const setExamineModeRadio = (val: string) => {
  approverConfig.value.nodeUserType.value = ''
  approverConfig.value.nodeUserType.valueList = []
  if (val === '3') {
    approverConfig.value.nodeUserType.type = 'manager'
  }
}

// 添加条件组
const addConditionGroup = (flag: string | number, item: any) => {
  if (flag === '1') {
    item.conditionChildrenNodes.push({
      conditionOperator: '',
      leftFileds: '',
      centerFileds: '',
      rightFileds: '',
    })
    return
  }
  approverConfig.value.conditionList.push({
    conditionChildrenNodes: [],
    conditionGroupOperator: '',
  })
}

// 节点类型
const setTypeRadio = (val: string) => {
  if (approverConfig.value.nodeUserType.valueList.length > 0) {
    approverConfig.value.nodeUserType.valueList = ''
  }
  // this.approverConfig.nodeUserType.value = ''
  if (val === 'role') {
    // this.companyRoles()
    return
  }
  if (val === 'user') {
    // this.companyUsersList()
    return
  }
  if (val === 'manager') {
    approverConfig.value.nodeUserType.value = '部门主管'
  }
}

// 修改节点name
const editNodename = () => {
  approverConfig.value.titleInputFlag = true
}

const nodeNameBlur = () => {
  approverConfig.value.titleInputFlag = false
}

// 条件显示
const conditionStr = (item: any, index: number) => {
  const {
    conditionList, // 条件组
    conditionString, // 条件数据
    conditionStringName, // 条件显示
  } = item
  const arr = [true] // 判断条件是否有值
  if (conditionList.length === 0 || conditionString === '') {
    if (item.nodeName === '默认') {
      return '其他情况'
    }
    return '请设置条件'
  }
  if (conditionList.length !== 0) {
    if (conditionList.length === 1) {
      // 当条件组为一个
      conditionList[0].conditionChildrenNodes
        && conditionList[0].conditionChildrenNodes.forEach(
          (item: any, index: number) => {
            if (item.leftFileds == '' || item.centerFileds == '' || item.rightFileds == '') {
              arr.push(false)
            }
            if (index !== 0 && item.conditionOperator == '') {
              arr.push(false)
            }
          },
        )
    }
    else {
      // 当条件组为多个（判断是否有运算符）
      conditionList.forEach((item: any, index: number) => {
        if (index != conditionList.length - 1) {
          // 条件组不为最后一个.校验是否有条件运算符
          if (item.conditionGroupOperator == '') { arr.push(false) }
        }
        if (
          item.conditionChildrenNodes
          && item.conditionChildrenNodes.length > 0
        ) {
          item.conditionChildrenNodes.forEach((it: any, ind: number) => {
            if (
              it.leftFileds === ''
              || it.centerFileds === ''
              || it.rightFileds == ''
            ) { arr.push(false) }
            if (ind !== 0 && it.conditionOperator == '') { arr.push(false) }
          })
        }
        else if (
          item.conditionChildrenNodes
          && item.conditionChildrenNodes.length == 0
        ) {
          arr.push(false)
        }
      })
    }
    if (arr.includes(false)) {
      return '请设置条件'
    }
  }
  return conditionStringName
}

const dealStr = (str: string, obj: any) => {
  const arr: any = []
  const list = str.split(',')
  for (const elem in obj) {
    // list.map((item) => {
    //   if (item == elem) {
    //     arr.push(obj[elem].value)
    //   }
    // })
    list.forEach((item) => {
      if (item == elem) {
        arr.push(obj[elem].value)
      }
    })
  }
  return arr.join('或')
}

// 审批人抄送人显示和校验
const setApproverStr = (nodeConfig: any) => {
  let type = '会签'
  let role = '部门主管'
  if (nodeConfig.nodeUserType.type === 'role') { role = '角色' }
  if (nodeConfig.nodeUserType.type === 'user') { role = '用户' }
  if (nodeConfig.nodeUserType.value == '') { return '' }
  if (nodeConfig.type === 1) {
    // 审批
    if (nodeConfig.examineMode === '1') { type = '会签' }
    if (nodeConfig.examineMode === '2') { type = '或签' }
    if (nodeConfig.examineMode === '3') { type = '逐级审批' }
    if (nodeConfig.nodeUserType.type === 'manager' && nodeConfig.examineMode === '3') {
      if (nodeConfig.nodeUserType.value.includes('m')) {
        return `由发起人向上的${nodeConfig.nodeUserType.valueName}审批`
      }
      else {
        return `由${nodeConfig.nodeUserType.valueName}审批`
      }
    }
    if (nodeConfig.nodeUserType.type === 'manager' && nodeConfig.examineMode !== '3') {
      return `由${role}${type}`
    }
    return `由${role}：${nodeConfig.nodeUserType.valueName}${type}`
  }
  if (nodeConfig.type === 2) {
    // 抄送
    if (nodeConfig.nodeUserType.value == '') { return '' }
    if (nodeConfig.nodeUserType.type === 'manager') {
      // 主管
      if (nodeConfig.nodeUserType.value.includes('m')) {
        return `给发起人向上的${nodeConfig.nodeUserType.valueName}抄送`
      }
      else {
        return `给${nodeConfig.nodeUserType.valueName}抄送`
      }
    }
    // 角色、用户
    return `给${role}：${nodeConfig.nodeUserType.valueName}抄送`
  }
}

// 保存条件设置
const saveCondition = () => {
  approverDrawer.value = false
  let conditionString = '' // 后端要的数据
  let conditionStringName = '' // 前端显示
  // 条件循环设置
  if (approverConfig.value.conditionList.length > 0) {
    approverConfig.value.conditionList.forEach((item: any, indx: number) => {
      if (item.conditionChildrenNodes && item.conditionChildrenNodes.length > 0) {
        item.conditionChildrenNodes.forEach((it: any, ind: number) => {
          conditionString = conditionString + it.conditionOperator + it.leftFileds + it.centerFileds + it.rightFileds
          conditionStringName = conditionStringName + it.conditionOperator + it.leftFiledsName + it.centerFileds + it.rightFileds
        })
      }
      conditionString = conditionString + item.conditionGroupOperator
      conditionStringName = conditionStringName + item.conditionGroupOperator
    })
  }
  approverConfig.value.conditionString = conditionString
  approverConfig.value.conditionStringName = conditionStringName
  for (let i = 0; i < conditionsConfig.value.conditionNodes.length; i++) {
    conditionsConfig.value.conditionNodes[i].error
      = conditionStr(conditionsConfig.value.conditionNodes[i], i) == '请设置条件'
  }
  // 区分添加节点后自动出现弹框及点击出现弹框
  if (hasFlag.value) {
    // 先注释-----------------------------
    // props.nodeConfig.childNode = conditionsConfig.value
    emits('update:nodeConfig', props.nodeConfig)
  }
  else {
    emits('update:nodeConfig', conditionsConfig.value)
  }
}
// 保存弹框设置
const saveApprover = () => {
  if (approverConfig.value.type === 3) {
    saveCondition()
    return
  }
  const list = approverConfig.value.nodeUserType.valueList
  const nameList: any = [] // 下拉框:审批角色是name，指定用户是userName
  if (list.length > 0) {
    useroptions.value.forEach((item) => {
      list.forEach((i: string | number) => {
        if (approverConfig.value.nodeUserType.type === 'role') {
          if (item.id === i) { nameList.push(item.name) }
        }
        if (approverConfig.value.nodeUserType.type === 'user') {
          if (item.id === i) { nameList.push(item.userName) }
        }
      })
    })
    approverConfig.value.nodeUserType.value = list.join(',')
    approverConfig.value.nodeUserType.valueName = nameList.join(',')
  }
  else if (approverConfig.value.nodeUserType.type !== 'manager') {
    approverConfig.value.nodeUserType.value = ''
    approverConfig.value.nodeUserType.valueName = ''
  }
  if (approverConfig.value.nodeUserType.type === 'manager') {
    // 抄送 、审批人逐级审批
    if (approverConfig.value.type === 2 || approverConfig.value.type === 1) {
      let num = approverConfig.value.nodeUserType.value
      if (num.includes('m')) {
        num = num.substring(2)
      }
      directorLevelList.value.forEach((item, index: number) => {
        if (index === num - 1) { approverConfig.value.nodeUserType.valueName = item.label }
      })
      // 默认值
      if (approverConfig.value.type === 1 && approverConfig.value.nodeUserType.type == 'manager' && !approverConfig.value.nodeUserType.value) {
        approverConfig.value.nodeUserType.value = '主管'
      }
    }
    else {
      approverConfig.value.nodeUserType.value = '主管'
    }
  }
  approverConfig.value.error = setApproverStr(approverConfig.value) === ''
  // 通过hasFlag区分添加节点后自动出现弹框及点击出现弹框
  if (hasFlag.value) {
    if (props.nodeConfig.conditionNodes && props.nodeConfig.conditionNodes.length > 0 && conditionTip.value) { // 条件分支
      props.nodeConfig.conditionNodes.forEach((element: any) => {
        if (element.childNode && (!element.childNode.nodeUserType.value && element.childNode.nodeName === approverConfig.value.nodeName)) { // 条件分支节点赋值
          element.childNode = approverConfig.value
        }
      })
    }
    // 先注释-------------------
    // else {
    //   props.nodeConfig.childNode = approverConfig.value
    // }
    emits('update:nodeConfig', props.nodeConfig)
  }
  else {
    emits('update:nodeConfig', approverConfig.value)
  }
  approverDrawer.value = false
}
// 条件字段显示name
const dataFieldsChange = (it: any) => {
  props.dataFields.forEach((item: any) => {
    if (item.key === it.leftFileds) {
      it.leftFiledsName = item.name
      it.leftFiledsType = item.type
    }
  })
}

// 删除节点
const delNode = () => {
  emits('update:nodeConfig', props.nodeConfig.childNode)
}

// 添加条件
const addTerm = () => {
  const len = props.nodeConfig.conditionNodes.length
  // --------------------------------------------
  // props.nodeConfig.conditionNodes.push({
  //   nodeName: `条件${len}`,
  //   type: 3,
  //   priorityLevel: len + 1,
  //   conditionList: [],
  //   childNode: null,
  // })
  // for (let i = 0; i < props.nodeConfig.conditionNodes.length; i++) {
  //   props.nodeConfig.conditionNodes[i].error
  //     = conditionStr(props.nodeConfig.conditionNodes[i], i)
  //     == '请设置条件'
  //     && i != props.nodeConfig.conditionNodes.length - 1
  // }
  // -------------------------------------------------
  emits('update:nodeConfig', props.nodeConfig)
}

const reData = (data: any, addData: any) => {
  if (!data.childNode) {
    data.childNode = addData
  }
  else {
    reData(data.childNode, addData)
  }
}

// 删除条件
const delTerm = (index: number | string) => {
  // ---------------------------------------------------
  // props.nodeConfig.conditionNodes.splice(index, 1)
  // for (let i = 0; i < props.nodeConfig.conditionNodes.length; i++) {
  //   props.nodeConfig.conditionNodes[i].error
  //     = conditionStr(props.nodeConfig.conditionNodes[i], i)
  //     == '请设置条件'
  //     && i != props.nodeConfig.conditionNodes.length - 1
  // }
  // ------------------------------------------------------------
  emits('update:nodeConfig', props.nodeConfig)
  if (props.nodeConfig.conditionNodes.length == 1) {
    if (props.nodeConfig.childNode) {
      if (props.nodeConfig.conditionNodes[0].childNode) {
        reData(
          props.nodeConfig.conditionNodes[0].childNode,
          props.nodeConfig.childNode,
        )
      }
      // ------------------------------------------------------
      // else {
      //   props.nodeConfig.conditionNodes[0].childNode = props.nodeConfig.childNode
      // }
      // ------------------------------------------------------
    }
    emits('update:nodeConfig', props.nodeConfig.conditionNodes[0].childNode)
  }
}

// 打开弹框
const setPerson = (priorityLevel: any, item: any, data: any, tip: string) => {
  approverDrawer.value = true
  // 默认条件
  if (item && item.nodeName === '默认') {
    defaultApprovalDrawer.value = true
  }
  else {
    defaultApprovalDrawer.value = false
  }
  if (tip) {
    conditionTip.value = tip
  }
  if (data) { // 添加节点自动出现弹框传值
    hasFlag.value = true
    // 条件
    if (priorityLevel == 1) {
      bPriorityLevel.value = priorityLevel
      conditionsConfig.value = JSON.parse(JSON.stringify(data))
      approverConfig.value = conditionsConfig.value.conditionNodes[priorityLevel - 1]
      return
    }
    // 审批人、抄送人
    approverConfig.value = JSON.parse(JSON.stringify(data))
  }
  else { // 点击出现弹框
    // 条件
    const { type } = props.nodeConfig
    if (type == 4) {
      bPriorityLevel.value = priorityLevel
      conditionsConfig.value = JSON.parse(JSON.stringify(props.nodeConfig))
      approverConfig.value = conditionsConfig.value.conditionNodes[priorityLevel - 1]
      return
    }
    // 审批人、抄送人
    approverConfig.value = JSON.parse(JSON.stringify(props.nodeConfig))
  }

  if (approverConfig.value.nodeUserType && approverConfig.value.nodeUserType.type === 'role') {
    // this.companyRoles()
    return
  }
  if (approverConfig.value.nodeUserType && approverConfig.value.nodeUserType.type === 'user') {
    // this.companyUsersList()

  }
}
// 获取角色
// companyRoles() {
//   companyRoles(this.$store.state.userInfo.companyId).then((res) => {
//     res.data.forEach((item) => {
//       if (item.application.appNum === this.$route.query.appNum) {
//         this.useroptions = item.roleInfos
//       }
//     })
//   })
// },
// 获取用户(有效)
// async companyUsersList() {
//   let params = {
//     companyId: this.$store.state.userInfo.companyId,
//     // current: this.pager.current,
//     size: 20000,
//     status: "enable",
//     nameLike: this.searchUser
//     // ...this.filters    //搜索条件
//   }
//   let res = await companyUsersList(params);
//   if (res.code === '200') {
//     res.data.records.forEach((item) => {
//       item.name = item.nickName ? item.nickName : item.userName
//     })
//     this.useroptions = res.data.records;
//     this.userInfo.data = res.data.records;
//     this.userInfo.total = res.data.total;
//     return res.data.records;
//   }

// },
// -------------------------------------------------------------------------
// const arrTransfer = (index: number, type = 1) => {
//   // 向左-1,向右1
//   props.nodeConfig.conditionNodes[index] = props.nodeConfig.conditionNodes.splice(index + type, 1, props.nodeConfig.conditionNodes[index])[0]
//   props.nodeConfig.conditionNodes.map((item: any, index: number) => {
//     item.priorityLevel = index + 1
//   })
//   for (let i = 0; i < props.nodeConfig.conditionNodes.length; i++) {
//     props.nodeConfig.conditionNodes[i].error
//       = conditionStr(props.nodeConfig.conditionNodes[i], i)
//       == '请设置条件'
//       && i != props.nodeConfig.conditionNodes.length - 1
//   }
//   emits('update:nodeConfig', props.nodeConfig)
// }
// -------------------------------------------------------------------------

onMounted(async () => {
  if (props.nodeConfig.type == 1) {
    // -------------------------------------------------
    // props.nodeConfig.error = setApproverStr(props.nodeConfig) == ''
    // -------------------------------------------------

  }
  else if (props.nodeConfig.type == 2) {
    // -------------------------------------------------
    // props.nodeConfig.error = setApproverStr(props.nodeConfig) === ''
    // -------------------------------------------------

  }
  else if (props.nodeConfig.type == 4) {
    // -------------------------------------------------

    // for (let i = 0; i < props.nodeConfig.conditionNodes.length; i++) {
    //   props.nodeConfig.conditionNodes[i].error
    //     = conditionStr(props.nodeConfig.conditionNodes[i], i)
    //     == '请设置条件'
    // }
    // -------------------------------------------------

  }
})
</script>

<template>
  <div class="nodeflow-components">
    <div v-if="nodeConfig.type !== 4" class="node-wrap">
      <div v-if="nodeConfig.type && nodeConfig.type !== 0" class="node-wrap-box" :class=" (nodeConfig.type === 0 ? 'start-node ' : '') + (isTried && nodeConfig.error ? 'active error' : '') ">
        <div @click="setPerson">
          <div
            class="title" :style="
              `background: rgb(${['87, 106, 149', '230, 162, 60', '72, 128, 255'][nodeConfig.type]});` "
          >
            <span class="editable-title">{{ nodeConfig.nodeName }}</span>
            <i v-if="nodeConfig.type !== 0" class="el-icon-close close" @click.stop="delNode()" />
          </div>
          <div class="content">
            <div v-if="nodeConfig.type === 1" class="text">
              <span v-if="setApproverStr(nodeConfig) === ''" class="placeholder">
                请选择{{ placeholderList[nodeConfig.type] }}
              </span>
              {{ setApproverStr(nodeConfig) }}
            </div>
            <div v-if="nodeConfig.type === 2" class="text">
              <span v-if="setApproverStr(nodeConfig) === ''" class="placeholder">
                请选择{{ placeholderList[nodeConfig.type] }}
              </span>
              {{ setApproverStr(nodeConfig) }}
            </div>
            <i class="el-icon-arrow-right arrow" />
          </div>
          <div v-if="isTried && nodeConfig.error" class="error_tip">
            <i class="el-icon-warning" style="color: rgb(242 86 67);" />
          </div>
        </div>
      </div>
      <!-- <button>+</button> -->
      <add-node 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" @click="addTerm">
            添加条件
          </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="isTried && item.error ? 'error active' : '' " @click="setPerson(item.priorityLevel, item, '', '')">
                  <div v-if="index !== 0" class="sort-left" @click.stop="arrTransfer(index, -1)">
                    &lt;
                  </div>
                  <div class="title-wrapper">
                    <span class="editable-title">{{ item.nodeName }}</span>
                    <span class="priority-title">优先级{{ item.priorityLevel }}</span>
                    <i class="el-icon-close close" @click.stop="delTerm(index)" />
                  </div>
                  <div v-if=" index !== nodeConfig.conditionNodes .length - 1 " class="sort-right" @click.stop="arrTransfer(index)">
                    &gt;
                  </div>
                  <div class="content">
                    {{ conditionStr(item, index) }}
                  </div>
                  <div v-if="isTried && item.error" class="error_tip">
                    <i class="el-icon-warning" style="color: rgb(242 86 67);" />
                  </div>
                </div>
                <add-node v-model:child-node-p="item.childNode" tip="条件" />
              </div>
            </div>
            <node-wrap v-if="item.childNode && item.childNode" v-model:node-config="item.childNode" :is-tried="isTried" :data-fields="dataFields" />
            <div v-if="index === 0" class="top-left-cover-line" />
            <div v-if="index === 0" class="bottom-left-cover-line" />
            <div v-if="index === nodeConfig.conditionNodes.length - 1" class="top-right-cover-line" />
            <div v-if="index === nodeConfig.conditionNodes.length - 1" class="bottom-right-cover-line" />
          </div>
        </div>
        <!-- <add-node v-model:child-node-p="nodeConfig.childNode" /> -->
      </div>
    </div>
    <node-wrap v-if="nodeConfig.childNode && nodeConfig.childNode" :node-config="nodeConfig.childNode" :is-tried="isTried" :data-fields="dataFields" />
    <el-drawer v-model="approverDrawer" custom-class="set_promoter" append-to-body direction="rtl" size="560px" :before-close="saveApprover">
      <!-- <div slot="title" class="title flex"> -->
      <div class="title flex">
        <span v-if="!approverConfig.titleInputFlag">{{ approverConfig.nodeName }}</span>
        <el-input v-else v-model="approverConfig.nodeName" maxlength="20" autofocus placeholder="" @blur="nodeNameBlur" />
        <!-- 默认条件不需编辑 -->
        <i v-if="!defaultApprovalDrawer" class="iconfont icon-icon_edit1 mainColor" @click="editNodename" />
      </div>
      <div>
        <div v-if="approverConfig.type === 1" class="drawer-content">
          <el-tabs :is-hide-nav="true">
            <el-tab-pane label="节点类型">
              <el-radio-group v-model="approverConfig.examineMode" @change="setExamineModeRadio">
                <el-radio v-for="item in examineModeList" :key="item.value" :label="item.value">
                  {{ item.label }}
                  <span class="mark">({{ item.mark }})</span>
                </el-radio>
              </el-radio-group>
            </el-tab-pane>
            <el-tab-pane label="审批人类型">
              <div v-if="approverConfig.examineMode === '3'">
                <p style="margin-bottom: 16px;">
                  连续多级部门主管<span style="color: #828282;margin-left: 8px;">(按照组织架构，发起人<span style="color: #4880ff;">向上的各级主管</span>依次审批)</span>
                </p>
                <el-radio-group v-model="approverConfig.nodeUserType.value">
                  <el-radio :label="`m-${directorLevel}`">
                    <span style="margin-right: 8px;">直到发起人向上的</span>
                    <el-select v-model="directorLevel" style="width: 140px;" placeholder="请选择">
                      <el-option v-for="(item, index) in directorLevelList" :key="index" :label="item.label" :value="item.value" />
                    </el-select>
                  </el-radio>
                  <cpt-popver :type="true" />
                  <el-radio :label="directorLevel">
                    <span style="margin-right: 8px;">直到</span>
                    <el-select v-model="directorLevel" style="width: 140px;" placeholder="请选择">
                      <el-option v-for="(item, index) in directorLevelList" :key="index" :label="item.label" :value="item.value" />
                    </el-select>
                  </el-radio>
                  <cpt-popver />
                </el-radio-group>
              </div>
              <div v-else>
                <el-radio-group v-model="approverConfig.nodeUserType.type" @change="setTypeRadio">
                  <el-radio label="manager">
                    部门主管
                  </el-radio>
                  <el-radio label="role">
                    审批角色
                  </el-radio>
                  <el-radio label="user">
                    指定用户
                  </el-radio>
                </el-radio-group>
                <div v-if=" approverConfig.nodeUserType.type && approverConfig.nodeUserType.type !== 'manager' ">
                  <el-form ref="form" label-width="90px">
                    <el-form-item :label="setTypeLabel">
                      <div v-if="approverConfig.nodeUserType.type === 'user'">
                        <el-select v-model="approverConfig.nodeUserType.valueList" remote :remote-method="remoteMethod" filterable multiple placeholder="请选择">
                          <el-option v-for="item in useroptions" :key="item.id" :label="item.userName" :value="item.id" />
                        </el-select>
                      </div>
                      <div v-if="approverConfig.nodeUserType.type === 'role'">
                        <el-select v-model="approverConfig.nodeUserType.valueList" filterable multiple placeholder="请选择">
                          <el-option v-for="item in useroptions" :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                      </div>
                    </el-form-item>
                  </el-form>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div v-if="approverConfig.type === 2" class="drawer-content">
          <el-tabs :is-hide-nav="true">
            <el-tab-pane label="抄送人类型">
              <div>
                <el-radio-group v-model="approverConfig.nodeUserType.type" @change="setTypeRadio">
                  <el-radio label="manager">
                    连续多级部门主管
                  </el-radio>
                  <el-radio label="role">
                    抄送角色
                  </el-radio>
                  <el-radio label="user">
                    指定用户
                  </el-radio>
                </el-radio-group>
                <div v-if=" approverConfig.nodeUserType.type !== 'manager' ">
                  <el-form v-if="approverConfig.nodeUserType.type" ref="form" label-width="90px">
                    <el-form-item :label="setTypeLabel">
                      <div v-if="approverConfig.nodeUserType.type === 'user'">
                        <el-select v-model="approverConfig.nodeUserType.valueList" remote :remote-method="remoteMethod" filterable multiple placeholder="请选择">
                          <el-option v-for="item in useroptions" :key="item.id" :label="item.userName" :value="item.id" />
                        </el-select>
                      </div>
                      <div v-if="approverConfig.nodeUserType.type === 'role'">
                        <el-select v-model="approverConfig.nodeUserType.valueList" filterable multiple placeholder="请选择">
                          <el-option v-for="item in useroptions" :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                      </div>
                    </el-form-item>
                  </el-form>
                </div>
                <div v-else>
                  <p style="margin-bottom: 16px;font-size: 14px;">
                    按组织架构，发起人<span style="color: #4880ff;">向上的各级主管</span>依次抄送
                  </p>
                  <el-radio-group v-model=" approverConfig.nodeUserType.value ">
                    <el-radio :label="`m-${directorLevel}`">
                      <span style="margin-right: 8px;">直到发起人向上的</span>
                      <el-select v-model="directorLevel" style="width: 140px;" placeholder="请选择" @change=" approverConfig.nodeUserType.value = `m-${directorLevel}` ">
                        <el-option v-for="(item, index) in directorLevelList" :key="index" :label="item.label" :value="item.value" />
                      </el-select>
                    </el-radio>
                    <cpt-popver :type="true" />
                    <el-radio :label="directorLevel">
                      <span style="margin-right: 8px;">直到</span>
                      <el-select v-model="directorLevel" style="width: 140px;" placeholder="请选择" @change=" approverConfig.nodeUserType.value = directorLevel ">
                        <el-option v-for="(item, index) in directorLevelList" :key="index" :label="item.label" :value="item.value" />
                      </el-select>
                    </el-radio>
                    <cpt-popver />
                  </el-radio-group>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div v-if="approverConfig.type === 3" class="drawer-content drawer-content-condition">
          <!-- 默认条件 -->
          <div v-if="defaultApprovalDrawer" class="default-style">
            其他情况
          </div>
          <div v-else>
            <div v-for="(item, index) in approverConfig.conditionList" :key="index">
              <div class="condition-conent-group">
                <div class="condition-group-title flex">
                  <div class="dang-style">
                    条件组
                  </div>
                  <div>
                    <i class="remove el-icon-delete" @click="removeCondition('group', index, 0)" />
                  </div>
                </div>
                <div v-for="(it, ind) in item.conditionChildrenNodes" :key="ind" class="condition-group-select">
                  <div class="mg-bot-10">
                    <div v-if="ind === 0" class="flex flex-style">
                      <span class="dang-style">当</span>
                      <i class="remove el-icon-delete" @click=" removeCondition('oneCondition', index, ind) " />
                    </div>
                    <div v-else class="flex">
                      <el-select v-model="it.conditionOperator" style="width: 110px;" placeholder="请选择">
                        <el-option label="且" value="&&" />
                        <el-option label="或" value="||" />
                      </el-select>
                      <i class="remove iconfont icon-icon_viewpicture_delete" @click=" removeCondition('oneCondition', index, ind) " />
                    </div>
                  </div>
                  <el-row :gutter="5" class="mg-bot-10">
                    <el-col :span="8">
                      <el-select v-model="it.leftFileds" placeholder="请选择" @change="dataFieldsChange(it)">
                        <el-option v-for="item in dataFields" :key="item.key" :label="item.name" :value="item.key" />
                      </el-select>
                    </el-col>
                    <el-col :span="5">
                      <el-select v-model="it.centerFileds" placeholder="请选择">
                        <el-option v-for="item in operatorList" :key="item" :label="item" :value="item" />
                      </el-select>
                    </el-col>
                    <el-col :span="10">
                      <el-date-picker v-if="it.leftFiledsType === 'date'" v-model="it.rightFileds" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" />
                      <el-input v-else v-model="it.rightFileds" placeholder="请输入" />
                    </el-col>
                  </el-row>
                </div>
                <div class="conditionbtn" @click="addConditionGroup('1', item)">
                  <el-button type="">
                    <i class="el-button-suffix el-icon-plus" />添加条件
                  </el-button>
                </div>
              </div>
              <div v-if=" index === 0 && approverConfig.conditionList.length > 1 " class="flex" style="height: 54px;padding: 0 24px;">
                <el-select v-model="item.conditionGroupOperator" style="width: 110px;margin-top: 7px;" placeholder="请选择">
                  <el-option label="且" value="&&" />
                  <el-option label="或" value="||" />
                </el-select>
              </div>
            </div>
            <div class="conditionbtn">
              <el-button type="" @click="addConditionGroup('0', {})">
                <i class="el-button-suffix el-icon-plus" />添加条件组
              </el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="set_promoter_footer flex">
        <!-- 默认条件弹框只展示关闭按钮 -->
        <div v-if="defaultApprovalDrawer">
          <el-button type="primary" @click="approverDrawer = false">
            关闭
          </el-button>
        </div>
        <div v-else class="flex">
          <el-button type="primary" @click="saveApprover">
            确定
          </el-button>
          <el-button @click="approverDrawer = false">
            取消
          </el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<style lang="scss">
.el-dialog__title {
  font-size: 18px !important;
  font-weight: 600 !important;
}

.default-style {
  margin-left: 25px;
}

.search-style {
  label {
    width: 50px !important;
  }

  .el-row {
    padding-right: 0 !important;
  }

  .el-form-item__content {
    margin-left: 50px !important;
  }
}

.flex-style {
  display: flex;
  justify-content: space-between;
}

.dang-style {
  font-size: 14px;
}

.dialog-style {
  z-index: 99999 !important;
  background: rgb(0 0 0 / 50%);
}

.v-modal {
  background: none !important;
  z-index: -1 !important;
}

.set_promoter {
  .el-drawer__header {
    margin-bottom: 0;
    padding: 0 24px;
    border-bottom: 1px solid #ebebeb;

    .title {
      height: 64px;
      line-height: 64px;
      font-size: 20px;
      color: #333;
      justify-content: flex-start;

      i {
        margin-left: 8px;
        font-size: 30px;
      }
    }
  }

  .el-drawer__body {
    overflow-y: auto;
    max-height: calc(100% - 64px);
    padding-bottom: 80px;
  }

  .drawer-content {
    padding: 24px;

    .el-radio {
      margin-bottom: 16px;

      .mark {
        color: #828282;
      }

      &.is-checked {
        .mark {
          color: #4880ff;
        }
      }

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  .drawer-content-condition {
    padding: 24px 0;

    .condition-conent-group {
      border-bottom: solid 1px #ebebeb;
      padding-bottom: 20px;

      .condition-group-title {
        padding: 0 24px;
        background: #f7f8fa;
        height: 48px;
        border-top: solid 1px #ebebeb;
        border-bottom: solid 1px #ebebeb;
        margin-bottom: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .condition-group-select {
        padding: 0 24px;
      }

      .remove {
        color: #828282;

        &:hover {
          cursor: pointer;
          color: #4880ff;
        }
      }

      .mg-bot-10 {
        margin-bottom: 10px;
      }

      .conditionbtn {
        .el-button {
          border: 1px dashed #4880ff;
          width: 110px;
        }
      }
    }

    .conditionbtn {
      padding: 0 24px;
      margin-top: 26px;

      .el-button {
        border: solid 1px #4880ff;
        color: #4880ff;
        width: 123px;
      }
    }
  }

  .set_promoter_footer {
    height: 80px;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 24px;
    justify-content: flex-end;
    background: #fff;
    width: 100%;
    border-top: 1px solid #ebebeb;
    z-index: 2;
  }

  .icon-icon_explain {
    color: #bfbfbf;
  }
}

.error_tip {
  position: absolute;
  top: 36px;
  right: 0;
  transform: translate(150%, 0);

  i {
    font-size: 24px;
  }
}

.add-node-popover-body {
  display: flex;
}

.el-drawer:focus,
.el-drawer__close-btn:focus {
  outline: none;
}
</style>
