<template>
    <div class="deviceInfoDialog">
        <div class="left-div">
            <el-select v-model="buildValue" class="m-2" placeholder="Select" size="large">
                <el-option v-for="item in buildOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-tree ref="myTree" :data="treeData" :props="defaultProps" node-key="id" check-strictly="true"
                highlight-current default-expand-all :current-node-key="checkedkeys" @node-click="handleNodeClick" />
        </div>
        <div class="right-div">
            <div class="top-div">
                <div :id="'echartDiv' + index" class="echartDiv100" v-for="(item, index) of deviceList" :key="index"
                    style="width: 100%;height:100%"></div>
            </div>
            <div class="bottom-div">
                <el-table :data="tableData" border style="width: 100%" height="420">
                    <el-table-column label="序号" width="60" type="index" align="center"></el-table-column>
                    <el-table-column prop="name" label="名称" align="center" />
                    <el-table-column prop="num" label="编码" align="center" />
                    <el-table-column prop="type" label="类型" align="center" />
                    <el-table-column label="操作" align="center">
                        <template #default="scope">
                            <el-button type="primary" @click="viewDetail(scope.row)">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>
<script setup>
import * as echarts from "echarts";
import bimStore from '@/store/modules/bim';
const buildOptions = [
    {
        value: '0',
        label: '漳州工厂',
    }
]

const defaultProps = {
    children: 'children',
    label: 'label',
}
const data = reactive({
    buildValue: '0',
    treeData: [
        {
            label: '原料糖化车间',
            id: '0',
            url: '/jz/glb/scene.gltf',
            info: {
                name: '原料糖化车间',
                area: '9436 ㎡',
                status: '启用',
                desc: '原料糖化车间，负责原料糖化，启用于2011年'
            },
            deviceInfo: [
                {
                    type: '生产设备',
                    name: '立仓',
                    num: 'T11',
                    value: 45,
                    id: "echartDiv0"
                },
                {
                    type: '生产设备',
                    name: '过滤槽',
                    num: 'guolvcao_1',
                    value: 130,
                    id: "echartDiv1"
                },
                {
                    type: '安防设备',
                    name: '摄像头',
                    num: 'T3',
                    value: 180,
                    id: "echartDiv2"
                },
                {
                    type: '消防设备',
                    name: '烟感',
                    num: 'T4',
                    value: 100,
                    id: "echartDiv3"
                }
            ],
            children: [
                {
                    label: '原料糖化车间一',
                    id: '0-1',
                    url: '/jz/glb/scene.gltf',
                    children: [],
                    info: {
                        name: '原料糖化车间一',
                        area: '5200 ㎡',
                        status: '启用',
                        desc: '原料糖化车间一，负责原料糖化，启用于2011年'
                    },
                    deviceInfo: [
                        {
                            type: '生产设备',
                            name: '立仓',
                            num: 'T11',
                            value: 15,
                            id: "echartDiv0"
                        },
                        {
                            type: '生产设备',
                            name: '过滤槽',
                            num: 'guolvcao_1',
                            value: 50,
                            id: "echartDiv1"
                        },
                        {
                            type: '安防设备',
                            name: '摄像头',
                            num: 'T3',
                            value: 80,
                            id: "echartDiv2"
                        },
                        {
                            type: '消防设备',
                            name: '烟感',
                            num: 'T4',
                            value: 50,
                            id: "echartDiv3"
                        }
                    ],

                },
                {
                    label: '原料糖化车间二',
                    id: '0-2',
                    url: '/jz/glb/scene.gltf',
                    children: [],
                    info: {
                        name: '原料糖化车间二',
                        area: '4236 ㎡',
                        status: '启用',
                        desc: '原料糖化车间二，负责原料糖化，启用于2013年'
                    },
                    deviceInfo: [
                        {
                            type: '生产设备',
                            name: '立仓',
                            num: 'T11',
                            value: 30,
                            id: "echartDiv0"
                        },
                        {
                            type: '生产设备',
                            name: '过滤槽',
                            num: 'guolvcao_1',
                            value: 80,
                            id: "echartDiv1"
                        },
                        {
                            type: '安防设备',
                            name: '摄像头',
                            num: 'T4',
                            value: 100,
                            id: "echartDiv2"
                        },
                        {
                            type: '消防设备',
                            name: '烟感',
                            num: 'T3',
                            value: 50,
                            id: "echartDiv3"
                        }
                    ],
                },
            ],
        }
    ],
    checkedkeys: "",
    deviceList: [
        {
            name: '设备A',
            num: 36,
            id: "echartDiv0"
        },
        {
            name: '设备B',
            num: 36,
            id: "echartDiv1"
        },
        {
            name: '设备C',
            num: 36,
            id: "echartDiv2"
        },
        {
            name: '设备D',
            num: 36,
            
            id: "echartDiv3"
        }
    ],
    tableData: []
});
const { buildValue, treeData, checkedkeys, deviceList, tableData } = toRefs(data);
const emit = defineEmits(['viewDetail'])
onMounted(() => {
    nextTick(() => {
        checkedkeys.value = treeData.value[0].id;
        handleNodeClick(treeData.value[0]);
    })
})

const handleNodeClick = (value) => {
    value.deviceInfo.forEach(ele => {
        getCharts(ele);
    })
    tableData.value = value.deviceInfo;
}

