<template>
    <el-cascader v-loading="loading" :collapse-tags="props.multiple" collapse-tags-tooltip :clearable="clearable" :placeholder="type == 3? '请选择部门' : '请选择公司'"
        :props="{ value: 'treeId', label: 'title', multiple: props.multiple }" v-model="orgId"
                 :style="`width: ${props.inputWidth ? props.inputWidth + 'px' : '100%'};height:${props.inputHeight ? props.inputHeight + 'px' : '100%'};`"
                 :options="options" @change="change"></el-cascader>

</template>



<script setup name="SelectUser" lang="ts">
import {listDept} from "@/api/system/dept";
import {storeToRefs} from "pinia";
import {useAllUserStore} from "@/store/modules/allUser";
import {useAllUserCache} from '@/hooks/web/useAllUser'
const allUserStore = useAllUserStore()
const {queryAllUser, queryAllCompany, queryAllDept} = useAllUserCache()
const emits = defineEmits(['change'])
//级联数据
const options = ref([])

const orgId = ref([])

const orgIdValue = defineModel<string | number | Array<string | number>>('modelValue', { required: true })
const router = useRouter();


//定义props
const props = defineProps({
    type: {
        type: [Number, String],
        default: '3' //20公司  30 部门
    },
    authorty: {
        type: Boolean,
        default: false
    },
    multiple: {
        type: Boolean,
        default: false
    },
    arrayToString: {
        type: Boolean,
        default: false
    },

    inputWidth: {
        type: Number,
    },
    inputHeight: {
        type: Number,
    },
    clearable: {
        type: Boolean,
        default: false
    },
})
const loading = ref(false)
watch(() => props.type, async (value: any) => {
    orgId.value = value
    init()
})
watch(() => orgIdValue.value, async (value: any) => {
    if(!value){
        orgId.value = null
        return
    }
    //判断是否是空数组
    if(Array.isArray(value) && value.length == 0){
        orgId.value = []
        return
    }
    exchangeId()

})

const exchangeId = ()=> {
    let value = orgIdValue.value
    if (props.type == '3') {
        if(Array.isArray(value)) {
            orgId.value = value.map(item => "30-" + item)
            return
        }
        if(typeof value == 'string'){
            orgId.value = ["30-" + value]
            return
        }
    } else {
        if(Array.isArray(value)){
            orgId.value = value.map(item => "20-" + item)
            return
        }
        if(typeof value == 'string'){
            orgId.value = ["20-" + value]
            return
        }
    }
}

const menuId = computed(()=>{
    if(props.authorty){
        return router.currentRoute.value?.meta?.menuId
    }
    return ''
})

const init = async ()=>{
    let types: number[] = []
    loading.value = true
    exchangeId()
    if(props.type == '3'){

        if( allUserStore.getAllDept().length <= 0 || props.authorty){
            types = [10, 20, 30]

            const res = await queryAllDept(types, menuId.value )
            options.value = res[0].children
            loading.value = false
            return
        }
        loading.value = false
        options.value = allUserStore.getAllDept()[0].children
    }else{

        if(allUserStore.getAllCompany().length <= 0  || props.authorty){
            types = [10, 20]
            const res = await queryAllCompany(types, menuId.value)
            options.value = res[0].children
            loading.value = false
            return
        }
        loading.value = false
        options.value = allUserStore.getAllCompany()
    }
}

const change = (v) => {
    if(!props.multiple) {
        let data = orgId.value.filter(item => {
            let str: string[] = item.split('-')
            if(str[0] == props.type){
                orgId.value = item.treeId
            }
            return item
        })
        let str: string[] = data[data.length - 1].split('-')
        orgIdValue.value = str[1]
        emits('change', orgIdValue.value)
    }else {
        let datas = []
        orgId.value.map(org => {
            let str: string[] = org[org.length - 1].split('-')
            datas.push(str[1])
        })
        orgIdValue.value = datas
        emits('change', orgIdValue.value)
    }

}

onMounted(async () => {
    init()
})
</script>

<style scoped>
.sle-user-el-input {
    display: flex;
    overflow-y: auto;

    /*flex-grow: 1;*/
    align-items: center;
    justify-content: flex-start;
    padding: 1px 11px;
    flex-wrap: wrap;
    background-color: var(--el-input-bg-color, var(--el-fill-color-blank));
    background-image: none;

    border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
    transition: var(--el-transition-box-shadow);
    box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
    position: relative;
}

</style>
