<template>
    <div class="edit-popup">
        <el-dialog v-model="dialogVisible" title="人员选择器" width="600px" :before-close="handleClose">
            <div>
                <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
                    <el-radio-button :label="1">全部人员</el-radio-button>
                    <el-radio-button :label="2">按部门筛选</el-radio-button>
                    <el-radio-button :label="3">按岗位筛选</el-radio-button>
                    <el-button class="ml-[200px]" v-show="isCollapse != 1 && (!isshow || !isshow1)"
                        @click="(isshow = true), (isshow1 = true)">返回</el-button>
                </el-radio-group>
                <div v-if="type == 1">
                    <div v-if="isCollapse == 1" style="margin-bottom: 20px">
                        <div style="margin-top: 20px">
                            <el-radio-group v-model="radionum">
                                <el-radio :label="item" v-for="(item, i) in uesrlist" :key="i" style="margin-bottom: 40px;">
                                    <div class="radio-con">
                                        <div class="radioa">
                                            <img :src="item.avatar" alt="" />
                                        </div>
                                        <div class="radiob">
                                            <div class="radiob_a">{{ item.name }}</div>
                                            <div class="radiob_b">
                                                <text v-if="item.org_name.length > 0">{{ item.org_name }}</text>
                                                <text v-if="item.dept_name.length > 0">/{{ item.dept_name }}</text>
                                                <text v-if="item.job_name.length > 0">/{{ item.job_name }}</text>

                                            </div>
                                        </div>
                                    </div>
                                </el-radio><br />
                            </el-radio-group>
                        </div>
                    </div>
                    <div v-if="isCollapse == 2">
                        <!-- 返回上一级别 -->
                        <div v-if="isshow">
                            <div class="lad" v-for="(item, i) in deparmetlist" :key="i">
                                <div class="lad">{{ i }}</div>
                                <div class="flex " v-for="(items, k) in item" style="justify-content: space-between;"
                                    @click="deparmetclck(items)">
                                    <div>{{ items.name }}</div>
                                    <div class="Collapsebj">{{ items.admin_num }}</div>
                                </div>
                            </div>
                        </div>
                        <div v-else>
                            <el-radio-group v-model="radionum">
                                <el-radio :label="item" v-for="(item, i) in deparmetlist1" :key="i"
                                    style="margin-bottom: 20px;">
                                    <div class="radio-con">
                                        <div class="radioa">
                                            <img :src="item.avatar" alt="" />
                                        </div>
                                        <div class="radiob">
                                            <div class="radiob_a">{{ item.name }}</div>
                                            <div class="radiob_b">
                                                <text v-if="item.org_name.length > 0">{{ item.org_name }}</text>
                                                <text v-if="item.dept_name.length > 0">/{{ item.dept_name }}</text>
                                                <text v-if="item.job_name.length > 0">/{{ item.job_name }}</text>
                                            </div>
                                        </div>
                                    </div>
                                </el-radio><br />
                            </el-radio-group>
                        </div>
                    </div>
                    <div v-if="isCollapse == 3">
                        <div class="lad " v-if="isshow1">
                            <div class="flex " v-for="(item, j) in jobslist" :key="j"
                                style="justify-content: space-between;" @click="gwclck(item)">
                                <div>{{ item.name }}</div>
                                <div class="Collapsebj">{{ item.admin_num }}</div>
                            </div>
                        </div>
                        <div v-else>
                            <el-radio-group v-model="radionum">
                                <el-radio :label="item" v-for="(item, i) in jobslist1" :key="i"
                                    style="margin-bottom: 20px;">
                                    <div class="radio-con">
                                        <div class="radioa">
                                            <img :src="item.avatar" alt="" />
                                        </div>
                                        <div class="radiob">
                                            <div class="radiob_a">{{ item.name }}</div>
                                            <div class="radiob_b">
                                                <text v-if="item.org_name.length > 0">{{ item.org_name }}</text>
                                                <text v-if="item.dept_name.length > 0">/{{ item.dept_name }}</text>
                                                <text v-if="item.job_name.length > 0">/{{ item.job_name }}</text>

                                            </div>
                                        </div>
                                    </div>
                                </el-radio><br />
                            </el-radio-group>
                        </div>
                    </div>

                </div>
                <div v-else>
                    <div v-if="isCollapse == 1" style="margin-bottom: 20px">
                        <div style="margin-top: 20px">
                            <el-checkbox-group v-model="radiolist">
                                <el-checkbox :label="item" v-for="(item, i) in uesrlist" :key="i"
                                    style="margin-bottom: 20px;">
                                    <div class="radio-con">
                                        <div class="radioa">
                                            <img :src="item.avatar" alt="" />
                                        </div>
                                        <div class="radiob">
                                            <div class="radiob_a">{{ item.name }}</div>
                                            <div class="radiob_b">
                                                <text v-if="item.org_name.length > 0">{{ item.org_name }}</text>
                                                <text v-if="item.dept_name.length > 0">/{{ item.dept_name }}</text>
                                                <text v-if="item.job_name.length > 0">/{{ item.job_name }}</text>
                                            </div>
                                        </div>
                                    </div>
                                </el-checkbox><br />
                            </el-checkbox-group>
                        </div>
                    </div>
                    <div v-if="isCollapse == 2">
                        <div v-if="isshow">
                            <div class="lad" v-for="(item, i) in deparmetlist" :key="i">
                                <div class="lad">{{ i }}</div>
                                <div class="flex " v-for="(items, k) in item" style="justify-content: space-between;"
                                    @click="deparmetclck(items)">
                                    <div>{{ items.name }}</div>
                                    <div class="Collapsebj">{{ items.admin_num }}</div>
                                </div>
                            </div>
                        </div>
                        <div v-else>
                            <el-checkbox-group v-model="radiolist">
                                <el-checkbox :label="item" v-for="(item, i) in deparmetlist1" :key="i"
                                    style="margin-bottom: 20px;">
                                    <div class="radio-con">
                                        <div class="radioa">
                                            <img :src="item.avatar" alt="" />
                                        </div>
                                        <div class="radiob">
                                            <div class="radiob_a">{{ item.name }}</div>
                                            <div class="radiob_b">
                                                <text v-if="item.org_name.length > 0">{{ item.org_name }}</text>
                                                <text v-if="item.dept_name.length > 0">/{{ item.dept_name }}</text>
                                                <text v-if="item.job_name.length > 0">/{{ item.job_name }}</text>
                                            </div>
                                        </div>
                                    </div>
                                </el-checkbox><br />
                            </el-checkbox-group>
                        </div>
                    </div>
                    <div v-if="isCollapse == 3">
                        <div class="lad " v-if="isshow1">
                            <div class="flex " v-for="(item, j) in jobslist" :key="j"
                                style="justify-content: space-between;" @click="gwclck(item)">
                                <div>{{ item.name }}</div>
                                <div class="Collapsebj">{{ item.admin_num }}</div>
                            </div>
                        </div>
                        <div v-else>
                            <el-checkbox-group v-model="radiolist">
                                <el-checkbox :label="item" v-for="(item, i) in jobslist1" :key="i"
                                    style="margin-bottom: 20px;">
                                    <div class="radio-con">
                                        <div class="radioa">
                                            <img :src="item.avatar" alt="" />
                                        </div>
                                        <div class="radiob">
                                            <div class="radiob_a">{{ item.name }}</div>
                                            <div class="radiob_b">
                                                <text v-if="item.org_name.length > 0">{{ item.org_name }}</text>
                                                <text v-if="item.dept_name.length > 0">/{{ item.dept_name }}</text>
                                                <text v-if="item.job_name.length > 0">/{{ item.job_name }}</text>

                                            </div>
                                        </div>
                                    </div>
                                </el-checkbox><br />
                            </el-checkbox-group>
                        </div>
                    </div>
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="userclick" v-if="type == 1">确认</el-button>
                    <el-button type="primary" @click="userclick" v-else> {{ radiolist.length > 0 ? '已选' : '未选' }}
                        <text v-if="radiolist.length > 0">{{ radiolist.length }}</text></el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup name="projectPreSalesMembersEdit">
