<script setup>
import {ref} from 'vue'
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'

const emits=defineEmits(['insert'])

const typeOpt=['图表插入','批量插入','表格插入','沙盘插入','语义分析插入']
const activeType=ref('图表插入')

let list=ref([])

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

function handleConfirmInsert(){
    if(['图表插入','批量插入'].includes(activeType.value)){
        let filterList = activeType.value === '批量插入' ? list.value.filter(_ => _.HaveOperaAuth) : list.value;

        emits('insert',{list: filterList,type:'iframe',chartType:'chart'})
    }else if(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&&'active']"
                v-for="item in typeOpt" 
                :key="item"
                @click="activeType=item;list=[]"
            >{{item}}</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==='语义分析插入'"/>
        </div>
        <div class="bot-btn">
            <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: 96PX;
            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>