<script setup>
import {ref} from 'vue'
import apiReportEn from '@/api/reportEn'

const props=defineProps({
    defaultVal:null,
    noReset:false,
    rootClassifyDisabled:false,//顶级分类是否要判断禁用
    firstClassifyDisabled:false,//一级分类是否要判断禁用
})

const emits=defineEmits(['close','confirm'])

const list=ref([])
const activeTab=ref(0)

function getClassifyList(){
    apiReportEn.getClassifyList({
        CurrentIndex:1,
        PageSize:1000,
        KeyWord:'',
    }).then(res=>{
        if(res.Ret===200){
            const arr=res.Data.List||[]
            list.value=arr.map(item=>{
                const child=item.Child?item.Child.map(e=>{
                    // console.log(e,'ee')
                    const groundChild = e.Child? e.Child.map(it =>{
                        return {
                            text:it.ClassifyName,
                            id:it.Id
                        }
                    }):[]

                    return {
                        text:e.ClassifyName,
                        id:e.Id,
                        children:groundChild,
                        disabled:props.firstClassifyDisabled&&groundChild.length===0?true:false,
                    }
                }):[]
                return {
                    text:item.ClassifyName,
                    id:item.Id,
                    children:child,
                    disabled:props.rootClassifyDisabled&&child.length===0?true:false,
                }
            })

            if(props.defaultVal&&props.defaultVal[2]){
                activeId.value=props.defaultVal[2].id
                list.value.forEach((item,index)=>{
                    if(item.id===props.defaultVal[1].id){
                        activeIndex.value=index
                    }
                })
            }
        }
    })
}
getClassifyList()

const activeId = ref(null);
const activeIndex = ref(0);

function handleCancle(){
    emits('close')
}

function handleReset(){
    activeTab.value=0
    activeIndex.value=0
    activeId.value=null
    emits('confirm',{rootClassify:'',firstClassify:'',secondClassify:''})
}

function clearClassifyOptions(){
    activeTab.value=0
    activeIndex.value=0
    activeId.value=null
}

function tabChange(value) {
    activeIndex.value=0
    activeId.value=null
}

function handleConfirm(){

    let itemChild = list.value[activeTab.value]
    const rootClassify={
        text:itemChild.text,
        id:itemChild.id
    }
    let firstClassify={text:'',id:''}
    if(itemChild.children[activeIndex.value]){
        firstClassify={
            text:itemChild.children[activeIndex.value].text,
            id:itemChild.children[activeIndex.value].id
        }
    }

    let secondClassify={text:'',id:''}
    if(activeId.value){
        // 找第三级id
        itemChild.children[activeIndex.value].children.forEach(e => {
            // console.log(e.id,"e.id",activeId.value);
            if(e.id===activeId.value){
                secondClassify.text=e.text
                secondClassify.id=e.id
            }
        });
    }
    // console.log(rootClassify,firstClassify,secondClassify,'secondClassify');
    emits('confirm',{rootClassify,firstClassify,secondClassify})
}

defineExpose({
    clearClassifyOptions
})

</script>

<template>
    <div class="report-list-classify-wrap">
        <div class="top-box">
            <span style="color:#666666" @click="handleCancle" v-if="props.noReset">取消</span>
            <span style="color:#666666" @click="handleReset" v-else>重置</span>
            <span style="font-size:18px;font-weight:bold">选择分类</span>
            <span style="color:#0052D9" @click="handleConfirm">确定</span>
        </div>
        <van-tabs v-model:active="activeTab" shrink @change="tabChange">
            <van-tab v-for="tabOp in list" :key="tabOp.id" 
            :title="tabOp.text" :disabled="tabOp.disabled" >
                <div class="content">
                    <van-tree-select
                        v-model:active-id="activeId"
                        v-model:main-active-index="activeIndex"
                        :items="tabOp.children"
                        @click-nav="activeId=null"
                    />
                </div>
            </van-tab>
        </van-tabs>

    </div>
</template>

<style lang="scss" scoped>
.report-list-classify-wrap{
    .top-box{
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 116px;
        border-bottom: 1px solid $border-color;
        padding: 0 34px;
    }
}
@media screen and (min-width:$media-width){
    .report-list-classify-wrap{
        .top-box{
            height: 50px;
            padding: 0 16px;
        }
    }
}
</style>