<script setup lang="ts">
import type { PopoverInstance } from "element-plus";
import type { NodeType } from "./type";
import type { Ref } from "vue";

const { readOnly } = inject<{
    readOnly?: Ref<boolean>;
}>("flowDesign", { readOnly: ref(false) });
const popoverRef = ref<PopoverInstance>();
const $emits = defineEmits<{
    (e: "addNode", type: NodeType): void;
}>();
const addApprovalNode = () => {
    $emits("addNode", "approval");
    console.log("触发了吗?");
    popoverRef.value?.hide();
};
const addCcNode = () => {
    $emits("addNode", "cc");
    popoverRef.value?.hide();
};
const addExclusiveNode = () => {
    $emits("addNode", "exclusive");
    popoverRef.value?.hide();
};
const addTimerNode = () => {
    $emits("addNode", "timer");
    popoverRef.value?.hide();
};
const addNotifyNode = () => {
    $emits("addNode", "notify");
    popoverRef.value?.hide();
};
const addParallelNode = () => {
    $emits("addNode", "parallel");
    popoverRef.value?.hide();
};
// const addServiceNode = () => {
//     $emits("addNode", "service");
//     popoverRef.value?.hide();
// };
</script>

<template>
    <div class="add-but">
        <el-popover placement="bottom-start" ref="popoverRef" trigger="click" title="添加节点" :width="336">
            <el-space wrap>
                <div class="node-select" @click="addApprovalNode">
                    <svg-icon name="el:Stamp" />
                    <el-text>审批人</el-text>
                </div>
                <div class="node-select" @click="addCcNode">
                    <svg-icon name="el:Promotion" />
                    <el-text>抄送人</el-text>
                </div>
                <div class="node-select" @click="addExclusiveNode">
                    <svg-icon name="el:Share" />
                    <el-text>串行分支</el-text>
                </div>
                <div class="node-select" @click="addParallelNode">
                    <svg-icon name="el:Share" />
                    <el-text>并行分支</el-text>
                </div>

                <div class="node-select" @click="addTimerNode">
                    <svg-icon name="el:Timer" />
                    <el-text>计时等待</el-text>
                </div>
                <div class="node-select" @click="addNotifyNode">
                    <svg-icon name="el:BellFilled" />
                    <el-text>消息通知</el-text>
                </div>
                <!-- <div class="node-select" @click="addServiceNode">
                    <svg-icon name="el:Tools" />
                    <el-text>服务节点</el-text>
                </div> -->
            </el-space>
            <template #reference>
                <el-button v-show="!readOnly" icon="Plus" type="primary" style="z-index: 1" circle></el-button>
            </template>
        </el-popover>
    </div>
</template>

<style scoped lang="scss">
.node-select {
    position: relative;
    display: flex;
    width: 134px;
    padding: 8px;
    cursor: pointer;
    background-color: var(--el-fill-color-light);
    border-radius: 10px;
    &:hover {
        color: var(--el-color-primary);
        background-color: var(--el-color-primary-light-9);
        box-shadow: var(--el-box-shadow-light);
    }
    .svg-icon {
        padding: 5px;
        font-size: 25px;
        color: var(--el-color-white);
        border-radius: 50%;
        &.Stamp {
            background-color: #ff943e;
        }
        &.Promotion {
            background-color: #3296fa;
        }
        &.Share {
            background-color: #45cf9b;
        }
        &.Timer {
            background-color: #e872b7;
        }
        &.BellFilled {
            background-color: #95d475;
        }
        &.Tools {
            background-color: #ffc107;
        }
    }
    .el-text {
        margin-left: 10px;
    }
}
.add-but {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 20px 0 32px;
    &::before {
        position: absolute;
        inset: 0;
        width: 1px;
        height: 100%;
        margin: auto;
        content: "";
        background-color: var(--el-border-color);
    }
}
</style>
