<script setup>
//移动图表,另存为弹窗
import {ref,watch} from 'vue'
import { showToast } from 'vant';
const props = defineProps({
    isShowDialog:{
        type:Boolean,
        default:false
    },
    dialogPosition:{
        type:String,
        default:'bottom'
    },
    popTitle:{
        type:String,
        default:'移动至'
    },
    catalogNodes:{
        type:Array,
        default:[]
    },
    chartInfo:{
        type:Object,
        default:{}
    },
    renderType:{ //图表的移动/另存为：chart; 目录的移动：catalog
        type:String,
        default:'chart'
    }
})

let activeTab = ref(0)
function getTreeData(topNode={}){
    return topNode.Children.map(item=>{
        const children=item.Children.map(e=>{
                return {
                    text:e.ChartClassifyName,
                    id:e.ChartClassifyId
                }
            })
            return {
                text:item.ChartClassifyName,
                children:children
            }
    })
}
//watch(()=>props.catalogNodes,getTreeData,{immediate:true,deep:true})
const showPop = ref(false)
const activeId=ref(0)//选中的分类
const activeIndex=ref(0)
watch(()=>props.isShowDialog,()=>{
    showPop.value = props.isShowDialog
})
watch(()=>props.chartInfo,()=>{
    if(props.popTitle==='移动至'&&props.renderType==='chart'){
        activeId.value = props.chartInfo.ChartClassifyId
    }
    if(props.popTitle==='移动至'&&props.renderType==='catalog'){
        activeId.value = props.chartInfo.ParentId
    }
},{immediate:true,deep:true})
const emits = defineEmits(['close','confirmMove'])
watch(showPop,()=>{
    if(!showPop.value){
        emits('close')
    }
})


function handleConfirmMove(){
    if(!activeId.value){
        showToast('请选择分类!')
        return
    }
    emits('confirmMove',activeId.value)
}
</script>

<template>
    <van-popup 
        v-model:show="showPop"
        :position="dialogPosition"
        round
        closeable
    >
        <div class="global-pop-wrap_mobile tree-select-pop-wrap">
            <div class="head-box">
                <div class="title">{{popTitle}}</div>
            </div>
            <!-- 目录改为三级,增加tab组件作为一级目录 -->
            <div class="tag-box" v-if="renderType==='chart'">
                <van-tabs v-model:active="activeTab" shrink>
                    <van-tab v-for="catalog in catalogNodes" :key="catalog.UniqueCode"
                    :title="catalog.ChartClassifyName">
                        <div class="content">
                            <van-tree-select
                                v-model:active-id="activeId"
                                v-model:main-active-index="activeIndex"
                                :items="getTreeData(catalog)"
                            />
                        </div>
                    </van-tab>
                </van-tabs>
            </div>
            <div class="content" v-else>
                <van-tree-select
                    v-model:active-id="activeId"
                    v-model:main-active-index="activeIndex"
                    :items="getTreeData({Children:catalogNodes})"
                />
            </div>
            <div class="bot-btn-box" @click="handleConfirmMove">确定</div>
        </div>
    </van-popup>
</template>

<style scoped lang="scss">
.tree-select-pop-wrap{
    .head-box,.bot-btn-box{
        font-size: 36px;
        padding:32px;
        text-align: center;
    }
    .bot-btn-box{
        color: $theme-color;
    }
    :deep(.van-tabs__wrap){
        position: relative;
        z-index: 3;
        box-shadow: 0px 6px 10px 0 #DCDFE6;
    }
    .content{
        :deep(.van-tree-select__nav){
            &::-webkit-scrollbar{
                display: none;
            }
        }
    }
    @media screen and (min-width:$media-width){
        width:375px;
        .head-box,.bot-btn-box{
            padding:16px;
            font-size: 18px;
        }
        :deep(.van-tabs__wrap){
            box-shadow: 0px 3px 5px 0 #DCDFE6;
        }
        .bot-btn-box{
            border-top:10px solid #F2F6FA;;
        }
    }
}
</style>
