<script setup>
import {ref} from 'vue'
import apiReport from '@/api/report'

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

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

const list=ref([])
function getClassifyList(){
    apiReport.getClassifyList({
        CurrentIndex:1,
        PageSize:1000,
        KeyWord:'',
        HideDayWeek:props.hideDayWeek,
        Enabled:props.enable
    }).then(res=>{
        if(res.Ret===200){
            const arr=res.Data.List||[]
            list.value=arr.map(item=>{
                const child=item.Child?item.Child.map(e=>{
                    return {
                        text:e.ClassifyName,
                        id:e.Id,
                        HasTeleconference:e.HasTeleconference
                    }
                }):[]
                return {
                    text:item.ClassifyName,
                    id:item.Id,
                    children:child,
                    disabled:props.firstClassifyDisabled&&child.length===0?true:false,
                    HasTeleconference:item.HasTeleconference
                }
            })
            if(props.defaultVal&&props.defaultVal[1]){
                activeId.value=props.defaultVal[1].id
                list.value.forEach((item,index)=>{
                    if(item.id===props.defaultVal[0].id){
                        activeIndex.value=index
                    }
                })
            }
        }
    })
}
getClassifyList()

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

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

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

function handleConfirm(){
    const firstClassify={
        text:list.value[activeIndex.value].text,
        id:list.value[activeIndex.value].id,
        HasTeleconference:list.value[activeIndex.value].HasTeleconference,
    }
    let secondClassify={text:'',id:'',HasTeleconference:''}
    if(activeId.value){
        list.value[activeIndex.value].children.forEach(e => {
            if(e.id===activeId.value){
                secondClassify.text=e.text
                secondClassify.id=e.id
                secondClassify.HasTeleconference=e.HasTeleconference
            }
        });
    }

    emits('confirm',{firstClassify,secondClassify})
}
</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-tree-select
            v-model:active-id="activeId"
            v-model:main-active-index="activeIndex"
            :items="list"
            @click-nav="activeId=null"
        />
    </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>