<script setup>
import {watch,ref} from 'vue'
import apiETAChart from '@/api/chart'
import apiCorrelation from '@/api/correlationChart'
import apiFuture from '@/api/futureChart'
import apiLineEquationChart from '@/api/lineEquationChart'
import apiStatisticFeatureChart from '@/api/statisticFeatureChart'
import apiCrossVarietyChart from '@/api/crossVarietyChart'
import apiIntervalAnalysis from '@/api/intervalAnalysis'
import { showToast } from 'vant'
import { useWindowSize } from '@vueuse/core'

const { width, height } = useWindowSize()


const props=defineProps({
    show:{
        type:Boolean,
        default:false
    },
    chartInfo:{
        default:{}
    },
    source:{//来源 1普通图表 2(good_price)商品价格 3('relevance_chart')相关性图表
        default:''
    }
})
const emits=defineEmits(['close'])

let showPop=ref(props.show)
watch(
    ()=>props.show,
    (n)=>{
        if(n){
            getOpts()
        }
        showPop.value=props.show
    }
)
watch(showPop,()=>{
    if(!showPop.value){
        emits('close')
    }
})

// 获取选项数据
let opts=ref([])
async function getOpts(){
    let res
    if([2,5].includes(props.source)){
        res=await apiFuture.chartClassifyList({})
    }else if([3,4].includes(props.source)){
        res=await apiCorrelation.chartClassifyList({})
    }else if(props.source==6){
        res=await apiLineEquationChart.chartClassifyList({})
    }else if([7,8,9].includes(props.source)){
        res=await apiStatisticFeatureChart.chartClassifyList({})
    }else if(props.source==12){
        res=await apiIntervalAnalysis.classifyListNoChart()
    }else{
        res=await apiETAChart.ETAChartClassifyList({})
    }
    if(res.Ret!=200) return
    const arr=res.Data.AllNodes||[]
    opts.value=arr
    /* if([2,5,3,6,7,8,9].includes(props.source)){
        opts.value=arr
    }else{
        opts.value=arr.map(item=>{
            const children=item.Children.map(e=>{
                return {
                    text:e.ChartClassifyName,
                    id:e.ChartClassifyId
                }
            })
            return {
                text:item.ChartClassifyName,
                children:children
            }
        })
    } */
}

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
        }
    })
}

let activeIds=ref(0)//选中的分类
const activeIndex=ref(0)
let activeTab=ref(0)


async function handleConfirmSave(){
    const params={
        ChartInfoId:props.chartInfo.ChartInfoId,
        ChartName:props.chartInfo.ChartName+'(1)',
        ChartClassifyId:activeIds.value
    }
    let res
    if([2,5].includes(props.source)){
        res=await apiFuture.chartSaveOther(params)
    }else if([3,4].includes(props.source)){
        res=await apiCorrelation.chartSaveOther(params)
    }else if(props.source==6){
        res=await apiLineEquationChart.chartSaveOther(params)
    }else if([7,8,9].includes(props.source)){
        res=await apiStatisticFeatureChart.chartSaveOther(params)
    }else if(props.source===10){
        res=await apiCrossVarietyChart.saveOtherChart(params)
    }else if(props.source===12){
        res=await apiIntervalAnalysis.chartSaveOther(params)
    }else{
        res=await apiETAChart.ETAChartSaveOther(params)
    }

    if(res.Ret!==200) return
    showToast('保存成功')
    emits('close')
}

</script>

<template>
    <van-popup 
        v-model:show="showPop"
        :position="width>650?'center':'bottom'"
        round
        closeable
    >
        <div class="global-pop-wrap_mobile chart-save-other-wrap">
            <div class="head-box">
                <div class="title">另存为</div>
            </div>
            <div class="content">
                <template v-if="[2,3,5,6,7,8,9,12].includes(source)">
                    <ul class="list-box">
                        <li 
                            :class="['item',activeIds==item.ChartClassifyId?'active':'']"
                            v-for="item in opts" 
                            :key="item.ChartClassifyId"
                            @click="activeIds=item.ChartClassifyId"
                        >{{item.ChartClassifyName}}</li>
                    </ul>
                </template>
                <!-- <template v-else-if="[3].includes(source)">
                    <van-cascader
                        v-model="activeIds"
                        :options="opts"
                        :closeable="false"
                        :field-names="{text:'ChartClassifyName',value:'ChartClassifyId',children:'Children'}"
                    />
                </template> -->
                <template v-else-if="source===10">
                    <div class="item">
                        图表名称: {{chartInfo.ChartName+'(1)'}}
                    </div>
                </template>
                <template v-else>
                    <!-- <van-tree-select
                        v-model:active-id="activeIds"
                         v-model:main-active-index="activeIndex"
                        :items="opts"
                    /> -->
                    <!-- ETA图库目录改为三级,增加tab组件作为一级目录 -->
                    <div class="tag-box">
                        <van-tabs v-model:active="activeTab" shrink>
                            <van-tab v-for="catalog in opts" :key="catalog.UniqueCode"
                                :title="catalog.ChartClassifyName">
                                <div class="content">
                                    <van-tree-select
                                        v-model:active-id="activeIds"
                                        v-model:main-active-index="activeIndex"
                                        :items="getTreeData(catalog)"
                                    />
                                </div>
                            </van-tab>
                        </van-tabs>
                    </div>
                </template>
            </div>
            <div class="bot-btn-box" @click="handleConfirmSave">确定</div>
        </div>
    </van-popup>
</template>

<style lang="scss" scoped>
.chart-save-other-wrap{
    .head-box{
        .title{
            padding: 0 $page-padding;
            font-size: 36px;
            font-weight: 600;
            line-height: 120px;
        }
    }
    .bot-btn-box{
        line-height: 112px;
        text-align: center;
        color: $theme-color;
        font-size: 32px;
    }
    :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;
            }
        }
        .list-box{
            max-height: 40vh;
            overflow-y: auto;
            &::-webkit-scrollbar{
                display: none;
            }
        }
        .item{
            padding: 32px $page-padding;
            font-size: 32px;
            border-bottom: 1px solid $border-color;
            position: relative;
            &.active{
                color: $theme-color;
                &::after{
                    content: '';
                    display: block;
                    width: 36px;
                    height: 36px;
                    background-image: url('@/assets/imgs/icon_select2.png');
                    background-size: cover;
                    background-repeat: no-repeat;
                    position: absolute;
                    top: 50%;
                    right: $page-padding;
                    transform: translateY(-50%);
                }
            }
        }
    }
}

@media screen and (min-width:$media-width){
    .chart-save-other-wrap{
        width: 375px;
        .head-box{
            .title{
                font-size: 18px;
                line-height: 50px;
                padding-left: 16px;
            }
        }
        .bot-btn-box{
            font-size: 16px;
            line-height: 56px;
            border-top-width: 8px;
        }
        :deep(.van-tabs__wrap){
            box-shadow: 0px 3px 5px 0 #DCDFE6;
        }
        .content{
            .list-box{
                max-height: 500px;
            }
            .item{
                padding: 16px;
                font-size: 16px;
                &.active{
                    &::after{
                        width: 18px;
                        height: 18px;
                        right: 16px;
                    }
                }
            }
        }
    }
}
</style>