<template>
    <view class="overview">
        <view class="top">
            <view class="item">
                <view class="num">
                    {{overViewInfo.newTotal}}
                </view>
                <view class="type">
                    12345事件数
                </view>
            </view>
            <view class="item">
                <view class="num">
                    {{overViewInfo.newResolveNum}}
                </view>
                <view class="type">
                    已办结
                </view>
            </view>
            <view class="item">
                <view class="num">
                    {{overViewInfo.newUnResolveNum}}
                </view>
                <view class="type">
                    未办结
                </view>
            </view>
        </view>
        <!-- <view class="bot">
            <view class="item">
                <view class="num">
                    24255
                </view>
                <view class="type">
                    网格化事件
                </view>
            </view>
            <view class="item">
                <view class="num">
                    24255
                </view>
                <view class="type">
                    已办结
                </view>
            </view>
            <view class="item">
                <view class="num">
                    24255
                </view>
                <view class="type">
                    未办结
                </view>
            </view>
        </view> -->
        <view class="resi">
            <view class="item">
                <view class="num">
                    {{overViewInfo.userTotal}}
                </view>
                <view class="type">
                    居民服务
                </view>
            </view>
            <view class="item">
                <view class="num">
                    {{overViewInfo.userResolveNum}}
                </view>
                <view class="type">
                    已办结
                </view>
            </view>
            <view class="item">
                <view class="num">
                    {{overViewInfo.userUnResolveNum}}
                </view>
                <view class="type">
                    未办结
                </view>
            </view>
        </view>
        <view class="suggest">
            <view class="item">
                <view class="num">
                    {{overViewInfo.ideaTotal}}
                </view>
                <view class="type">
                    人民建议
                </view>
            </view>
            <view class="item">
                <view class="num">
                    {{overViewInfo.ideaResolveNum}}
                </view>
                <view class="type">
                    已办结
                </view>
            </view>
            <view class="item">
                <view class="num">
                    {{overViewInfo.ideaUnResolveNum}}
                </view>
                <view class="type">
                    未办结
                </view>
            </view>
        </view>
    </view>
</template>

<script>
	import api from '../../../../utils/api';
    const app = getApp();

export default {
    data() {
        return {
            agencyId:app.globalData.user.agencyId,
            overViewInfo:{}
        };
    },
    created() { 
        this.getData()
    },
    methods: {
        getData(){
            
            api.statisticEventInfo({agencyId:this.agencyId}).then(res=>{
                if(res.code === 0){
                    console.log(res);
                    this.overViewInfo = res.data
                }
            }).catch(err=>{
                console.log(err);
                
            })
        }
    },
    components: {},
    computed: {},
    watch: {},
}
</script>

<style lang='scss' scoped>
.overview {
    display: flex;
    flex-direction: column;

    .top {
        background: url('../../../../static/images/statistics/top.png');

        .item {
            flex: 1;
            position: relative;

            &::after {
                content: ' ';
                width: 1px;
                height: 13px;
                background: #ff9466;
                position: absolute;
                left: 0;
                top: 15px;
            }

        }

        &>:first-child {
            &::after {
                display: none;
            }

            .num {
                color: #ff4a43;
            }

            .type {
                color: #ff7672;
            }
        }
    }

    .bot {
        background: url('../../../../static/images/statistics/bot.png');
        margin-top: 8px;

        .item {
            flex: 1;
            position: relative;

            &::after {
                content: ' ';
                width: 1px;
                height: 13px;
                background: #ff844d;
                position: absolute;
                left: 0;
                top: 15px;
            }

        }

        &>:first-child {
            &::after {
                display: none;
            }

            .num {
                color: #ff882b;
            }

            .type {
                color: #ff964c;
            }
        }
    }

    .resi {
        background: url('../../../../static/images/statistics/resi.png');
        margin-top: 8px;

        .item {
            flex: 1;
            position: relative;

            &::after {
                content: ' ';
                width: 1px;
                height: 13px;
                background: #52bcb0;
                position: absolute;
                left: 0;
                top: 15px;
            }
        }

        &>:first-child {
            &::after {
                display: none;
            }

            .num {
                color: #00a99a;
            }

            .type {
                color: #52bcb0;
            }
        }
    }

    .suggest {
        background: url('../../../../static/images/statistics/suggest.png');
        margin-top: 8px;

        .item {
            flex: 1;
            position: relative;

            &::after {
                content: ' ';
                width: 1px;
                height: 13px;
                background: #8cadf5;
                position: absolute;
                left: 0;
                top: 15px;
            }
        }

        &>:first-child {
            &::after {
                display: none;
            }

            .num {
                color: #5888f0;
            }

            .type {
                color: #6992ee;
            }
        }
    }

    .top,
    .bot,
    .resi,
    .suggest {
        display: flex;
        align-items: center;
        justify-content: space-around;
        height: 68px;
        background-size: 100% 100%;

        .num {
            font-size: 18px;
            color: #333333;
            font-weight: bold;
            text-align: center;
        }

        .type {
            text-align: center;
            font-size: 13px;
            color: #A3ABBA;
        }


    }
}
</style>
