<template>
    <div class="leftChartOne">
        <div class="chartstitle1">合同统计</div>
        <div id="chartsone" :style="{ height: '250px', width: '100%' }"></div>
        <div class="tablist">
            <div class="tablist-item">
                <div class="item-middle">
                    <span class="tablist-item-title">签约总数</span>
                    <!-- <span class="tablist-item-total"> -->
                    <div class="font-size-18 mt-1">
                        <NumberGrow :value="sumRoom" class="color-333"></NumberGrow>
                    </div>
                    <!-- </span> -->
                </div>
            </div>
            <div class="tablist-item">
                <div class="item-middle">
                    <span class="tablist-item-title">已签约</span>
                    <!-- <span class="tablist-item-total">{{ sumCard }}</span> -->
                    <div class="font-size-18 mt-1">
                        <NumberGrow :value="sumCard" class="color-333"></NumberGrow>
                    </div>
                </div>
            </div>
            <div class="tablist-item">
                <div class="item-middle">
                    <span class="tablist-item-title">已退租</span>
                    <!-- <span class="tablist-item-total">{{ sumTotal }}</span> -->
                    <div class="font-size-18 mt-1">
                        <NumberGrow :value="sumTotal" class="color-333"></NumberGrow>
                    </div>
                </div>
            </div>
            <div class="tablist-item">
                <div class="item-middle">
                    <span class="tablist-item-title">到期数</span>
                    <!-- <span class="tablist-item-total">{{ sumOpen }}</span> -->
                    <div class="font-size-18 mt-1">
                        <NumberGrow :value="sumOpen" class="color-333"></NumberGrow>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import NumberGrow from "../../components/visualizcomponent/NumberGrow.vue";
import { httpGet, httpPost } from '../../api';
export default {
    name: 'leftChartOne',
    components: { NumberGrow },
    data() {
        return {
            charts: {
                title: {},
                tooltip: {},
                legend: {},
                grud: {},
                series: [
                    {
                        type: 'pie',
                        radius: '50%',
                        center: ['50%', '50%'],
                        selectedMode: 'single',
                        data: []
                    }
                ]
            },
            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
                }]
            },
            sumRoom: 0,  // 签约总数
            sumCard: 0,   // 已签约
            sumTotal: 0,  // 已退租
            sumOpen: 0,   // 已欠费
        }
    },
    mounted() {
        let sumRoom = 0, sumCard = 0, sumTotal = 0, sumOpen = 0
        httpGet('', this.$api.getCommonStatistics).then(async res => {
            if (res.success) {
                let list = res.data
                list.map(li => {
                    if (li.status === 1) {
                        sumCard += li.total
                        this.sumCard += li.total
                    } else if (li.status === 2) {
                        sumTotal += li.total
                        this.sumTotal += li.total
                    } else if (li.status === 3) {
                        sumOpen += li.total
                        this.sumOpen += li.total
                    }
                })
                this.sumRoom = this.sumCard + this.sumOpen + this.sumTotal
                sumRoom = sumCard + sumOpen + sumTotal
                let chartsone = this.charts
                chartsone.series[0].data[0] = { value: sumRoom, name: "签约总数" }
                chartsone.series[0].data[1] = { value: sumCard, name: "已签约" }
                chartsone.series[0].data[2] = { value: sumOpen, name: "已退租" }
                chartsone.series[0].data[3] = { value: sumTotal, name: "已欠费" }
                console.log(chartsone.series[0].data, sumRoom)
                let chartsObj = this.$echarts.init(
                    document.getElementById('chartsone')
                )
                chartsObj.setOption(chartsone, true)
            }
        })
    }
}
</script>

<style scoped>
.leftChartOne {
    margin-top: 10px;
}

.chartstitle1 {
    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;
}

.tablist {
    margin-top: 10px;
    width: 100%;
    height: 60px;
    padding: 5px;
    display: flex;
    border: 1px solid #00BFFF;
    background-color: rgba(175, 238, 238, 0.4);
    /* background: linear-gradient(45deg, rgba(175,238,238, 0.4) 50%, #00BFFF 100%); */
    border-radius: 5px;
    color: #555e5d;
}

.tablist-item {
    flex: 1;
    border-right: 1px solid #00BFFF;
    position: relative;
    /* background: radial-gradient(rgba(175,238,238, 0.4) 70%, #00BFFF 100%); */
    /* background:-webkit-gradient(radial, 50% 50%, 5, 50% 50%, 100%, from(#fca8fd),to(#fd7aff)); */
}

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

.tablist-item:last-child {
    border-right: none;
}

.tablist-item-title {
    font-size: 12px;
    margin-bottom: 5px;
}

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