<template>
    <div class="rightChartcenterthree">
        <div class="rightChartcentertwo-title">设备电量占比</div>
        <div class="rightChartcentertwo">
            <div id="rightChartcentertwo" :style="{ width: '100%', height: '250px' }"></div>
            <div class="battery">
                <div class="battery-item" v-for="item, index in batterylist" :key="index">
                    <span class="battery-item-title">{{ item.title }}</span>
                    <span class="battery-item-number" :class="index < 5 ? colors[index] : ''">{{ item.total }} 个</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'rightChartcentertwo',
    data() {
        return {
            charts: {
                // title: {
                //     text: '设备电量占比',
                //     textStyle: {
                //         color: '#00BFFF',

                //     }
                // },
                tooltip: {},
                series: [
                    {
                        type: 'funnel',
                        top: 10,
                        // bottom: 60,
                        left: '10%',
                        width: '70%',
                        height: '80%',
                        // min: 0,
                        // max: 100,
                        minSize: '0%',
                        maxSize: '100%',
                        sort: 'ascending',
                        gap: 2,
                        label: {
                            show: true,
                            position: 'inside'
                        },
                        labelLine: {
                            length: 10,
                            lineStyle: {
                                width: 1,
                                type: 'solid'
                            }
                        },
                        itemStyle: {
                            borderColor: '#fff',
                            borderWidth: 1
                        },
                        emphasis: {
                            label: {
                                fontSize: 20
                            }
                        },
                        data: [
                            { value: 0, name: '电量(0~20%)' },
                            { value: 0, name: '电量(20~40%)' },
                            { value: 0, name: '电量(40~60%)' },
                            { value: 0, name: '电量(60~80%)' },
                            { value: 0, name: '电量(80~100%)' }
                        ]
                    }
                ]
            },
            statisticsDateDefault: {
                "cdata": ["0", "0", "0", "0", "0"],
                "seriesData": {
                    "abnormalTotal": 0,
                    "batteryLevel1": 0,
                    "batteryLevel2": 0,
                    "batteryLevel3": 0,
                    "batteryLevel4": 0,
                    "batteryLevel5": 0,
                    "closeTotal": 0,
                    "offlineTotal": 0,
                    "onlineTotal": 0,
                    "openTotal": 0,
                    "projects": 0,
                    "total": 0
                },
                "collectUS": {
                    "card300": 0,
                    "site200": 0,
                    "card200": 0,
                    "userCount": 0,
                    "site300": 0,
                    "lock300": 0,
                    "site400": 0,
                    "lock200": 0,
                    "houseSensor400": 0
                },
                "collectOpenLock": {
                    "week300": [{
                        "count": 0,
                        "order": "2022-05-15"
                    }, {
                        "count": 0,
                        "order": "2022-05-16"
                    }, {
                        "count": 0,
                        "order": "2022-05-17"
                    }, {
                        "count": 0,
                        "order": "2022-05-18"
                    }, {
                        "count": 0,
                        "order": "2022-05-19"
                    }, {
                        "count": 0,
                        "order": "2022-05-20"
                    }, {
                        "count": 0,
                        "order": "2022-05-21"
                    }, {
                        "count": 0,
                        "order": "2022-05-22"
                    }, {
                        "count": 0,
                        "order": "2022-05-23"
                    }, {
                        "count": 0,
                        "order": "2022-05-24"
                    }, {
                        "count": 0,
                        "order": "2022-05-25"
                    }, {
                        "count": 0,
                        "order": "2022-05-26"
                    }],
                    "week200": [{
                        "count": 0,
                        "order": "2022-05-19"
                    }, {
                        "count": 0,
                        "order": "2022-05-20"
                    }, {
                        "count": 0,
                        "order": "2022-05-21"
                    }, {
                        "count": 0,
                        "order": "2022-05-22"
                    }, {
                        "count": 0,
                        "order": "2022-05-23"
                    }, {
                        "count": 0,
                        "order": "2022-05-24"
                    }, {
                        "count": 0,
                        "order": "2022-05-25"
                    }, {
                        "count": 0,
                        "order": "2022-05-26"
                    }],
                    "allCount300": 0,
                    "allCount200": 0
                },
                "weekopenlock": [{
                    "order": "2022-05-19",
                    "count": 0
                }, {
                    "order": "2022-05-20",
                    "count": 0
                }, {
                    "order": "2022-05-21",
                    "count": 0
                }, {
                    "order": "2022-05-22",
                    "count": 0
                }, {
                    "order": "2022-05-23",
                    "count": 0
                }, {
                    "order": "2022-05-24",
                    "count": 0
                }, {
                    "order": "2022-05-25",
                    "count": 0
                }, {
                    "order": "2022-05-26",
                    "count": 0
                }],
                "addDeviceWeek": [{
                    "order": "2022/05/20",
                    "count": 0
                }, {
                    "order": "2022/05/21",
                    "count": 0
                }, {
                    "order": "2022/05/22",
                    "count": 0
                }, {
                    "order": "2022/05/23",
                    "count": 0
                }, {
                    "order": "2022/05/24",
                    "count": 0
                }, {
                    "order": "2022/05/25",
                    "count": 0
                }, {
                    "order": "2022-05-26",
                    "count": 0
                }]
            },
            batterylist: [
                { title: '电量 (0~20%)', total: 0 },
                { title: '电量 (20~40%)', total: 0 },
                { title: '电量 (40~60%)', total: 0 },
                { title: '电量 (60~80%)', total: 0 },
                { title: '电量 (80~100%)', total: 0 },
            ],
            colors: ['one', 'two', 'three', 'four', 'five']
        }
    },
    mounted() {
        let charts = this.charts
        this.$store.commit('setUser1')
        if (!localStorage.getItem('statisticsDate')) {
            let data = this.statisticsDateDefault
            localStorage.setItem('statisticsDate', JSON.stringify(data))
            this.reload()
        }
        let statisticsDate = JSON.parse(localStorage.getItem('statisticsDate'))
        this.statisticsDate = statisticsDate
        this.batterylist[0].total = this.statisticsDate.seriesData.batteryLevel1
        this.batterylist[1].total = this.statisticsDate.seriesData.batteryLevel2
        this.batterylist[2].total = this.statisticsDate.seriesData.batteryLevel3
        this.batterylist[3].total = this.statisticsDate.seriesData.batteryLevel4
        this.batterylist[4].total = this.statisticsDate.seriesData.batteryLevel5
        charts.series[0].data[0].value = this.statisticsDate.seriesData.batteryLevel1
        charts.series[0].data[1].value = this.statisticsDate.seriesData.batteryLevel2
        charts.series[0].data[2].value = this.statisticsDate.seriesData.batteryLevel3
        charts.series[0].data[3].value = this.statisticsDate.seriesData.batteryLevel4
        charts.series[0].data[4].value = this.statisticsDate.seriesData.batteryLevel5
        console.log(charts)
        let chartsObj = this.$echarts.init(
            document.getElementById('rightChartcentertwo')
        )
        chartsObj.setOption(charts, true)
    }
}
</script>

<style scoped>
.rightChartcentertwo {
    margin-top: 50px;
    display: flex;
    align-items: center;
}
.rightChartcenterthree{
    margin-top: 50px;
}
.rightChartcentertwo-title{
    font-size: 20px;
    font-weight: bold;
    color: #FFFFFF;
    width: 100%;
    background-image: linear-gradient(to right, #00BFFF 20%, transparent 100%);
    padding: 10px;
}
.battery {
    width: 70%;
    height: 70%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.battery-item {
    display: flex;
    margin-top: 15px;
    padding: 5px;
    justify-content: space-between;
}

.battery-item-title {
    color: #333333;
    font-size: 16px;
}

.battery-item-number {
    font-size: 18px;
}

.one {
    color: #FF4C4C;
}

.two {
    color: #FF6383;
}

.three {
    color: #FF9933;
}

.four {
    color: #FFC635;
}

.five {
    color: #31DC72;
}</style>