<template>
    <q-dialog
        v-model="modelValue"
        class="col-6"
        persistent
        transition-show="scale"
        transition-hide="scale"
        @hide="hideDialog"
    >
        <q-card style="width: 600px;height:600px; max-width: 80vw;">
            <q-card-section class="row items-center q-pb-none">
                <div class="text-h6">选择部门/员工</div>
                <q-space />
                <q-btn icon="close" flat round dense v-close-popup />
            </q-card-section>

            <q-card-section class="q-pt-none" style="height:480px;">
                <div class="row" style="height:100%;">
                    <div class="col-6 q-px-sm" style="border-right:1px solid #999;height:100%;">
                        <q-input
                            color="teal"
                            dense
                            outlined
                            placeholder="请输入"
                            style="margin-bottom:10px"
                        >
                            <template v-slot:append>
                                <q-icon name="search" />
                            </template>
                        </q-input>
                        <q-tree
                            style="height:calc(100% - 50px);overflow-y:scroll"
                            ref="tree"
                            class="col-12"
                            :nodes="treeData"
                            :node-key="nodeKey"
                            :label-key="labelKey"
                            :children-key="childrenKey"
                            :tick-strategy="strategy"
                            :default-expand-all="defaultExpandAll"
                            no-connectors
                            v-model:ticked="defaultArray"
                            @update:ticked="tickedTree"
                           
                        />
                    </div>
                    <div class="col-6 q-px-sm">
                        <div class="list-title">已选择的部门或成员</div>
                        <div class="q-pb-none col-12 list-box">
                            <div
                                v-for="(item,index) in selectArray"
                                :key="index"
                                class="list-item"
                            >
                                <div class="flex-center">
                                    <q-icon
                                        name="work"
                                        color="primary"
                                        v-if="item.Id.slice(0, 1) == 1"
                                    />
                                    <q-icon
                                        name="person"
                                        color="accent"
                                        v-if="item.Id.slice(0, 1) == 2"
                                    />
                                    <span class="q-ml-sm">{{ item.Name }}</span>
                                </div>
                                <q-icon name="cancel" @click="delItem(index)"></q-icon>
                            </div>
                        </div>
                    </div>
                </div>
            </q-card-section>

            <q-card-actions align="right" class="bg-white text-teal">
                <q-btn flat label="取消" v-close-popup />
                <q-btn color="primary" v-close-popup label="确定" />
            </q-card-actions>
        </q-card>
    </q-dialog>
</template>
<script lang="ts">
import { ref } from 'vue'

interface parmas {
    [key: string]: any
}
interface SelectParams{
    Id:number,
    Name:string
}
export default {
    props: {
        modelValue: {
            type: Boolean,
            default: false
        },
        //树形结构列表
        treeData: {
            type: Array,
            required: true
        },
        showType: {
            type: Number,//0:显示部门和员工，1：只显示部门
            default: 0
        },
        //是否默认展开
        defaultExpandAll: {
            type: Boolean,
            default: false
        },
        //默认选中值
        defaultArray: {
            type: Array,
            default: () => [],
            required: true,
        },
        //节点Key
        nodeKey: {
            type: String,//格式需拼成 '类型-名字-id'的形式
            default: 'id'
        },
        //节点名称
        labelKey: {
            type: String,
            default: 'name'
        },
        //子节点名称
        childrenKey: {
            type: String,
            default: 'children'
        },
        //滴答策略
        strategy: {
            type: String,
            default: 'strict'
        },
        
    },

    setup(props, ctx) {
        let tree = ref<any>(null);
        let list = ref<Array<string>>([])
        let selectArray = ref<Array<SelectParams>>([])
        let hideDialog = () => {
            ctx.emit("update:modelValue", false)
        }
       
        const getselectArray=(arr: parmas)=>{
            for(var i = 0;i<arr.length;i++){
                let j = arr[i]
                let flag= tree.value.isTicked (j.newId)
                if(flag==true){
                    selectArray.value.push({Id:j.newId , Name:j.DeptName})
                }else{
                    if(j.ChildList && j.ChildList.length>0){
                        getselectArray(j.ChildList)
                    }
                }    
            }
        }
        let tickedTree = (val) => {
            ctx.emit("update:defaultArray", val)
            setTimeout(()=>{
                    selectArray.value=[]
                    getselectArray(props.treeData)
                    console.log(selectArray.value,'selectArray')
            },100)
          
        }
        let delItem = (i: number) => {
            props.defaultArray.splice(i, 1)
        }
       
        

        return {
            tree,
            hideDialog,
            tickedTree,
            delItem,
            list,
            getselectArray,
            selectArray
            
        }
    }
}
</script>
<style scoped>
::-webkit-scrollbar {
    height: 7px;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 3px;
    background-color: #ddd;
}
::-webkit-scrollbar-track-piece {
    background-color: #fff;
    -webkit-border-radius: 12px;
}
.list-title {
    height: 50px;
    padding-bottom: 10px;
    color: #606266;
    font-size: 14px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}
.list-box {
    height: 420px;
    overflow-y: scroll;
}
.list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0 0 10px;
    border-radius: 5px;
    height: 30px;
}
</style>