<template>
    <!-- 选择审批人组件 -->
    <div class="tree-transfer">
        <div class="before-transfer transfer">
            <div class="search">
                <el-input placeholder="搜索" suffix-icon="el-icon-search" style="width:100%;"
                    v-model="searchText" @input="$refs['trans-tree'].filter(searchText)"></el-input>
            </div>
            <div class="content">
                <el-tree 
                    node-key="ItemId"
                    ref="trans-tree"
                    show-checkbox
                    :data="treeData"
                    :props="{
                        label:'ItemName',
                        children:'Children'
                    }"
                    :filter-node-method="filterNode"
                    @check="SetCheckedNode"
                ></el-tree>
            </div>
        </div>
        <div class="after-transfer transfer">
            <div class="head">
                <span>已选{{choosedList.length}}项</span>
                <span class="btn-text delete" @click="clearnItem">清空</span>
            </div>
            <draggable 
                v-model="choosedList"
                animation="300"
                tag="ul"
                class="content">
                <li class="list-item" v-for="item in choosedList" :key="item.ItemId">
                    <span class="name">{{item.ItemName}}</span>
                    <span class="icon-btn" style="color:#C0C4CC;">
                        <i class="el-icon-close" @click.stop="removeItem(item)"></i>
                    </span>
                </li>
            </draggable>
        </div>
    </div>
</template>

<script>
import { dataAuthInterface } from "@/api/api.js";
import draggable from 'vuedraggable';
export default {
    components:{draggable},
    props:{
        defaultList:{
            type:Array,
            default:[]
        },
        chooseDialogShow:{
            type:Boolean,
            default:false
        }
    },
    data() {
        return {
            totalNum:0,
            treeData:[],
            searchText:'',
            choosedList:[]
        };
    },
    watch:{
        chooseDialogShow:{
            handler(val){
                if(val){
                    this.searchText=''
                    this.getTreeData()
                }
            },
            immediate:true
        }
    },
    methods: {
        getTreeData(){
            ///datamanage/manual/sysuser/search?KeyWord= ,要用新接口再换
            dataAuthInterface.userSearch({
                KeyWord: ''
            }).then(res => {
                if(res.Ret === 200) {
                    this.treeData = res.Data||[];
                }
                this.$nextTick(()=>{
                    const keys = this.defaultList.map(i=>{
                        return i.ItemId
                    })
                    this.$refs["trans-tree"].setCheckedKeys(keys)
                    this.choosedList = _.cloneDeep(this.defaultList)
                })
            })
        },
        filterNode(value,data){
            if(!value) return true
            return data.ItemName.indexOf(value)!==-1
        },
        SetCheckedNode(data,{checkedNodes}){
            if(!this.choosedList.length){
                 //只获取人员
                this.choosedList = checkedNodes.filter(i=>{
                    if(i.ItemId<10000&&!i.Children)
                        return i
                })
            }else{
                //遍历 filterArr choosedList里没有的，push进去
                const filterArr = checkedNodes.filter(i=>{
                    if(i.ItemId<10000&&!i.Children)
                        return i
                })
                filterArr.forEach(i=>{
                    const index = this.choosedList.findIndex(item=>i.ItemId===item.ItemId)
                    if(index===-1){this.choosedList.push(i)}
                })
                //遍历choosedList，filterArr里没有的，删除
                const tempArr = _.cloneDeep(this.choosedList)
                tempArr.forEach(i=>{
                    const checkIndex = filterArr.findIndex(item=>item.ItemId===i.ItemId)
                    if(checkIndex===-1){
                        const index = this.choosedList.findIndex(item=>item.ItemId===i.ItemId)
                        index!==-1&&this.choosedList.splice(index,1)
                    }
                })
            }
        },
        removeItem(item){
            const {ItemId} = item
            this.$refs["trans-tree"].setChecked(ItemId,false,false)
            const index = this.choosedList.findIndex(i=>i.ItemId===ItemId)
            index!==-1&&this.choosedList.splice(index,1)
        },
        clearnItem(){
            this.$refs["trans-tree"].setCheckedKeys([])
            this.choosedList = []
        },
    },
    mounted(){
        //this.getTreeData()
    }
};
</script>

<style scoped lang="scss">
.tree-transfer{
    display: flex;
    align-items: center;
    gap:12px;
    .transfer{
        display: flex;
        flex-direction: column;
        width:254px;
        height: 400px;
        border:1px solid #DCDCDC;
        border-radius: 6px;
        padding:8px;
        .head,.search,.content{
            padding:10px;
        }
        .head{
            display: flex;
            justify-content: space-between;
            .btn-text{
                cursor: pointer;
                &.delete{
                    color:red;
                }
            }
        }
        .content{
            flex:1;
            overflow-y: scroll;
            margin-bottom: 10px;
            .list-item{
                cursor: pointer;
                padding:6px 0;
                display: flex;
                justify-content: space-between;
            }
        }
    }
}
</style>
