<template>
    <div>
        <div class="title">数据统计分析</div>
        <div class="leftChartcenter">
            <div class="leftChartcenterlistone">
                <div class="leftchart-item" v-for="item, index in list2" :key="index">
                    <div class="item-middle">
                        <div class="item-title">{{ item.title }} (个)</div>
                        <div class="item-total">{{ item.total }}</div>
                    </div>
                </div>
            </div>
            <div class="leftChartcenterlistone">
                <div class="leftchart-item" v-for="item, index in list" :key="index">
                    <div class="item-middle">
                        <div class="item-title">{{ item.title }} (个)</div>
                        <div class="item-total">{{ item.total }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { httpGet, httpPost } from '../../api';
export default {
    name: 'leftChartcenter',
    data() {
        return {
            list: [
                { title: '总设备', total: 0 },
                { title: '异常数', total: 0 },
                { title: '低电数', total: 0 },
                { title: '离线设备数', total: 0 }
            ],
            list2: [
                { title: '合同数', total: 0 },
                { title: '已签约', total: 0 },
                { title: '已到期', total: 0 },
                { title: '已欠费', total: 0 }
            ],
            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
                }]
            }
        }
    },
    methods: {
        // 获取合约
        getLeasesList() {
            let data = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                orderBy: "create_time desc",
            }
            httpPost(data, this.$api.postLeasesList).then(res => {
                if (res.success) {
                    this.list2[0].total = res.data.total
                } else {
                    this.$message.error(res.message)
                }
            })
        },
        // 获取合约状态
        getLeasesStatus() {
            httpGet('', this.$api.getLeasesStatusstatistics).then(res => {
                if (res.success) {
                    let list = res.data
                    list.map(li => {
                        if (li.value === 1) {
                            this.list2[1].total += li.total
                        } else if (li.value === 2) {
                            this.list2[3].total += li.total
                        }
                    })
                    this.list2[2].total = this.list2[0].total - this.list2[1].total - this.list2[3].total
                }
            })
        },
    },
    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.list[0].total = statisticsDate.seriesData.total
        this.list[1].total = statisticsDate.seriesData.isAppBind
        this.list[2].total = statisticsDate.seriesData.batteryLevel1
        this.list[3].total = statisticsDate.seriesData.offlineTotal
        // 合同等
        this.getLeasesList()
        this.getLeasesStatus()
    }
}
</script>

<style scoped>
.title{
    height: 50px;
    width: 100%;
    line-height: 50px;
    font-size: 18px;
    font-weight: bold;
}
.leftChartcenter {
    width: 100%;
    height: 85%;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    /* justify-content: space-around; */
}

.leftChartcenterlistone {
    height: 60px;
    width: 100%;
    border: 1px solid pink;
    border-radius: 5px;
    padding: 10px;
    display: flex;
}
.leftChartcenterlistone:last-child{
    margin-top: 20px;
}

.leftchart-item {
    position: relative;
    flex: 1;
    border-right: 1px solid pink;
}

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

.item-title {
    font-size: 15px;
}

.item-total {
    margin-top: 10px;
    font-size: 17px;
}

.leftchart-item:last-child {
    border-right: none;
}</style>