import { reactive } from 'vue'
import { getAdminsByAll, getAllDept, getAllJobs, getAdminsByDept, getAdminsByJob } from '@/api/common'
import type { PropType } from 'vue'
import { defineEmits } from "vue"
const leixin = ref('0')
const props = defineProps({
    type: {
        type: String || Number,//1:单选 2.多选
        default: () => ({})
    }
})
const emits = defineEmits(['confirm'])

const dialogVisible = ref(false)
const isCollapse = ref(1);
const uesrlist = reactive([])
const deparmetlist = reactive({})
const deparmetlist1 = reactive([])
const jobslist = reactive({})
const jobslist1 = reactive([])
const isshow = ref(true);
const isshow1 = ref(true);
const radiolist = ref([])
const radionum = ref([])

// 获取全部人员
const getlist = () => {
    getAdminsByAll().then((res) => {
        Object.assign(uesrlist, res)
    })
}

//获取所有部门
const deparmet = () => {
    getAllDept().then((res) => {
        Object.assign(deparmetlist, res)
    })
}
//获取部门下的人员
const deparmetclck = (item: { id: any }) => {
    getAdminsByDept({ 'dept_id': item.id }).then((res) => {
        if (res.length > 0) {
            Object.assign(deparmetlist1, res)
            isshow.value = false
        }

    })
}

//获取岗位

const Jobs = () => {
    getAllJobs().then((res) => {
        Object.assign(jobslist, res)
    })
}

//获取岗位下的人员
const gwclck = (item: { id: any }) => {

    getAdminsByJob({ 'job_id': item.id }).then((res) => {
        if (res.length > 0) {
            Object.assign(jobslist1, res)
            isshow1.value = false
        }

    })
}


//打开弹窗
const open = (e: any) => {
    getlist()
    deparmet()
    Jobs()
    leixin.value = e
    dialogVisible.value = true

}
//获取选择的数据
const userclick = () => {
    dialogVisible.value = false
    if (props.type == 1) {
        emits("confirm", radionum.value);
    } else {
        emits("confirm", radiolist.value);
    }

}

defineExpose({
    open,
    userclick
})

</script>

<style lang="scss">
.userlist {
    display: flex;

    img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }

    text-align: center;

    .userlist-con {
        margin-right: 10px;
    }
}

.user {
    img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }
}

.radio-con {
    display: flex;
    width: 500px;
    align-items: center;

    .radioa {
        img {
            margin-right: 20px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }
    }

    .radiob {
        .radiob_a {
            margin-bottom: 10px;
            margin-top: 3px;

        }

        .radiob_b {}

    }
}

.lad {
    padding: 10px 0;
    border-bottom: 1px solid #f7f7f7;

    div {
        margin: 10px 0;
    }

    .Collapsebj {
        background-color: #3e8ef7;
        height: 20px;
        width: 20px;
        line-height: 20px;
        text-align: center;
        border-radius: 6px;
        color: #f7f7f7;

    }
}
</style>