<template>
    <!-- 审批流内容 -->
    <div class="flow-editor">
        <span class="circle-point"></span>
        <span class="circle-point end"></span>
        <component v-for="(node,index) in flowData" :key="index"
            :is="node.nodeName"
            :flowNode="{...node,...{index}}"
            @addNode="addFlowNode"
            @editNode="editFlowNode"
            @removeNode="removeNode">
        </component>
    </div>
</template>

<script>
import StartNode from './flowNode/startNode.vue';
import AddNode from './flowNode/addNode.vue';
import ApproveNode from './flowNode/approveNode.vue';
import EndNode from './flowNode/endNode.vue';
export default {
    props:{
        flowNodes:{ //审批流原数据,只包含审批节点
            type:Array,
            default:[]
        }
    },
    data() {
        return {
            flowData:[{
                nodeType: 1,
                nodeName: 'StartNode',
            },{
                nodeType:3,
                nodeName:'EndNode'
            }]
        };
    },
    watch:{
        flowNodes(val){
            this.initFlowData()
        }
    },
    methods: {
        initFlowData(){
            const approveData = this.flowNodes.map(n=>{
                const approvers = n.Users.map(i=>{
                    return {
                        ItemId:i.UserId,
                        ItemName:i.UserName
                    }
                })
                return {
                    ...n,
                    nodeType:2,
                    nodeName:'ApproveNode',
                    approvers
                }
            })
            this.flowData.splice(1,0,...approveData)
        },
        addFlowNode(node){
            const {prevNode} = node
            delete node.prevNode
            const {index} = prevNode
            this.flowData.splice(index+1,0,node)
        },
        removeNode(node){
            const {index} = node
            this.flowData.splice(index,1)
        },
        editFlowNode(node){
            const {index} = node
            this.flowData.splice(index,1,node)
        }
    },
    mounted(){
        //this.initFlowData()
    },
    components: { StartNode,AddNode,ApproveNode,EndNode }
};
</script>

<style scoped lang="scss">
@import url('../css/nodeStyle.scss');
.flow-editor{
    margin-left: 20px;
    position:relative;
    .circle-point{
            position:absolute;
            top:0;
            left:-22px;
            width:6px;
            height:6px;
            border-radius: 50%;
            background-color: #0052D9;
            &.end{
                top:auto;
                bottom:0;
            }
        }
        &::before{
            content: '';
            top:0;
            left:-20px;
            bottom: 0;
            width:2px;
            background-color: #0052D9;
            position: absolute;
        }
}
</style>
