<script setup>
import {ref} from 'vue'
import {apiMenuList} from '@/api/user'
import ETAChart from './ETAChart.vue'
import MyETAChart from './MyETAChart.vue'
import SandTableImg from './SandTableImg.vue'
import SheetTableChart from './SheetTableChart.vue'
import SemanticsImg from './SemanticsImg.vue'
import MaterialImg from './reportMaterial/Index.vue'
import StatisticAnalysis from './StatisticAnalysis.vue'
import PriceChart from './PriceChart.vue'
import BalanceSheet from './BalanceSheet/Index.vue'

const emits=defineEmits(['insert'])

// const typeOpt=['素材库','图表插入','批量插入','表格插入','沙盘插入','语义分析插入']
const typeOpt=ref([
    {
        value:'素材库',
        label:'素材库',
        path:'materialList'
    },
    {
        value:'图表插入',
        label:'图库',
        path:''
    },
    {
        value:'批量插入',
        label:'我的图库',
        path:'mychart'
    },
    {
        value:'表格插入',
        label:'表格',
        path:''
    },
    {
        value:'平衡表',
        label:'平衡表',
        path:'sheetBalanceList'
    },
    {
        value:'统计分析',
        label:'统计分析',
        path:''
    },
    {
        value:'商品价格曲线',
        label:'商品价格曲线',
        path:'commordityChartBase'
    },
    {
        value:'沙盘插入',
        label:'逻辑图',
        path:'sandlist'
    },
    {
        value:'语义分析插入',
        label:'语义分析',
        path:'semanticsPage'
    },
])
const activeType=ref('素材库')
async function initTypeOpts(){
    const res=await apiMenuList()
    if(res.Ret===200){
        const menuData=res.Data.List||[]
        let pathArr=[]
        menuData.forEach(item=>{
			if(item.children){
				item.children.forEach(_item=>{
					pathArr.push(_item.path)
				})
			}else{
				pathArr.push(item.path)
			}
		})
        typeOpt.value=typeOpt.value.filter(i=>!i.path||pathArr.includes(i.path))
        if(typeOpt.value.length>0){
            activeType.value=typeOpt.value[0].value
        }
    }
}
initTypeOpts()


let list=ref([])

function handleSelectChart(data){
    list.value=data
}

function handleConfirmInsert(){
    if(['图表插入','批量插入','统计分析','商品价格曲线'].includes(activeType.value)){
        console.log(list.value)
        let filterList = list.value;

        emits('insert',{list: filterList,type:'iframe',chartType:'chart'})
    }else if(['平衡表','表格插入'].includes(activeType.value)){
        emits('insert',{list:list.value,type:'iframe',chartType:'sheet'})
    }else if(['沙盘插入','语义分析插入','素材库'].includes(activeType.value)){
        emits('insert',{list:list.value,type:'img',chartType:''})
    }
    
    list.value=[]
}
</script>

<template>
    <div class="report-insert-content-wrap">
        <ul class="top-type-box">
            <li 
                :class="['item',activeType===item.value&&'active']"
                v-for="item in typeOpt" 
                :key="item"
                @click="activeType=item.value;list=[]"
            >{{item.label}}</li>
        </ul>
        <div class="main-box">
            <ETAChart @update="handleSelectChart" v-if="activeType==='图表插入'"/>
            <MyETAChart @update="handleSelectChart" v-if="activeType==='批量插入'"/>
            <SheetTableChart @update="handleSelectChart" v-if="activeType==='表格插入'"/>
            <SandTableImg @update="handleSelectChart" v-if="activeType==='沙盘插入'"/>
            <SemanticsImg @update="handleSelectChart" v-if="activeType==='语义分析插入'"/>
            <MaterialImg @update="handleSelectChart" v-if="activeType==='素材库'"/>
            <StatisticAnalysis @update="handleSelectChart" v-if="activeType==='统计分析'"/>
            <PriceChart @update="handleSelectChart" v-if="activeType==='商品价格曲线'"/>
            <BalanceSheet @update="handleSelectChart" @insert="handleConfirmInsert" v-if="activeType==='平衡表'"/>
            
        </div>
        <div class="bot-btn" v-if="activeType!=='平衡表'">
            <van-button type="primary" block @click="handleConfirmInsert" :disabled="list.length===0">插入</van-button>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.report-insert-content-wrap{ 
    width: 100%;
    height: 70vh;
    display: flex;
    flex-direction: column;
    .top-type-box{
        background-color: $page-bg-grey;
        display: flex;
        border-bottom: 1px solid $border-color;
        overflow-x: auto;
        &::-webkit-scrollbar{
            display: none;
        }
        .item{
            padding: 24px 0;
            flex: 1;
            min-width: 105PX;
            text-align: center;
            border-top-right-radius: var(--van-popup-round-radius);
            border-top-left-radius: var(--van-popup-round-radius);
            transition: all 0.3s;
        }
        .active{
            background-color: #fff;
            color: $theme-color;
            font-weight: 600;
        }
    }
    .main-box{
        flex: 1;
        overflow-y: auto;
    }
    .bot-btn{
        padding: 48px;
    }
}
@media screen and (min-width:$media-width){
    .report-insert-content-wrap{
        .top-type-box{
            .item{
                padding: 12px 0;
            }
        }
        .bot-btn{
            padding: 24px;
        }
    }
}
</style>