<template>
    <div class="full-height" style="position: relative;">
        <el-input 
        style="position: absolute;left: 0;top: 0;right: 0;z-index: 2;"
        class="microsoft q-mb-md" size="large"
        v-model="keyword" placeholder="搜索成员"
        clearable
        @keyup.enter="filtrationData" @change="filtrationData">
            <template #prefix>
                <el-icon class="el-input__icon"><Search /></el-icon>
            </template>
        </el-input>
        <!-- height="300px" -->
        <el-scrollbar class="col full-height user-center-body" style="padding-top: 50px;">
            <div class="row col flex-between items-center q-pb-md pointer" 
            v-for="(item,index) in allPeoples" :key="index"
            @click="clickLine(item,index,1)">
                <div>
                    <el-button size="large" color="#599DFA" circle class="q-mr-lg">
                        <span class="colorF">{{item.name.slice(0,2)}}</span>
                    </el-button>
                    <span class="color0 fz14 microsoft">{{item.name}}</span>
                </div>
                <div>
                    <el-checkbox v-model="item.checked" label="" size="large" @change="clickLine(item,index)" @click.stop=""/>
                </div>
            </div>
        </el-scrollbar>
    </div>
</template>
<script lang="ts" setup>
    
    import { ElMessage, FormInstance, FormRules } from 'element-plus';
    import { ref, reactive, watch, inject, onMounted } from "vue";
    import { injectKeyPublic } from '@/types/injectKey';
    import { Search } from '@element-plus/icons-vue';

    const search = ref({} as any)
    search.value = inject(injectKeyPublic)

    const queryObj = ref({} as any)
    queryObj.value = search.value.queryObj

    const msg = ref({} as any)
    msg.value = search.value.msg

    const form = ref({} as any)
    form.value = search.value.form

    const allPeoples = ref([] as ay)
    allPeoples.value = JSON.parse(JSON.stringify(msg.value.allPeoples))
    
    const keyword = ref('')
    
    const props = defineProps({
        
    })
 
    const filtrationData = () => {
        if(keyword.value)allPeoples.value = msg.value.allPeoples.filter(x=>{ return x.name.toLowerCase().includes(keyword.value.toLowerCase())})
        else allPeoples.value = msg.value.allPeoples
    }
   
    const clickLine = (item:any,index:Number,type:any) => {
        if(type){
            item.checked = !item.checked
        }
        if(item.checked==true) {
            let filter
            if(msg.value.personnelType==1)  filter = msg.value.personnelList1.filter(x=>{ return x.empId==item.empId})
            if(msg.value.personnelType==2)  filter = msg.value.personnelList2.filter(x=>{ return x.empId==item.empId})
            if(msg.value.personnelType==3)  filter = msg.value.personnelList3.filter(x=>{ return x.empId==item.empId})
            if(msg.value.personnelType==4)  filter = msg.value.personnelList4.filter(x=>{ return x.empId==item.empId})
            if(msg.value.personnelType==5)  filter = msg.value.personnelList5.filter(x=>{ return x.empId==item.empId})
            if(filter.length==0) {
                if(msg.value.personnelType==1) msg.value.personnelList1.push(item)
                if(msg.value.personnelType==2) msg.value.personnelList2.push(item)
                if(msg.value.personnelType==3) msg.value.personnelList3.push(item)
                if(msg.value.personnelType==4) msg.value.personnelList4.push(item)
                if(msg.value.personnelType==5) msg.value.personnelList5.push(item)
            }
        }else {
            if(msg.value.personnelType==1) msg.value.personnelList1 = msg.value.personnelList1.filter(x=>{ return x.empId!=item.empId})
            if(msg.value.personnelType==2) msg.value.personnelList2 = msg.value.personnelList2.filter(x=>{ return x.empId!=item.empId})
            if(msg.value.personnelType==3) msg.value.personnelList3 = msg.value.personnelList3.filter(x=>{ return x.empId!=item.empId})
            if(msg.value.personnelType==4) msg.value.personnelList4 = msg.value.personnelList4.filter(x=>{ return x.empId!=item.empId})
            if(msg.value.personnelType==5) msg.value.personnelList5 = msg.value.personnelList5.filter(x=>{ return x.empId!=item.empId})
        }
    }
    
    watch(()=>msg.value,(o,n)=>{
        search.value.msg = msg.value
        allPeoples.value.forEach(x=>{
            let filter
            if(msg.value.personnelType==1) filter = msg.value.personnelList1.filter(y=>{return y.empId==x.empId})
            if(msg.value.personnelType==2) filter = msg.value.personnelList2.filter(y=>{return y.empId==x.empId})
            if(msg.value.personnelType==3) filter = msg.value.personnelList3.filter(y=>{return y.empId==x.empId})
            if(msg.value.personnelType==4) filter = msg.value.personnelList4.filter(y=>{return y.empId==x.empId})
            if(msg.value.personnelType==5) filter = msg.value.personnelList5.filter(y=>{return y.empId==x.empId})
            if(filter.length>0) x.checked = true
            else x.checked = false
        })
    },{deep:true})
    watch(()=>msg.value.personnelType,(o,n)=>{
        allPeoples.value.forEach(x=>{
            let filter
            if(msg.value.personnelType==1) filter = msg.value.personnelList1.filter(y=>{return y.empId==x.empId})
            if(msg.value.personnelType==2) filter = msg.value.personnelList2.filter(y=>{return y.empId==x.empId})
            if(msg.value.personnelType==3) filter = msg.value.personnelList3.filter(y=>{return y.empId==x.empId})
            if(msg.value.personnelType==4) filter = msg.value.personnelList4.filter(y=>{return y.empId==x.empId})
            if(msg.value.personnelType==5) filter = msg.value.personnelList5.filter(y=>{return y.empId==x.empId})
            if(filter.length>0) x.checked = true
            else x.checked = false
        })
    },{deep:true})
    onMounted(()=>{
        
    })
</script>
<style lang="scss" scoped>



</style>