<template>
    <div class="approve-node-wrap node-wrap">
        <div class="node-content">
            <div class="head">
                <span class="icon"></span>
                <span class="name">审核人</span>
                <span class="icon-btn" @click="removeNode"><i class="el-icon-close"></i></span>
            </div>
            <div class="content" @click="showDrawer">
                <ul class="approver-list" v-if="flowNode.approvers.length">
                    <li class="list-item" v-for="(item,index) in flowNode.approvers" :key="item.ItemId">
                        {{item.ItemName}}{{index===flowNode.approvers.length-1?'':'、'}}
                    </li>
                </ul>
                <span v-else style="color:#0052D9;display: flex;align-items: center;">
                    <img src="~@/assets/img/approve_m/select.png">
                    请选择审批人
                </span>
            </div>
        </div>
        <AddNode :node="flowNode" v-on="$listeners"/>
        <el-drawer
            direction="rtl"
            :visible.sync="drawerShow"
            :withHeader="true"
            :modal-append-to-body="false"
            >
            <div class="approve-drawer-wrap">
                <div class="header">
                    <p>审批人设置</p>
                    <span class="close-icon" @click="drawerShow=false" style="cursor: pointer;"><i class="el-icon-close"></i></span>
                </div>
                <div class="drawer-content">
                    <div class="block">
                        <p>选择审批人</p>
                        <div class="choose-box">
                            <el-radio v-model="block1" :label="1">指定人员</el-radio>
                            <el-button @click="chooseDialogShow=true" type="primary">
                                <i class="el-icon-circle-plus-outline" style="margin-right: 5px;"></i>
                                选择人员
                            </el-button>
                        </div>
                        <draggable 
                            v-model="choosedList"
                            animation="300"
                            tag="ul"
                            class="approve-list">
                            <li class="list-item" v-for="item in choosedList" :key="item.ItemId">
                                <span class="name">{{item.ItemName}}</span>
                                <span class="icon-btn">
                                    <i class="el-icon-close" @click.stop="removeChoosedItem(item)"></i>
                                </span>
                            </li>
                        </draggable>
                    </div>
                    <div class="line"></div>
                    <div class="block" style="margin-top:30px;">
                        <p>多人审批时</p>
                        <el-radio-group v-model="approveType">
                            <el-radio :label="1">
                                依次审批
                                <el-tooltip effect="dark" placement="top" content="多个审批人依次进行审批；只有当所有审批人同意，该节点才能通过；按选择顺序审批" >
                                    <span class="hint-text">
                                        <i class="el-icon-info"></i>
                                    </span>
                                </el-tooltip>
                            </el-radio>
                            <el-radio :label="2">
                                会签（须所有审批人同意）
                                <el-tooltip effect="dark" placement="top" content="所有审批人同意，该节点才能通过；审批无先后顺序" >
                                    <span class="hint-text">
                                        <i class="el-icon-info"></i>
                                    </span>
                                </el-tooltip>
                            </el-radio>
                            <el-radio :label="3">
                                或签（一名审批人同意或拒绝即可）
                                <el-tooltip effect="dark" placement="top" content="任意一名审批人同意，该节点即通过；审批无先后顺序" >
                                    <span class="hint-text">
                                        <i class="el-icon-info"></i>
                                    </span>
                                </el-tooltip>
                            </el-radio>
                        </el-radio-group>
                    </div>
                </div>
                <div class="drawer-btn">
                    <el-button type="primary" plain @click="drawerShow=false">取消</el-button>
                    <el-button type="primary" @click="editApproveNode">确认</el-button>
                </div>
            </div>
        </el-drawer>
        <!-- 选择人员弹窗 -->
        <el-dialog 
            title="选择人员"
            width="600px"
            :visible.sync="chooseDialogShow"
            :modal-append-to-body="false"
            :append-to-body="false"
            @close="chooseDialogShow=false"
        >
            <div class="dialog-wrap">
                <TreeTransfer 
                    ref="tree-trans"
                    :defaultList="choosedList"
                    :chooseDialogShow="chooseDialogShow"
                />
            </div>
            <div class="dialog-btn">
                <el-button type="primary" plain @click="chooseDialogShow=false">取消</el-button>
                <el-button type="primary" @click="getChoosedList">确认</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import TreeTransfer from '../treeTransfer';
