<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({});
const isLoading = ref(false);

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

// 获取图表数据
async function getChartList(){
    isLoading.value = true
    const res = await apiSheet.getBalanceChartData({
        ExcelInfoId: Number(route.query.id)
    })
    isLoading.value = false
    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">
        <template 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"
            />
        </template>
        <template v-if="!chartList.length && !isLoading">
            <img class="list-empty-img" src="https://hzstatic.hzinsights.com/static/ETA_mobile/empty_img.png" alt="">
        </template>
    </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;
        // padding: 14px 0px 0px 0px;
        // gap: 14px;
        border-radius: 4px;
        border: 1px solid rgba(220, 220, 220, 1);
        background: rgba(255, 255, 255, 1);
        .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>

