<template>
    <div class="edit-popup">
        <popup ref="popupRef" :title="popupTitle" :async="true" width="550px" @confirm="handleSubmit" @close="handleClose">
            <el-form ref="formRef" :model="formData" label-width="90px" :rules="formRules">
                <el-form-item label="项目名称" prop="project_id"
                    :rules="[{ required: true, message: '不可为空', trigger: 'blur' }]">
                    <el-input v-model="project_name" @click="showDialog = true" clearable placeholder="点击选择项目" />
                </el-form-item>
                <el-form-item label="项目编码" prop="project_id"
                    :rules="[{ required: true, message: '不可为空', trigger: 'blur' }]">
                    <el-input v-model="project_code" disabled clearable placeholder="系统自动填写" />
                </el-form-item>
                <el-form-item label="客户名称" prop="project_id"
                    :rules="[{ required: true, message: '不可为空', trigger: 'blur' }]">
                    <el-input v-model="custom_name" disabled @click="showDialog = true" clearable placeholder="系统自动填写" />
                </el-form-item>
                <el-form-item label="技术人员" prop="technician_ids">
                    <!-- <el-input v-model="technician" clearable placeholder="请输入技术人员" @click="userone('1')" /> -->
                    <!-- <el-input placeholder="请输入技术人员" v-model="technician" @click="userone('1')">
                    </el-input> -->
                    <el-button @click="userone('1')">添加</el-button>

                    <div style="  display: block;width: 100%;margin-top: 10px;">
                        <el-tag v-for="(tag, index) in technician" :key="index" closable @close="removeTag1(index)"
                            style="margin-right: 10px;">
                            {{ tag.name }}
                        </el-tag>
                    </div>
                </el-form-item>
                <el-form-item label="商务人员" prop="business_people_ids">
                    <!-- <el-input v-model="business_people" clearable placeholder="请输入商务人员" @click="userone('2')" /> -->
                    <el-button @click="userone('2')">添加</el-button>

                    <div style="  display: block;width: 100%;margin-top: 10px;">

                        <el-tag v-for="(tag, index) in business_people" :key="index" closable @close="removeTag2(index)"
                            style="margin-right: 10px;">
                            {{ tag.name }}
                        </el-tag>
                    </div>

                </el-form-item>
                <el-form-item label="跨部门人员" prop="cross_departmental_personnel_ids">
                    <!-- <el-input v-model="cross_departmental_personnel" clearable placeholder="请输入跨部门人员" @click="userone('3')" /> -->
                    <el-button @click="userone('3')">添加</el-button>

                    <div style="  display: block;width: 100%;margin-top: 10px;">

                        <el-tag v-for="(tag, index) in cross_departmental_personnel" :key="index" closable
                            @close="removeTag3(index)" style="margin-right: 10px;">
                            {{ tag.name }}
                        </el-tag>
                    </div>

                </el-form-item>
                <el-dialog v-model="showDialog" title="选择项目" width="70%">
                    <projectTable @customEvent="customEvent"></projectTable>

                </el-dialog>
            </el-form>
        </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-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="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">
                                            <!-- {{ item.org_name }}/{{ item.dept_name }}/{{ item.job_name }} -->
                                            <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-input v-model="content" clearable placeholder="搜索人员" style="margin-bottom: 20px;" /> -->

                        <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-input v-model="content" clearable placeholder="搜索人员" style="margin-bottom: 20px;" /> -->
                        <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">
                                            <!-- {{ item.org_name }}/{{ item.dept_name }}/{{ item.job_name }} -->
                                            <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>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="userclick"> {{ 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 type { FormInstance } from 'element-plus'
import Popup from '@/components/popup/index.vue'
import projectTable from "@/components/project/index.vue"
import { computed, nextTick, onMounted, reactive, shallowRef, watch } from 'vue'
import { apiProjectPreSalesMembersAdd, apiProjectPreSalesMembersEdit, apiProjectPreSalesMembersDetail } from '@/api/project_pre_sales_members'
import { getAdminsByAll, getAllDept, getAllJobs, getAdminsByDept, getAdminsByJob } from '@/api/common'
import { timeFormat } from '@/utils/util'
import feedback from '@/utils/feedback'
import type { PropType } from 'vue'
const leixin = ref('0')
defineProps({
    dictData: {
        type: Object as PropType<Record<string, any[]>>,
        default: () => ({})
    }
})

const dialogVisible = ref(false)
const active = ref(0);

const isCollapse = ref(1);
const emit = defineEmits(['success', 'close'])
const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const mode = ref('add')
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 cross_departmental_personnel = ref([])
const technician
    = ref([])
const business_people
    = ref([])

const custom_name = ref('')
const project_name = ref('')
const project_code = ref('')

const showDialog = ref(false)
const customEvent = (e: any) => {
    formData.project_id = e.id;
    project_name.value = e.name;
    project_code.value = e.project_code;
    custom_name.value = e.custom_name;
    showDialog.value = false;
};
// 获取全部人员
const getlist = () => {
    getAdminsByAll().then((res) => {
        // console.log(res)
        Object.assign(uesrlist, res)
    })
}

//获取所有部门
const deparmet = () => {
    getAllDept().then((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) => {
        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 userone = (e: any) => {
    leixin.value = e
    if (mode.value != 'add') {
        if (e == 1) {
            const arry4 = [...technician.value]
            radiolist.value = arry4
        } else if (e == 2) {
            const arry4 = [...business_people.value]
            radiolist.value = arry4
        } else {
            const arry4 = [...cross_departmental_personnel.value]
            radiolist.value = arry4
        }
    }
    dialogVisible.value = true
}

//获取选择的数据
const userclick = () => {
    if (radiolist.value.length > 0) {
        if (leixin.value === '1') {
            // 如果 leixin 的值为 1，则执行这里的代码块
            formData.technician_ids = radiolist.value.map((item) => item.id).toString()
            const newArray = radiolist.value.map((item) => item)

            // if (!technician.value.some(elem => newArray.some(newElem => elem === newElem.id))) {
            //     // 如果不存在，则将 newElem 添加到 cont 数组中
            //     technician.value.push(...newArray);
            // }
            newArray.forEach(newElem => {
                if (!technician.value.some(elem => elem.id === newElem.id)) {
                    // 如果不存在，则将 newElem 添加到 newArray1 数组中
                    technician.value.push(newElem);
                }
            });
        } else if (leixin.value === '2') {
            // 如果 leixin 的值为 2，则执行这里的代码块
            formData.business_people_ids = radiolist.value.map((item) => item.id).toString()
            const newArray = radiolist.value.map((item) => item)
            newArray.forEach(newElem => {
                if (!business_people.value.some(elem => elem.id === newElem.id)) {
                    // 如果不存在，则将 newElem 添加到 newArray1 数组中
                    business_people.value.push(newElem);
                }
            });
        } else {
            // 如果 leixin 的值不是 1 或 2，则执行这里的代码块
            formData.cross_departmental_personnel_ids = radiolist.value.map((item) => item.id).toString()
            const newArray = radiolist.value.map((item) => item)
            newArray.forEach(newElem => {
                if (!cross_departmental_personnel.value.some(elem => elem.id === newElem.id)) {
                    // 如果不存在，则将 newElem 添加到 newArray1 数组中
                    cross_departmental_personnel.value.push(newElem);
                }
            });
        }

        dialogVisible.value = false
        radiolist.value = []
    } else {
        feedback.msgError('请重新选择')
    }
}
//删除选择数据

const removeTag1 = (tag) => {

    technician.value.splice(tag, 1)
    if (technician.value.length >= 0) {
        formData.technician_ids = technician.value.map((item) => item.id).toString()
    }
    console.log(formData)
}

const removeTag2 = (tag) => {
    business_people.value.splice(tag, 1)
    if (business_people.value.length >= 0) {
        formData.business_people_ids = business_people.value.map((item) => item.id).toString()
    }
}

const removeTag3 = (tag) => {
    cross_departmental_personnel.value.splice(tag, 1)
    if (cross_departmental_personnel.value.length >= 0) {
        formData.cross_departmental_personnel_ids = cross_departmental_personnel.value.map((item) => item.id).toString()
    }
}

// 弹窗标题
const popupTitle = computed(() => {
    return mode.value == 'edit' ? '编辑售前项目成员' : '新增售前项目成员'
})

// 表单数据
const formData = reactive({
    id: '',
    project_id: '',
    technician_ids: '',
    business_people_ids: '',
    cross_departmental_personnel_ids: '',
})


// 表单验证
const formRules = reactive<any>({

})


// 获取详情
const setFormData = async (data: Record<any, any>) => {

    setTimeout(() => {
        if (data.technician_ids && data.technician_ids.length > 0) {
            if (data.technician_ids.includes(",")) {
                const arry1 = data.technician_ids.split(',')
                const arry2 = uesrlist
                const arry3 = arry2.filter(obj => arry1.includes(obj.id.toString()))
                technician.value = arry3
            } else {
                const arry1 = [data.technician_ids]
                const arry2 = uesrlist
                const arry3 = arry2.filter(obj => arry1.includes(obj.id.toString()))
                technician.value = arry3
            }
        }
        if (data.business_people_ids && data.business_people_ids.length > 0) {
            if (data.business_people_ids.includes(",")) {
                const arry1 = data.business_people_ids.split(',')
                const arry2 = uesrlist
                const arry3 = arry2.filter(obj => arry1.includes(obj.id.toString()))
                business_people.value = arry3
            } else {
                const arry1 = [data.business_people_ids]
                const arry2 = uesrlist
                const arry3 = arry2.filter(obj => arry1.includes(obj.id.toString()))
                business_people.value = arry3
            }
        }
        if (data.cross_departmental_personnel_ids && data.cross_departmental_personnel_ids.length > 0) {
            if (data.cross_departmental_personnel_ids.includes(",")) {
                const arry1 = data.cross_departmental_personnel_ids.split(',')
                const arry2 = uesrlist
                const arry3 = arry2.filter(obj => arry1.includes(obj.id.toString()))
                cross_departmental_personnel.value = arry3
            } else {
                const arry1 = [data.cross_departmental_personnel_ids]
                const arry2 = uesrlist
                const arry3 = arry2.filter(obj => arry1.includes(obj.id.toString()))
                cross_departmental_personnel.value = arry3
            }
        }
        // const arry4 = [...cross_departmental_personnel.value, ...business_people.value, ...technician.value]
        // radiolist.value = arry4
    },
        1000)


    // technician.value = data.technician
    // business_people.value = data.business_people
    // cross_departmental_personnel.value = data.cross_departmental_personnel

    for (const key in formData) {
        if (data[key] != null && data[key] != undefined) {
            //@ts-ignore
            formData[key] = data[key]
        }
    }

    project_name.value = data.project_name;
    project_code.value = data.project_code;
    custom_name.value = data.custom_name;
}

const getDetail = async (row: Record<string, any>) => {
    const data = await apiProjectPreSalesMembersDetail({
        id: row.id
    })
    setFormData(data)
}


// 提交按钮
const handleSubmit = async () => {
    await formRef.value?.validate()
    const data = { ...formData, }
    mode.value == 'edit'
        ? await apiProjectPreSalesMembersEdit(data)
        : await apiProjectPreSalesMembersAdd(data)
    popupRef.value?.close()
    emit('success')
}

//打开弹窗
const open = (type = 'add') => {
    getlist()
    deparmet()
    Jobs()
    mode.value = type
    popupRef.value?.open()
}

// 关闭回调
const handleClose = () => {
    emit('close')
}



defineExpose({
    open,
    setFormData,
    getDetail
})
</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;

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