<template>
    <div>
        <el-card>
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="处理意见" name="first" class="demo-tabs-a">
                    <div>当前步骤： 发起工单</div>
                    <div>处理动作： 发起流程</div>
                    <div>送审步骤： 技术处理</div>
                    <div class="userlist">
                        <div>指定处理人：</div>
                        <div v-for="item in userlist1" class="userlist-con">
                            <img src="@/assets/images/no_perms.png" alt="" />
                            {{ item.name }}
                        </div>
                    </div>
                    <el-form-item label="处理意见" prop="content">
                        <el-input v-model="content" class="w-[1280px]" clearable placeholder="请输入处理意见" type="textarea" />
                    </el-form-item>

                    <div class="flex user">
                        <div>流程抄送：</div>
                        <div>{{ userlist1.length }}人</div>
                        <div @click="dialogVisible = true"><img src="@/assets/images/no_perms.png" alt="" /></div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="流程日志" name="second">暂无流程日志！</el-tab-pane>
            </el-tabs>
        </el-card>

        <el-dialog v-model="dialogVisible" title="人员选择器" width="30%" :before-close="handleClose">
            <div>
                <el-radio-group v-model="isCollapse" style="margin-bottom: 20px" @change="clckuser">
                    <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-radio-group>

                <div v-if="isCollapse == 1" style="margin-bottom: 20px">
                    <el-input v-model="content" clearable placeholder="搜索人员" />
                    <div style="margin-top: 20px">
                        <el-checkbox-group v-model="vallist">

                            <div v-for="(item, i) in uesrlist" :key="i" class="radiolist">
                                <el-checkbox :label="item">
                                    <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>
                            </div>
                        </el-checkbox-group>
                    </div>
                </div>
                <div v-if="isCollapse == 2">
                    <div v-if="isshow">
                        <div v-for="(item, i) in deparmetlist" :key="i">
                            <div class="lad">{{ i }}</div>
                            <div class="lads">
                                <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>
                    <div v-else>


                        <!-- <el-input v-model="content" clearable placeholder="搜索人员" style="margin-bottom: 20px;" /> -->

                        <el-checkbox-group v-model="vallist">
                            <div v-for="(item, i) in deparmetlist1" :key="i" class="radiolist">
                                <el-checkbox :label="item">
                                    <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>
                            </div>
                        </el-checkbox-group>
                    </div>

                </div>
                <div v-if="isCollapse == 3">
                    <div v-if="isshow1">
                        <div class="lads ">
                            <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>
                    <div v-else>
                        <!-- <el-input v-model="content" clearable placeholder="搜索人员" style="margin-bottom: 20px;" /> -->

                        <el-checkbox-group v-model="vallist">

                            <div v-for="(item, i) in jobslist1" :key="i" class="radiolist">
                                <el-checkbox :label="item">
                                    <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>
                            </div>
                        </el-checkbox-group>
                    </div>
                </div>

            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="userclick"> {{ vallist.length > 0 ? '已选' : '未选' }}
                        <text v-if="vallist.length > 0">{{ vallist.length }}</text> </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import { computed, nextTick, onMounted, reactive, shallowRef, watch } from 'vue'
import { getAdminsByAll, getAllDept, getAllJobs, getAdminsByDept, getAdminsByJob } from '@/api/common'
const active = ref(0);

const isCollapse = ref(1);
const props = defineProps({
    list: {
        type: Array
    }
})
console.log(props.list)
// const list = reactive([])
// list.splice(0, list.length, ...props.list)
const activeName = ref('first')
const content = ref('')
const userlist1 = reactive([{ name: 1 }, { name: 1 }, { name: 1 }, { name: 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 vallist = ref([])
const companylist = reactive([
    {
        name1: "哈哈公司",
        name2: "2222",
    },
    {
        name1: "哈哈公司",
        name2: "2222",
    },
    {
        name1: "哈哈公司",
        name2: "2222",
    },
]);
const next = () => {
    if (active.value++ > 2) active.value = 0;
};

//人员选择器切换点击
const clckuser = (e) => {

    isshow.value = true
    isshow1.value = true
}

//获取选择的数据
const userclick = () => {
    dialogVisible.value = false
    // console.log(vallist.value, 9999999999999)
    userlist1.forEach((user, index) => {
        Object.assign(user, vallist.value);
    });

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

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

    })
}

//获取岗位

const Jobs = () => {
    getAllJobs().then((res) => {
        console.log(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
        }

    })
}


onMounted(() => {
    getlist()
    deparmet()
    Jobs()
})

const dialogVisible = ref(false);
const handleClose = (done: () => void) => {
    done();
};

</script>

<style lang="scss" scoped>
.app-main {
    background-color: #fff !important;
}

.demo-tabs-a {
    div {
        margin: 10px 0;
    }
}

.radiolist {
    height: 50px;
    // border: 1px solid red;
    margin-bottom: 5px;

    .radio-con {
        display: flex;

        width: 500px;

        .radioa {
            display: flex;
            justify-items: center;
            align-items: center;

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

}

.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%;
    }
}


.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;
    }
}

.lads {
    padding: 10px 0;


    div {
        margin: 10px 0;
    }

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