const getCharts = (ele) => {
    var dom = document.getElementById(ele.id);
    if (dom) {
        // 手动移除该属性
        dom.removeAttribute('_echarts_instance_')
        var myChart = echarts.init(dom);
        var option = {
            grid: {
                left: "8%", //画布左移位置
                top: "10%",
                width: "90%", //画布宽度
                height: "65%", //画布高度
            },
            series: [{
                name: '第二次弧形向外渐变',
                type: 'gauge',
                radius: '60%',
                splitNumber: 0, // 刻度数量
                min: 0, // 最小刻度
                max: 100,
                // 仪表盘轴线相关配置
                axisLine: {
                    lineStyle: {
                        color: [
                            [
                                3,
                                {
                                    type: 'radial',
                                    x: 0.5,
                                    y: 0.6,
                                    r: 0.6,
                                    colorStops: [
                                        {
                                            offset: 0.84,
                                            color: 'rgba(50, 226, 247, 0)', // 0% 处的颜色
                                        }, {
                                            offset: 0.85,
                                            color: 'rgba(29, 129, 172, 1.00)', // 0% 处的颜色
                                        },
                                        {
                                            offset: 0.99,
                                            color: 'rgba(24, 124, 165, 0.1)', // 100% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(50, 226, 247, 0)', // 100% 处的颜色
                                        },
                                    ],
                                },
                            ],
                        ],
                        width: 40,
                    },
                },
                /** 分隔线样式*/
                splitLine: {
                    show: false,
                    length: 9,
                    lineStyle: {
                        width: 1,
                        color: '#fff', // 用颜色渐变函数不起作用
                    },
                },
                /** 刻度线*/
                axisTick: {
                    show: false,
                    splitNumber: 2,
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.3)', // 用颜色渐变函数不起作用
                        width: 1,
                    },
                    length: 5,
                },
                /** 刻度标签*/
                axisLabel: {
                    distance: 2,
                    show: false,
                    color: 'rgba(255, 255, 255, 1)',
                    fontSize: 12,
                    fontFamily: 'DIN-Bold'
                },
                detail: {
                    show: false,
                },
                animationDuration: 4000,
            }, {
                type: 'gauge',
                radius: '92%',
                splitNumber: 0, // 刻度数量
                min: 0, // 最小刻度
                max: 100,
                progress: {
                    show: true,
                    roundCap: true,
                    width: 15,
                    itemStyle: {
                        color: '#58D9F9',
                        shadowColor: 'rgba(0,138,255,0.45)',
                        shadowBlur: 10,
                        shadowOffsetX: 2,
                        shadowOffsetY: 2
                    },
                },
                axisLine: {
                    lineStyle: {
                        color: [
                            [
                                5,
                                {
                                    type: 'radial',
                                    x: 0.5,
                                    y: 0.6,
                                    r: 0.6,
                                    colorStops: [
                                        {
                                            offset: 0.84,
                                            color: 'rgba(50, 226, 247, 0)', // 0% 处的颜色
                                        }, {
                                            offset: 0.85,
                                            color: 'rgba(29, 129, 172, 1.00)', // 0% 处的颜色
                                        },
                                        {
                                            offset: 0.99,
                                            color: 'rgba(24, 124, 165, 0.1)', // 100% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(50, 226, 247, 0)', // 100% 处的颜色
                                        },
                                    ],
                                },
                            ],
                        ],
                        width: 18,
                    },
                },
                //分隔线样式。
                splitLine: {
                    show: false,
                },
                //刻度样式。
                axisTick: {
                    show: false,
                },
                //刻度标签。
                axisLabel: {
                    show: false,
                },
                //仪表盘指针。
                pointer: {
                    //这个show属性好像有问题，因为在这次开发中，需要去掉指正，我设置false的时候，还是显示指针，估计是BUG吧，我用的echarts-3.2.3；希望改进。最终，我把width属性设置为0，成功搞定！
                    show: false,
                    //指针长度
                    length: '90%',
                    width: 0,
                },
                //仪表盘标题。
                title: {
                    show: true,
                    offsetCenter: ['2', '55'], // x, y，单位px
                    textStyle: {
                        color: '#fff',
                        fontSize: 14
                    },

                    backgroundColor: "#58D9F9",
                    borderWidth: 3, //设置边框粗细
                    borderRadius: 20,
                    lineHeight: 20,
                    height: 20,
                    width: 80
                },
                //仪表盘详情，用于显示数据。
                detail: {
                    show: true,
                    offsetCenter: [0, '0%'],
                    formatter: function (value) {
                        return value + '台';
                    },

                    textStyle: {
                        fontSize: 20,
                        color: '#31e4f4'
                    }
                },

                data: [{
                    value: ele.value,
                    name: ele.name
                },]
            }]
        };

        option && myChart.setOption(option);
    }
}

const viewDetail = (val) => {
    bimStore().setDeviceNum(val.num);
    emit('viewDetail', val);
}
</script>
<style lang="scss" scoped>
.deviceInfoDialog {
    height: 600px;
    display: flex;
    justify-content: space-between;

    .left-div {
        width: 20%;
        height: 100%;
        border: 1px solid #2E6099;

        .el-tree {
            margin: 0 10px;
        }
        .el-select {
            margin: 10px;
        }
    }

    .right-div {
        width: 79%;
        height: 100%;
        // border: 1px solid #3cbfdf;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .top-div {
            width: 100%;
            height: 25%;
            display: flex;
            justify-content: space-between;

            .echartDiv100 {
                width: 22% !important;
                height: 100% !important;
                border: 1px solid #2E6099;
            }
        }

        .bottom-div {
            height: 74%;
            border: 1px solid #2E6099;
        }
    }
}
</style>