<template>
    <div class="balanceOverview">
        <headline></headline>
        <div class="left-sidebar">
            <div class="section-container">
                <div class="section-header">
                    <span>设备统计</span>
                </div>
                <div
                    v-if="!pieChartData.length && !loading.pieChart"
                    class="section-content"
                >
                    <el-empty
                        description="暂无数据"
                        :image-size="100"
                        :image="require('@/assets/img/bigScreen/empty1.png')"
                    ></el-empty>
                </div>
                <div
                    class="section-content"
                    id="pie-chart"
                    v-loading="loading.pieChart"
                    :element-loading-background="loadingColor"
                ></div>
                <div class="total-popup">
                    <div class="circle-decoration">
                        <div class="circle-total">
                            <div class="count">{{ equipmentTotalCount }}</div>
                            <div class="label">设备总数</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="section-container">
                <div class="section-header">
                    <span>当前设备状态</span>
                </div>
                <div class="section-content guage-container">
                    <div class="guage-content">
                        <img
                            :src="require('@/assets/img/bigScreen/gauge.png')"
                            alt="仪表盘"
                        />
                    </div>
                    <div class="equipment-status">
                        <div class="status-item"></div>
                        <div class="status-item"></div>
                        <div class="status-item"></div>
                    </div>
                </div>
            </div>
            <div class="section-container">
                <div class="section-header">
                    <span>设备系统来源</span>
                </div>
                <div
                    v-if="!barChartDataSource.length && !loading.barChartSource"
                    class="section-content"
                >
                    <el-empty
                        description="暂无数据"
                        :image-size="100"
                        :image="require('@/assets/img/bigScreen/empty1.png')"
                    ></el-empty>
                </div>
                <div
                    class="section-content"
                    id="bar-chart-source"
                    v-loading="loading.barChartSource"
                    :element-loading-background="loadingColor"
                ></div>
            </div>
        </div>
        <div class="right-sidebar">
            <div class="section-container">
                <div class="section-header">
                    <span>站点资产</span>
                </div>
                <div
                    v-if="
                        !barChartDataResource.length &&
                        !loading.barChartResource
                    "
                    class="section-content"
                >
                    <el-empty
                        description="暂无数据"
                        :image-size="100"
                        :image="require('@/assets/img/bigScreen/empty1.png')"
                    ></el-empty>
                </div>
                <div
                    class="section-content"
                    id="bar-chart-resource"
                    v-loading="loading.barChartResource"
                    :element-loading-background="loadingColor"
                ></div>
            </div>
            <div class="section-container">
                <div class="section-header">
                    <span>站点人员</span>
                </div>
                <div class="section-content"></div>
            </div>
            <div class="section-container">
                <div class="section-header">
                    <span>岗位统计</span>
                </div>
                <div class="section-content right-bottom">
                    <div class="triangle-img">
                        <div class="post-item post-item1">
                            <div class="count">{{ post.manager }} 人</div>
                            <div class="label">管理人员</div>
                        </div>
                        <div class="post-item post-item2">
                            <div class="count">{{ post.monitor }} 人</div>
                            <div class="label">监控人员</div>
                        </div>
                        <div class="post-item post-item3">
                            <div class="count">{{ post.collector }} 人</div>
                            <div class="label">收费人员</div>
                        </div>
                        <div class="post-item post-item4">
                            <div class="count">{{ post.other }} 人</div>
                            <div class="label">其他人员</div>
                        </div>
                    </div>
                    <img
                        class="triangle-img"
                        src="@/assets/img/bigScreen/triangle.png"
                        alt="金字塔"
                    />
                    <!-- .box{ width: 80px; height: 180px; background: red;
                    transform: perspective(0.5em) rotateY(-3deg); } -->
                </div>
            </div>
        </div>
        <h1 style="text-align: center; line-height: 400px"></h1>
    </div>
</template>

