<template>
    <div class="centerChartBottom">
        <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 class="datalist">
            <div class="datalist-item" v-for="item, index in list" :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, httpPost } from '../../api';
export default {
    name: 'centerChartBottom',
    data() {
        return {
            list: [
                { title: '房间总数', total: 0, name: '(间)' },
                { title: '人员总数', total: 0, name: '(人)' },
                { title: '总收入', total: 0, name: '(万元)' },
                { title: '开锁总数', total: 0, name: '(次)' },
            ],
            shebei: [
                { title: '总设备', total: 0, name: '(个)' },
                { title: '异常数', total: 0, name: '(个)' },
                { title: '低电数', total: 0, name: '(个)' },
                { title: '离线设备数', total: 0, name: '(个)' }
            ],
            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
                }]
            }
        }
    },
    mounted() {
        httpGet('', this.$api.getCommunityrentStatistics).then(res => { })
        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
        // 总收入
        httpGet('', this.$api.getTotalRevenue).then(res => {
            if (res.success) {
                this.list[2].total = (res.data / 1000000).toFixed(2)
            }
        })
        for (let t in statisticsDate.collectUS) {
            // 人员总数
            let l = t.indexOf('card')
            if (l != -1) {
                this.list[1].total += statisticsDate.collectUS[t]
            }
            // 房间总数
            let p = t.indexOf('site')
            if (p != -1) {
                this.list[0].total += statisticsDate.collectUS[t]
            }
        }
        // 开锁总数
        let data = { pageNum: 1, pageSize: 20, orderBy: "open_time desc", q: "{}" }
        httpGet(data, this.$api.orderLockOpen).then(async (res) => {
            this.list[3].total = res.data.total || 0
        })
    }
}
</script>

<style scoped>
.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>