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

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

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

const list=ref([])
const childList = ref([])
function getClassifyList(){
    apiReport.getClassifyList({
        CurrentIndex:1,
        PageSize:1000,
        KeyWord:'',
        Enabled:props.enable
    }).then(res=>{
        if(res.Ret===200){
            const arr=res.Data.List||[]
            list.value = arr;

            if(props.defaultVal){
                activeId.value=props.defaultVal[props.defaultVal.length-1].id
                selectClassify.value = props.defaultVal
            }
        }
    })
}
getClassifyList()

const activeId = ref(null);
const selectClassify = ref([])

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

function handleReset(){
    activeId.value=null
    emits('confirm',[])
}

function onFinish(e) {
    console.log(e)
    selectClassify.value = e.selectedOptions.map(_ => ({
        text:_.ClassifyName,
        id:_.Id,
    }))
}

function handleConfirm(){
    if(selectClassify.value.length===0) return showToast('请选择最小级分类')
    emits('confirm',selectClassify.value)
}
</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-cascader
            v-model="activeId"
            :show-header="false"
            :closeable="false"
            :options="list"
            :field-names="{
                text: 'ClassifyName',
                value: 'Id',
                children: 'Child'
            }"
            @finish="onFinish"
        />
        
    </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;
    }
}
.van-cascader {
    width: 100%;
}
@media screen and (min-width:$media-width){
    .report-list-classify-wrap{
        .top-box{
            height: 50px;
            padding: 0 16px;
        }
    }
}
</style>