<script>
import * as echarts from 'echarts'
import headline from './headline.vue'
export default {
    components: {headline},
    data() {
        return {
            thisMenuValue: '',
            loadingColor: 'rgba(88, 115, 134, 0.3)',
            loading: {
                barChartSource: false,
                barChartResource: false,
                pieChart: false,
                guageChart: false,
            },
            barChartSource: null, // 设备系统来源
            barChartDataSource: [
                {
                    name: '通讯系统',
                    value: 65,
                },
                {
                    name: '收费系统',
                    value: 18,
                },
                {
                    name: '供配电系统',
                    value: 29,
                },
                {
                    name: '监控系统',
                    value: 40,
                },
            ],
            barChartOptionSource: null,
            barChartResource: null, // 站点资产
            barChartDataResource: [
                {
                    name: '车道',
                    value: 8,
                },
                {
                    name: '站机房',
                    value: 7,
                },
                {
                    name: 'UPS房',
                    value: 5,
                },
                {
                    name: '配电房',
                    value: 9,
                },
                {
                    name: '站房',
                    value: 15,
                },
            ],
            barChartOptionResource: null,
            pieChart: null,
            pieChartData: [
                {value: 1048, name: '通讯设备'},
                {value: 735, name: '供电设备'},
                {value: 580, name: '灯具设备'},
                {value: 484, name: '监控设备'},
                {value: 300, name: '显示器设备'},
                {value: 580, name: '收费设备'},
                {value: 484, name: '服务器'},
                {value: 300, name: '工作站'},
            ],
            pieChartOption: null,
            equipmentTotalCount: 4585,
            guageChart: null,
            guageChartData: 50,
            guageChartOpiton: null,
            // 岗位统计
            post: {
                manager: 10,
                monitor: 15,
                collector: 20,
                other: 30,
            },
        }
    },
    mounted() {
        this.thisMenuValue = this.$route.query.thisMenuValue
        this.getData()
    },
    methods: {
        getData() {
            this.drawBarChartSource()
            this.drawBarChartResource()
            this.drawPieChart()
            this.drawGuageChart()
        },
        drawBarChartSource() {
            // chart 已存在则为更新数据
            if (this.barChartSource) {
                this.barChartOptionSource.dataset.source =
                    this.barChartDataSource
                this.barChartSource.setOption(this.barChartOptionSource)
            } else {
                // chart 不存在则为初始化数据和图表
                this.barChartSource = echarts.init(
                    document.getElementById('bar-chart-source')
                )
                this.barChartOptionSource = {
                    dataset: {
                        source: this.barChartDataSource,
                    },
                    tooltip: {
                        trigger: 'axis',
                        backgroundColor: 'rgba(113, 126, 139, 0.9)',
                        borderColor: '#a9b2bc',
                        textStyle: {
                            color: '#fff',
                        },
                        confine: true,
                        position: 'bottom',
                        formatter: function (params) {
                            return (
                                '设备系统来源<br/>' +
                                params[0].data.name +
                                '：' +
                                params[0].data.value +
                                '（个）'
                            )
                        },
                    },
                    grid: [
                        {
                            top: '18%',
                            left: '10%',
                            right: '0',
                            bottom: '10%',
                        },
                    ],
                    xAxis: {
                        type: 'category',
                        axisTick: {
                            show: false,
                            alignWithLabel: true,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#808080',
                            },
                        },
                        axisLabel: {
                            show: true,
                            color: 'rgba(255,255,255,0.6)',
                        },
                    },
                    yAxis: {
                        name: '单位（个）',
                        nameTextStyle: {
                            color: 'rgba(255,255,255,0.6)',
                            padding: [0, 0, 0, 20],
                        },
                        type: 'value',
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#808080',
                            },
                        },
                        axisLabel: {
                            show: true,
                            color: 'rgba(255,255,255,0.6)',
                            formatter: (val) => {
                                if (
                                    (val >= 1 && parseInt(val, 10) === val) ||
                                    val == 0
                                ) {
                                    return val
                                } else {
                                    return
                                }
                            },
                        },
                        splitLine: {
                            show: false,
                        },
                    },
                    series: [
                        {
                            type: 'bar',
                            showBackground: true,
                            barWidth: 20,
                            itemStyle: {
                                borderRadius: [5, 5, 0, 0],
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {offset: 0, color: '#CAAD66'},
                                        {offset: 0.6, color: '#85785c'},
                                        {offset: 1, color: '#4c4d51'},
                                    ]
                                ),
                            },
                        },
                    ],
                }

                this.barChartOptionSource &&
                    this.barChartSource.setOption(this.barChartOptionSource)
                window.addEventListener('resize', () =>
                    this.barChartSource.resize()
                )
            }
        },
        drawBarChartResource() {
            // chart 已存在则为更新数据
            if (this.barChartResource) {
                this.barChartOptionSource.dataset.source =
                    this.barChartDataResource
                this.barChartResource.setOption(this.barChartOptionSource)
            } else {
                // chart 不存在则为初始化数据和图表
                this.barChartResource = echarts.init(
                    document.getElementById('bar-chart-resource')
                )
                this.barChartOptionResource = {
                    dataset: {
                        source: this.barChartDataResource,
                    },
                    tooltip: {
                        trigger: 'axis',
                        backgroundColor: 'rgba(113, 126, 139, 0.9)',
                        borderColor: '#a9b2bc',
                        textStyle: {
                            color: '#fff',
                        },
                        confine: true,
                        position: 'bottom',
                        formatter: function (params) {
                            return (
                                '站点资产<br/>' +
                                params[0].data.name +
                                '：' +
                                params[0].data.value +
                                '（个）'
                            )
                        },
                    },
                    grid: [
                        {
                            top: '18%',
                            left: '10%',
                            right: '0',
                            bottom: '10%',
                        },
                    ],
                    xAxis: {
                        type: 'category',
                        axisTick: {
                            show: false,
                            alignWithLabel: true,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#808080',
                            },
                        },
                        axisLabel: {
                            show: true,
                            color: 'rgba(255,255,255,0.6)',
                        },
                    },
                    yAxis: {
                        name: '单位（个）',
                        nameTextStyle: {
                            color: 'rgba(255,255,255,0.6)',
                            padding: [0, 0, 0, 20],
                        },
                        type: 'value',
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#808080',
                            },
                        },
                        axisLabel: {
                            show: true,
                            color: 'rgba(255,255,255,0.6)',
                            formatter: (val) => {
                                if (
                                    (val >= 1 && parseInt(val, 10) === val) ||
                                    val == 0
                                ) {
                                    return val
                                } else {
                                    return
                                }
                            },
                        },
                        splitLine: {
                            show: false,
                        },
                    },
                    series: [
                        {
                            type: 'bar',
                            showBackground: true,
                            barWidth: 20,
                            itemStyle: {
                                borderRadius: [5, 5, 0, 0],
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {offset: 0, color: '#49FFB6'},
                                        {offset: 0.6, color: '#50a58a'},
                                        {offset: 1, color: '#516663'},
                                    ]
                                ),
                            },
                        },
                    ],
                }

                this.barChartOptionResource &&
                    this.barChartResource.setOption(this.barChartOptionResource)
                window.addEventListener('resize', () =>
                    this.barChartResource.resize()
                )
            }
        },
        drawPieChart() {
            // chart 已存在则为更新数据
            if (this.pieChart) {
                this.pieChartOption.series[0].data = this.pieChartData
                this.barChartSource.setOption(this.pieChartOption)
            } else {
                // chart 不存在则为初始化数据和图表
                this.pieChart = echarts.init(
                    document.getElementById('pie-chart')
                )
                this.pieChartOption = {
                    color: [
                        '#6699FF',
                        '#66CCFF',
                        '#00E5E5',
                        '#4DFFFF',
                        '#66FF99',
                        '#80FF66',
                        '#CCFF66',
                        '#FFE666',
                    ],
                    tooltip: {
                        trigger: 'item',
                        backgroundColor: 'rgba(113, 126, 139, 0.9)',
                        borderColor: '#a9b2bc',
                        confine: true,
                        textStyle: {
                            color: '#fff',
                        },
                        formatter: '{a} <br/>{b} : {c}个 ({d}%)',
                    },
                    legend: {
                        type: 'scroll',
                        orient: 'vertical',
                        left: 'right',
                        top: 'middle',
                        icon: 'circle',
                        textStyle: {
                            color: '#E1E9F0',
                        },
                        align: 'left',
                        pageIconColor: '#E1E9F0',
                        pageIconInactiveColor: '#a2a6a8',
                        pageIconSize: 10,
                        pageTextStyle: {
                            color: '#fff',
                        },
                    },
                    series: [
                        {
                            name: '设备统计',
                            type: 'pie',
                            radius: '75%',
                            center: ['40%', '50%'],
                            data: this.pieChartData,
                            label: {show: false},
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                                },
                            },
                        },
                    ],
                }
                this.pieChartOption &&
                    this.pieChart.setOption(this.pieChartOption)
                window.addEventListener('resize', () => this.pieChart.resize())
            }
        },
        drawGuageChart() {},
    },
}
</script>

