<script lang="ts" setup name="AddNode">
import { Plus } from '@element-plus/icons-vue'
import { ref } from 'vue'
const props = defineProps({
  nodeConfig: {
    type: Object,
    default: () => ({}),
  },
  childNodeP: {
    type: Object,
    default: () => ({}),
  },
  tip: {
    type: String,
  },
})
const emits = defineEmits(['update:childNodeP', 'doSetPerson'])
const parentObj = ref({})
const addType = (type: number) => {
  let data
  if (type !== 4) {
    if (type === 1) { // 审核人
      data = {
        nodeName: '审批人',
        error: true,
        type: 1,
        nodeId: 'approvalID',
        examineMode: '1',
        nodeUserType: {
          type: 'manager',
          value: '',
          valueList: [],
          valueName: '',
        },
        childNode: props.childNodeP,
      }
    }
    else if (type === 2) { // 抄送人
      data = {
        nodeName: '抄送人',
        error: true,
        type: 2,
        nodeId: 'copyID',
        nodeUserType: {
          type: 'manager',
          value: 'm-1',
          valueName: '第一级主管',
          valueList: [],
        },
        childNode: props.childNodeP,
      }
    }
    const param = ['', '', data, props.tip]
    emits('doSetPerson', param) // 添加节点自动弹出弹框
  }
  else { // 条件分支
    data = {
      nodeName: '路由',
      type: 4,
      nodeId: 'conditionID',
      childNode: props.childNodeP,
      conditionNodes: [{
        nodeName: '条件1',
        error: true,
        type: 3,
        priorityLevel: 1,
        conditionList: [],
        childNode: null,
      }, {
        nodeName: '默认',
        error: true,
        type: 3,
        priorityLevel: 2,
        conditionList: [],
        childNode: null,
      }],
    }
    const param = [1, '', data]
    emits('doSetPerson', param) // 添加节点自动弹出弹框
  }
  console.log('==================')
  console.log(data)
  emits('update:childNodeP', data)
}
</script>

<template>
  <div class="add-node-btn-box">
    <div class="add-node-btn">
      <el-popover placement="right-start" popper-class="add-node-popover">
        <div class="add-node-popover-body">
          <div class="add-node-popover-item approver" @click="addType(1)">
            <div class="item-wrapper">
              <img src="../../assets/images/workFlowImg/审批人.png" alt="" class="img-style">
            </div>
            <p>审批人</p>
          </div>
          <div class="add-node-popover-item notifier" @click="addType(2)">
            <div class="item-wrapper">
              <img src="../../assets/images/workFlowImg/抄送人.png" alt="" class="img-style">
            </div>
            <p>抄送人</p>
          </div>
          <div class="add-node-popover-item condition" @click="addType(4)">
            <div class="item-wrapper">
              <img src="../../assets/images/workFlowImg/条件.png" alt="" class="img-style">
            </div>
            <p>条件分支</p>
          </div>
        </div>
        <template #reference>
          <el-button class="btn" type="primary" :icon="Plus">
            <!-- <i style="color: #fff;" class="el-icon-plus" /> -->
            <!-- <plus style="width: 1em; height: 1em;" /> -->
          </el-button>
        </template>
      </el-popover>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.add-node-btn-box {
  width: 240px;
  display: inline-flex;
  flex-shrink: 0;
  position: relative;

  &:first-child {
    margin-left: 16px;
  }

  &::before {
    content: "";
    position: absolute;
    top: 1px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    margin: auto;
    width: 2px;
    // height: 100%;
    background-color: #ebebeb;
  }
}

.img-style {
  width: 36px;
}

.add-node-popover {
  width: fit-content;
  padding: 14px 26px;

  .add-node-popover-body {
    width: fit-content;
    display: flex;

    .add-node-popover-item {
      margin-right: 20px;
      text-align: center;
      cursor: pointer;

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

      i {
        font-size: 36px;
      }

      p {
        color: #333;
        margin-top: 4px;
        white-space: nowrap;
      }
    }

    .approver {
      i {
        color: #e6a23c;
      }
    }

    .condition {
      i {
        color: #67c23a;
      }
    }

    .notifier {
      i {
        color: #4880ff;
      }
    }
  }
}
</style>

<style lang="scss">
  .add-node-btn-box {
    .el-button [class*="el-icon"] + span {
      margin-left: 0;
    }
  }

  .el-popover.el-popper {
    width: fit-content !important;
  }
</style>