<template>
    <el-button class="full-width" type="info" plain size="large">项目分享成员</el-button>
    <el-scrollbar max-height="530px">
        <div class="q-py-lg">
            <div class="fz16 row flex-between">
                <span class="microsoft text-weight-bold700 q-mb-lg">项目管理者：</span>
                <div class="row nowrap">
                    <div class="row nowrap" v-if="msg.personnelList1.length<5">
                        <div class="NewSharerBox q-mr-md q-mb-md" v-for="(item,index) in msg.personnelList1">
                            <el-icon color="#F26060" class="NewSharerDel pointer" size="14" @click="delPersonnel(index,1)"><RemoveFilled /></el-icon>
                            <el-button size="large" color="#599DFA" circle class=""><span class="colorF">{{item.name.slice(0,2)}}</span></el-button>
                        </div>
                    </div>
                    <el-button size="large" icon="Plus" circle @click="addPersonnel(1)"/>  
                </div>
            </div>
            <div class="row wrap" v-if="msg.personnelList1.length>=5">
                <div class="NewSharerBox q-mr-md q-mb-md" v-for="(item,index) in msg.personnelList1">
                    <el-icon color="#F26060" class="NewSharerDel pointer" size="14" @click="delPersonnel(index,1)"><RemoveFilled /></el-icon>
                    <el-button size="large" color="#599DFA" circle class=""><span class="colorF">{{item.name.slice(0,2)}}</span></el-button>
                </div>
            </div>
        </div>
        <div class="q-py-lg">
            <div class="fz16 row flex-between">
                <span class="microsoft text-weight-bold700 q-mb-lg">项目需求：</span>
                <div class="row nowrap">
                    <div class="row nowrap" v-if="msg.personnelList2.length<5">
                        <div class="NewSharerBox q-mr-md q-mb-md" v-for="(item,index) in msg.personnelList2">
                            <el-icon color="#F26060" class="NewSharerDel pointer" size="14" @click="delPersonnel(index,2)"><RemoveFilled /></el-icon>
                            <el-button size="large" color="#599DFA" circle class=""><span class="colorF">{{item.name.slice(0,2)}}</span></el-button>
                        </div>
                    </div>
                    <el-button size="large" icon="Plus" circle @click="addPersonnel(2)"/>  
                </div>
            </div>
            <div class="row wrap" v-if="msg.personnelList2.length>=5">
                <div class="NewSharerBox q-mr-md q-mb-md" v-for="(item,index) in msg.personnelList2">
                    <el-icon color="#F26060" class="NewSharerDel pointer" size="14" @click="delPersonnel(index,2)"><RemoveFilled /></el-icon>
                    <el-button size="large" color="#599DFA" circle class=""><span class="colorF">{{item.name.slice(0,2)}}</span></el-button>
                </div>
            </div>
        </div>
        <div class="q-py-lg">
            <div class="fz16 row flex-between">
                <span class="microsoft text-weight-bold700 q-mb-lg">行程制作：</span>
                <div class="row nowrap">
                    <div class="row nowrap" v-if="msg.personnelList3.length<5">
                        <div class="NewSharerBox q-mr-md q-mb-md" v-for="(item,index) in msg.personnelList3">
                            <el-icon color="#F26060" class="NewSharerDel pointer" size="14" @click="delPersonnel(index,3)"><RemoveFilled /></el-icon>
                            <el-button size="large" color="#599DFA" circle class=""><span class="colorF">{{item.name.slice(0,2)}}</span></el-button>
                        </div>
                    </div>
                    <el-button size="large" icon="Plus" circle @click="addPersonnel(3)"/>  
                </div>
            </div>
            <div class="row wrap" v-if="msg.personnelList3.length>=5">
                <div class="NewSharerBox q-mr-md q-mb-md" v-for="(item,index) in msg.personnelList3">
                    <el-icon color="#F26060" class="NewSharerDel pointer" size="14" @click="delPersonnel(index,3)"><RemoveFilled /></el-icon>
                    <el-button size="large" color="#599DFA" circle class=""><span class="colorF">{{item.name.slice(0,2)}}</span></el-button>
                </div>
            </div>
        </div>
        <div class="q-py-lg">
            <div class="fz16 row flex-between">
                <span class="microsoft text-weight-bold700 q-mb-lg">费用核算：</span>
                <div class="row nowrap">
                    <div class="row nowrap" v-if="msg.personnelList4.length<5">
                        <div class="NewSharerBox q-mr-md q-mb-md" v-for="(item,index) in msg.personnelList4">
                            <el-icon color="#F26060" class="NewSharerDel pointer" size="14" @click="delPersonnel(index,4)"><RemoveFilled /></el-icon>
                            <el-button size="large" color="#599DFA" circle class=""><span class="colorF">{{item.name.slice(0,2)}}</span></el-button>
                        </div>
                    </div>
                    <el-button size="large" icon="Plus" circle @click="addPersonnel(4)"/>  
                </div>
            </div>
            <div class="row wrap" v-if="msg.personnelList4.length>=5">
                <div class="NewSharerBox q-mr-md q-mb-md" v-for="(item,index) in msg.personnelList4">
                    <el-icon color="#F26060" class="NewSharerDel pointer" size="14" @click="delPersonnel(index,4)"><RemoveFilled /></el-icon>
                    <el-button size="large" color="#599DFA" circle class=""><span class="colorF">{{item.name.slice(0,2)}}</span></el-button>
                </div>
            </div>
        </div>
        <div class="q-py-lg">
            <div class="fz16 row flex-between">
                <span class="microsoft text-weight-bold700 q-mb-lg">行程报价：</span>
                <div class="row nowrap">
                    <div class="row nowrap" v-if="msg.personnelList5.length<5">
                        <div class="NewSharerBox q-mr-md q-mb-md" v-for="(item,index) in msg.personnelList5">
                            <el-icon color="#F26060" class="NewSharerDel pointer" size="14" @click="delPersonnel(index,5)"><RemoveFilled /></el-icon>
                            <el-button size="large" color="#599DFA" circle class=""><span class="colorF">{{item.name.slice(0,2)}}</span></el-button>
                        </div>
                    </div>
                    <el-button size="large" icon="Plus" circle @click="addPersonnel(5)"/>  
                </div>
            </div>
            <div class="row wrap" v-if="msg.personnelList5.length>=5">
                <div class="NewSharerBox q-mr-md q-mb-md" v-for="(item,index) in msg.personnelList5">
                    <el-icon color="#F26060" class="NewSharerDel pointer" size="14" @click="delPersonnel(index,5)"><RemoveFilled /></el-icon>
                    <el-button size="large" color="#599DFA" circle class=""><span class="colorF">{{item.name.slice(0,2)}}</span></el-button>
                </div>
            </div>
        </div>
    </el-scrollbar>

    <el-drawer v-model="datas.personnelShow">
        <template #header>
            <div class="row items-center flex-between">
                <span class="microsoft fz24 color0">选择成员</span>
                <el-button class="q-mr-lg" type="primary" color="#fff" plain @click="confirmator">确 认</el-button>
            </div>
        </template>
        <template #default>
          <personnel></personnel>
        </template>
    </el-drawer>
   
    
