<template>
  <el-popover :visible="visible" placement="bottom-start" title="添加流程节点" width="306">
    <div class="node-select">
      <div @click="addApprovalNode">
        <el-icon style="color:rgb(255, 148, 62);">
          <Coordinate/>
        </el-icon>
        <span>审批人</span>
      </div>
      <div @click="addCcNode">
        <el-icon style="color:rgb(50, 150, 250);">
          <Promotion/>
        </el-icon>
        <span>抄送人</span>
      </div>
      <div @click="addConditionsNode">
        <el-icon style="color:rgb(21, 188, 131);">
          <Share/>
        </el-icon>
        <span>条件分支</span>
      </div>
      <div @click="addConcurrentsNode">
        <el-icon style="color:#718dff;">
          <Operation/>
        </el-icon>
        <span>并行分支</span>
      </div>
<!--      <div @click="addDelayNode">-->
<!--        <el-icon style="color:#f25643;">-->
<!--          <Clock/>-->
<!--        </el-icon>-->
<!--        <span>延迟等待</span>-->
<!--      </div>-->
<!--      <div @click="addTriggerNode">-->
<!--        <el-icon style="color:#15BC83;">-->
<!--          <SetUp/>-->
<!--        </el-icon>-->
<!--        <span>触发器</span>-->
<!--      </div>-->
    </div>
    <template #reference>
<!--      <el-button :icon="Plus" slot="reference" type="primary" @click="visible = !visible"  size="small"-->
<!--                 circle></el-button>-->
      <el-icon @click="visible = !visible" color="#fff" style="background-color:#2E7CF0;border-radius: 50%;cursor: pointer" ><Plus /></el-icon>
    </template>
  </el-popover>
</template>

<script setup>
import {debounce} from 'lodash'
import {Plus, Clock, SetUp, Operation, Share, Promotion, Coordinate} from '@element-plus/icons-vue'
const emit = defineEmits(['insertNode'])
const visible = ref(false)

onMounted(() => {
  document.addEventListener('click', nullBlockClick)
})
/**
 * 点击空白处, 清除选项选中状态
 */
const nullBlockClick = (e) => {
  if(!(e.target.tagName==='svg'||e.target.tagName==='path')){
    disVisible()
  }
}
const addApprovalNode = () => {
  emit('insertNode', "APPROVAL")
  disVisible()
}

const addCcNode = () => {
  emit('insertNode', "CC")
  disVisible()
}
const addDelayNode =() => {
  emit('insertNode', "DELAY")
  disVisible()
}
const addConditionsNode = () => {
  emit('insertNode', "CONDITIONS")
  disVisible()
}
const addConcurrentsNode = () => {
  emit('insertNode', "CONCURRENTS")
  disVisible()
}
const addTriggerNode = () => {
  emit('insertNode', "TRIGGER")
  disVisible()
}

const disVisible = () =>{
  visible.value = false
}
</script>

<style lang="scss" scoped>
.node-select {
  div {
    display: inline-block;
    margin: 5px 5px;
    cursor: pointer;
    padding: 10px 15px;
    border: 1px solid #F8F9F9;
    background-color: #F8F9F9;
    border-radius: 10px;
    width: 130px;
    line-height: 7px;
    position: relative;

    span {
      position: absolute;
      left: 65px;
      top: 18px;
    }

    &:hover {
      background-color: #fff;
      box-shadow: 0 0 8px 2px #d6d6d6;
    }

    i {
      font-size: 25px;
      padding: 5px;
      border: 1px solid #dedfdf;
      border-radius: 14px;
    }
  }
}
</style>
