<script setup name="ChartETAChartDetail">
import AddChartToMyETA from './components/AddChartToMyETA.vue';
import { useRoute, useRouter } from "vue-router";
import { ref, onMounted, nextTick } from 'vue';
import apiSheet from '@/api/sheet'
import { useWindowSize } from '@vueuse/core'
import {useChartRender} from '@/hooks/chart/render'
const {chartRender}=useChartRender()
const chartList = ref([]);
const isShowAddToMyETADialog = ref(false);
const route = useRoute()
const { width } = useWindowSize()
const chartItem = ref({});

onMounted(() => {
    getChartList('init')
})

// 获取图表数据
async function getChartList(){
    const res = await apiSheet.getBalanceChartData({
            ExcelInfoId: Number(route.query.id)
        })
    if(res.Ret!==200) return 
    chartList.value = res.Data.List||[]
    nextTick(()=>{
        chartList.value.forEach(element => {
            chartRender({
                data:{
                    ...element,
                    ChartInfo:{
                        ...element.ChartInfo,
                    },
                },
                renderId: 'container' + element.ChartInfo.ChartInfoId,
                changeLangIsCheck:false,
                showChartTitle:false,
                shouldUseSelfLimit:true,
            })
        });
    })
}

// 加入我的图库
function addChart(item){
    isShowAddToMyETADialog.value = true;
    chartItem.value = item
}
</script>

<template>
    <div class="sheet-chart-page" v-if="chartList.length">
        <div class="sheet-name">{{ route.query.name }}</div>
        <!-- 图渲染区域 -->
       <div class="chart-box" v-for="item in chartList" :key="item.ChartInfo.ChartInfoId">
            <div class="chart-name">{{ item.ChartInfo.ChartName }}</div>
            <div class="chart" :id="'container' + item.ChartInfo.ChartInfoId"></div>
            <div class="add-chart" @click="addChart(item)">加入我的图库</div>
       </div>
        <!-- 加入我的图库弹窗 -->
        <AddChartToMyETA 
            :isShowDialog="isShowAddToMyETADialog"
            :dialogPosition="width>650?'center':'bottom'"
            :chartInfo="chartItem.ChartInfo"
            @close="isShowAddToMyETADialog=false"
        />
    </div>
</template>

<style lang="scss" scoped>
.sheet-chart-page {
    padding: 20px;
    .sheet-name {
        margin: 0 0 20px 0;
    }
    .chart-box {
        width: 100%;
        height: 50vh;
        padding: 20px;
        margin-top: 10px;
        border: 1px solid rgba(0, 0, 0, 0.38);
        .chart-name {
            margin: 0 0 20px 0;
            line-height: 30px;
        }
        .chart {
            width: 100%;
            height: calc(100% - 110px);
        }
        .add-chart {
            margin-top: 20px;
            width: 100%;
            height: 40px;
            text-align: right;
            color:  rgba(54, 121, 224, 1);
        }
    }
    @media screen and (min-width: 650px) {
        .chart-box {
            height: 500px;
        }
    }
}
</style>