<style lang='scss' scoped>
@import '../../views/BigScreen/bigScreen.scss';
.balanceOverview{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    background: url('../../assets/img/bigScreen/bg.png') no-repeat center / 100% 100%;
}
.left-sidebar, .right-sidebar{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    gap: 10px;
}



.right-bottom{
    position: relative;
    .triangle-img{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
        width:63%;
        height: 76%;
        z-index: 2;
    }
}
.post-item{
    position: absolute;
    z-index: 1;
    &::after{
        content: '';
        position: absolute;
        z-index: 1;
        border-top: 1px solid #808080;
    }
    .count{
        font-weight: 700;
        color: #FFFFFF;
        font-size: 14px;
    }
    .label{
        color: #A0AAB2;
        font-size: 14px;
    }
}
.post-item1{
    right: -4%;
    bottom: 98%;
    &::after{
        left: -26px;
        top: 110%;
        height: 18px;
        width: 88px;
        border-left: 1px solid #808080;
    }
}
.post-item2{
    left: -4%;
    bottom: 95%;
    text-align: right;
    &::after{
        right: -10px;
        top: 110%;
        width: 76px;
        height: 40px;
        border-right: 1px solid #808080;
    }
}
.post-item3{
    right: -21%;
    bottom: 60%;
    &::after{
        left: -26px;
        top: 110%;
        width: 86px;
        height: 14px;
        border-left: 1px solid #808080;
    }
}
.post-item4{
    left: -20%;
    bottom: 57%;
    text-align: right;
    &::after{
        right: -10px;
        top: 110%;
        width: 76px;
        height: 40px;
        border-right: 1px solid #808080;
    }
}
.section-container{
    position: relative;
}
.total-popup{
    position: absolute;
    left: 40%;
    top: calc(50% + 18px);
    transform: translate(-50%, -50%);
    height: calc((100% - 36px)*0.7);
    aspect-ratio: 1/1;
    background: rgba(128, 128, 128,0.7);
    border-radius: 50%;
    pointer-events: none;
}
.circle-decoration{
    position: absolute;
    width: 66%;
    height: 66%;
    border-radius: 50%;
    background-color: #546a75;
    border: 2px solid #b3bcc4;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.circle-total{
    position: absolute;
    width: 80%;
    height: 80%;
    border-radius: 50%;
    background-color: #a0aab2;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .count{
        font-weight: 700;
        color: #FFFFFF;
        font-size: 22px;
    }
    .label{
        font-weight: 400;
        color: #FFFFFF;
        font-size: 14px;
    }
}
.guage-container{
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 10px;
    .guage-content{
        width: 200px;
        text-align: center;
        img{
            width: 200px;
            height: 200px;
        }
    }
    .equipment-status{
        width: calc(100% - 210px);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 10px;
    }
    .status-item{
        width: 134px;
        height: 50px;
        background: url("../../assets/img/bigScreen/status-border.png");
    }
}
</style>