import draggable from 'vuedraggable';
import AddNode from './addNode';
export default {
    props:{
        flowNode:{
            type:Object,
            default:{}
        }
    },
    data() {
        return {
            drawerShow: false,
            block1: 1,
            approveType: 1,
            chooseDialogShow: false,
            choosedList:[]
        };
    },
    watch:{
        drawerShow(val){
            if(val){
                this.choosedList = _.cloneDeep(this.flowNode.approvers||[])
                this.approveType = this.flowNode.ApproveType
            }
        }
    },
    methods: {
        removeNode() {
            this.$emit('removeNode', this.flowNode);
        },
        showDrawer() {
            this.drawerShow = true;
        },
        getChoosedList(){
            if(!this.$refs["tree-trans"].choosedList.length){
                this.$message.warning("请至少选择一人")
                return
            }
            this.choosedList = _.cloneDeep(this.$refs["tree-trans"].choosedList)||[]
            this.chooseDialogShow = false
        },
        removeChoosedItem(item){
            const index = this.choosedList.findIndex(i=>i.ItemId===item.ItemId)
            index!==-1&&this.choosedList.splice(index,1)
        },
        editApproveNode(){
            const node = _.cloneDeep(this.flowNode)
            node.approvers = _.cloneDeep(this.choosedList)
            node.ApproveType = this.approveType
            this.$emit('editNode',node)
            this.drawerShow = false
        },
    },
    components: { TreeTransfer, draggable, AddNode }
};
</script>

<style lang="scss">
.approve-node-wrap{
    .el-drawer__body{
        overflow: hidden;
    }
    #el-drawer__title{ //drawer弹出时会自动聚焦第一个元素,设置无内容的title清除聚焦状态
        height:0px;
        margin:0px;
        padding:0px;
    }
    .dialog-btn{
        margin-top:60px;
        padding-bottom: 40px;
        text-align: center;
    }
}
</style>
<style scoped lang="scss">
.approve-node-wrap{
    .head{
        background-color: #0052D9;
        .icon{
            background-image: url('~@/assets/img/approve_m/approve.png');
        }
        .icon-btn{
            font-size: 20px;
        }
    }
    .content{
        .approver-list{
            color:#0052D9;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        }
    }
    .approve-drawer-wrap{
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        .header{
            display: flex;
            align-items: center;
            justify-content: space-between;
            /* font-weight: bold; */
            font-size: 18px;
            height:35px;
            padding:20px;
            border-bottom: 1px solid #C8CDD9;
        }
        .drawer-content{
            flex:1;
            overflow-y: auto;
            box-sizing: border-box;
            padding:30px;
            .block{
                min-height: 340px;
                .choose-box{
                    margin-top: 20px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }
            }
            .line{
                margin:0 -30px;
                height: 1px;
                background-color:#C8CDD9;
            }
            .approve-list{
                margin-top: 10px;
                display: flex;
                flex-wrap: wrap;
                gap:10px;
                .list-item{
                    cursor: move;
                    padding:8px;
                    border-radius: 4px;
                    border:1px solid #C8CDD9;
                    .icon-btn{
                        cursor: pointer;
                    }
                }
            }
            .el-radio-group{
                margin-top: 20px;
                .el-radio{
                    display: block;
                    margin-bottom: 10px;
                    .hint-text{
                        color:#C0C4CC;
                    }

                }
            }
        }
        .drawer-btn{
            text-align: center;
            margin:10px;
        }
    }
    
}
</style>
