<template>
    <div class="Tourist centerChartBottom">
        <div class="tourist-title">房屋分配情况</div>
        <!-- <div id="charts" :style="{ height: '250px', width: '100%' }"></div> -->
        <div class="datalist">
            <div class="datalist-item" v-for="item, index in shebei" :key="index">
                <!-- <div class="item-border"></div> -->
                <div class="item-middle">
                    <span class="datalist-item-total">{{ item.total }}</span>
                    <span class="datalist-item-title">{{ item.title }}<span class="datalist-item-name">{{ item.name
                    }}</span></span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { httpGet } from '../../api'
export default {
    name: 'Tourist',
    data() {
        return {
            shebei: [
                { title: '已入住', total: 0, name: '(个)' },
                { title: '空房间', total: 0, name: '(个)' },
                { title: '即将到期房间', total: 0, name: '(个)' },
                // { title: '离线设备数', total: 0, name: '(个)' }
            ],
            chartsOne: {
                // title: {
                //     text: '房屋入住率'
                // },
                tooltip: {},
                //系列:决定你展示什么样的图形图标
                series: {
                    type: 'liquidFill',//系列
                    data: [],//展示的数据
                    label: {
                        normal: {
                            formatter: "",//水球上显示文字，可以设置任意文字
                            show: true,
                            textStyle: {
                                // color: '#ffffff',
                                fontSize: '25',
                                fontFamily: 'serif',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    waveAnimation: true,//动画
                    animationDuration: 3,
                    animationDurationUpdate: 0,  // 控制波浪上升
                    radius: '70%',//半径
                    outline: {//外层边框颜色设置
                        show: true,
                        borderDistance: 8,
                        itemStyle: {
                            color: 'skyblue',
                            borderColor: '#294D99',
                            borderWidth: 8,
                            shadowBlur: 20,
                            shadowColor: 'rgba(0, 0, 0, 0.25)'
                        }
                    },
                },
            },
            // Occupancyrate: '',
            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
                }]
            },
        }
    },
    async created() {

    },
    mounted() {
        // httpGet('', this.$api.getCommunityrentStatistics).then(res => { })
        let sumRoom = ''
        let Occupancyrate = ''
        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.statisticsDate.abnormalTotal = this.statisticsDate.seriesData.abnormalTotal || 0
        this.statisticsDate.offlineTotal = this.statisticsDate.seriesData.offlineTotal || 0
        this.statisticsDate.onlineTotal = this.statisticsDate.seriesData.onlineTotal || 0
        this.statisticsDate.isAppBind = this.statisticsDate.seriesData.isAppBind || 0
        this.statisticsDate.batteryLevel1 = this.statisticsDate.seriesData.batteryLevel1 || 0
        this.shebei[0].total = statisticsDate.seriesData.total
        this.shebei[1].total = statisticsDate.seriesData.isAppBind
        this.shebei[2].total = statisticsDate.seriesData.batteryLevel1
        this.shebei[3].total = statisticsDate.seriesData.offlineTotal
        // this.collectUS = statisticsDate.collectUS
        // this.sumProjects = statisticsDate.seriesData.projects
        for (let t in statisticsDate.collectUS) {
            let p = t.indexOf('site')
            if (p != -1) {
                sumRoom += statisticsDate.collectUS[t]
            }
        }
        httpGet('', this.$api.getCommonStatistics).then(async res6 => {
            console.log('222', res6)
            if (res6.success) {
                let list = res6.data
                let occupied = 0
                list.map(li => {
                    if (li.status === 1) {
                        occupied += li.total
                    }
                })
                Occupancyrate = (occupied / sumRoom).toFixed(2)
                let chartsOne = this.chartsOne
                // chartsOne.series.data[0] = Occupancyrate
                chartsOne.series.data[0] = 0.4
                // chartsOne.series.label.normal.formatter = Occupancyrate + '%'
                chartsOne.series.label.normal.formatter = '40' + '%'
                let chartsObjOne = this.$echarts.init(
                    document.getElementById("charts")
                );
                chartsObjOne.setOption(chartsOne, true);
            }
        })
        // let chartsOne = this.chartsOne
        // chartsOne.series.data[0] = this.Occupancyrate
        // chartsOne.series.label.normal.formatter = this.Occupancyrate + '%'
        // let chartsObjOne = this.$echarts.init(
        //     document.getElementById("charts")
        // );
        // chartsObjOne.setOption(chartsOne, true);
    }
}
</script>

<style scoped>
.Tourist {
    margin-top: 10px;
}
.tourist-title{
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: bold;
    color: #FFFFFF;
    width: 100%;
    background-image: linear-gradient(to right, #00BFFF 20%, transparent 100%);
    padding: 10px;
}
.centerChartBottom {
    margin-top: 10px;
}

.datalist {
    width: 90%;
    height: 80px;
    display: flex;
    padding: 5px;
    margin: 0 auto;
    margin-top: 20px;
}

.datalist-item {
    color: #e54857;
    flex: 1;
    position: relative;
    /* border: 1px solid #00BFFF; */
    margin-right: 10px;
    /* background-color: rgba(200,225,233, 0.8); */
    /* border-radius: 10px; */
    clip-path: polygon(0 0, 0 80%, 20% 100%, 100% 100%, 100% 0);
    background: radial-gradient(rgba(121, 202, 202, 0.4) 75%, rgb(146, 235, 235) 100%);

}
.item-border{
    position: absolute;
    bottom: 0;
    right: 0;
    border-width: 10px;
    border-style: solid;
    border-color: transparent #00BFFF #00BFFF transparent;
}

.datalist-item:last-child {
    margin-right: 0;
}
.datalist:last-child > .datalist-item{
    background: radial-gradient(rgba(135,206,250, 0.4) 75%, rgb(175,238,238) 100%);
    color: 	#175b88;
}

.item-middle {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.datalist-item-title {
    margin-top: 10px;
    font-size: 16px;
}

.datalist-item-total {
    font-size: 19px;
    font-weight: bold;
}
</style>