</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 { RemoveFilled } from '@element-plus/icons-vue';
    import personnel from './personnel'

    const loading = ref(true)
    const allPeoples = ref<any[]>([])

    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 datas = reactive({
        personnelShow: false,
        keyword: ''
    })
    
    const props = defineProps({
        addDialogFormVisible: {
            type: Boolean,
            default: false,
        },
    })

    const ruleFormRef = ref<FormInstance>()
    const rules = reactive<FormRules<RuleForm>>({
        Name: [
            { required: true, message: '请输入项目标题', trigger: 'blur' },
            { min: 1, max: 500, message: '', trigger: 'blur' },
        ]
    })
   
    const delPersonnel = (index:Number,type:Number) => {
        if(type==1) msg.value.personnelList1.splice(index,1)
        if(type==2) msg.value.personnelList2.splice(index,1)
        if(type==3) msg.value.personnelList3.splice(index,1)
        if(type==4) msg.value.personnelList4.splice(index,1)
        if(type==5) msg.value.personnelList5.splice(index,1)
    }

    const confirmator = () => {
        datas.personnelShow = false
    }
    const addPersonnel = (type:Number) => {
        msg.value.personnelType = type
        datas.personnelShow = true
    }
    const closed = () => {
        
    }
    
    watch(()=>form.value,(o,n)=>{
        search.value.form = form.value
    },{
        deep:true
    })
    watch(()=>msg.value,(o,n)=>{
        search.value.form = msg.value
    },{
        deep:true
    })
    watch(()=>props.addDialogFormVisible,(o,n)=>{
        ruleFormRef.value.clearValidate()
        ruleFormRef.value.resetFields()
   })
    onMounted(()=>{
        
    })
</script>
<style lang="scss" scoped>
.NewSharerBox{
    width: 40px;
    height: 40px;
    position: relative;
}
.NewSharerDel{
    position: absolute;
    top: -5px;
    right: 0px
}

</style>