<template>
    <div class="deviceDiv">
        <TopDiv title="资产信息"></TopDiv>
        <dv-border-box-10 backgroundColor="#00174b" :color="['#3cbfdf', '#3cbfdf']">
            <!-- <div class="container1">

            </div> -->
            <div class="container">
                <div class="chartsGl" id="charts"></div>
            </div>

        </dv-border-box-10>
        <div class="box-button" @click="openDialog">
        </div>
    </div>
</template>
<script setup>
import getPie3D from './3DChart.js';
import * as echarts from 'echarts';
import "echarts-gl"
import TopDiv from "./TopDiv.vue";
import bimStore from '@/store/modules/bim';
const emit = defineEmits(['openDialog'])


const deviceInfo = computed(() =>
    bimStore().activateTree.deviceInfo
);

onMounted(() => {
    initData();
})

watch(deviceInfo, (value) => {
    if (value) {
        initData();
    }
},)

const initData = () => {
    const optionData = deviceInfo.value.map((item) => {
        return {
            ...item,
            rate: ((item.value / 300).toFixed(1)) * 100,
        };
    });
    nextTick(() => {
        getCharts(optionData);
    })
}
const getCharts = (optionData) => {
    var dom = document.getElementById('charts');
    if (dom) {
        // 手动移除该属性
        dom.removeAttribute('_echarts_instance_')
        var myChart = echarts.init(dom);
        var option = getPie3D(optionData, 0, '占比');
        // myChart.resize({
        //     height: '300px',
        // });
        option && myChart.setOption(option);
    }
}

const openDialog = () => {
    emit('openDialog')
}
</script>
<style lang='scss' scoped>
.deviceDiv {
    position: absolute;
    bottom: 40px;
    right: 10px;
    width: 360px;
    height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #3cbfdf;
}

:deep(.border-box-content) {
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    >div {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .chartsGl {
        height: 100%;
        width: 100%;
    }

}

.box-button {
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: 10px;
    right: 10px;
    border: 2px solid #3cbfdf;
    border-radius: 5px;
    cursor: pointer;

}
</style>