<template>
    <view class="num-list">
        <view class="num-item" @tap="gotopage" data-url="/subpages/statistics/pages/qzbmy/qzbmy?countType=event">
            <view class="txt">
                <text>事件未解决 的人数</text>
            </view>
            <view class="num">{{ unSolvedNum }}</view>
        </view>
        <view class="num-item" @tap="gotopage" data-url="/subpages/statistics/pages/qzbmy/qzbmy?countType=demand">
            <view class="txt">
                <text>需求未满足 的人数</text>
            </view>
            <view class="num">{{ unFinishNum }}</view>
        </view>
        <view class="num-item" @tap="gotopage" data-url="/subpages/statistics/pages/qzbmy/qzbmy?countType=service">
            <view class="txt">
                <text>应享未享服务 的人数</text>
            </view>
            <view class="num">{{ noServiceNum }}</view>
        </view>
    </view>
</template>

<script>
import { potentialSatisfactionGroup } from '../../../../utils/statisticsApi';
export default {
    data() {
        return {
            unSolvedNum: 0,
            unFinishNum: 0,
            noServiceNum: 0
        };
    },
    props: {},
    mounted() {
        // 处理小程序 ready 生命周期
        this.$nextTick(() => this.ready());
    },
    methods: {
        ready() {
            this.getData();
        },

        gotopage({ currentTarget: { dataset } }) {
            const { url } = dataset;
            uni.navigateTo({
                url
            });
        },

        getData() {
            potentialSatisfactionGroup().then(({ data }) => {
                this.setData({
                    unSolvedNum: data.unSolvedNum,
                    unFinishNum: data.unFinishNum,
                    noServiceNum: data.noServiceNum
                });
            });
        }
    },
    created: function () {}
};
</script>
<style>
.num-list {
    display: flex;
    width: 100%;
    justify-content: space-between;
    position: relative;
}
.num-list .num-item {
}
.num-list .num-item:after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    top: calc(50% - 45rpx);
    width: 1rpx;
    height: 90rpx;
    background: #c1c1c1;
    opacity: 0.66;
}
.num-list .num-item:nth-of-type(1):after {
    left: 33.333333%;
}
.num-list .num-item:nth-of-type(2):after {
    left: 66.666666%;
}
.num-list .num-item:last-child:after {
    display: none;
}
.num-list .num-item .txt {
    font-size: 28rpx;
    font-weight: 500;
    color: #999999;
    line-height: 38rpx;
    margin-bottom: 30rpx;
}
.num-list .num-item .num {
    font-size: 42rpx;
    font-weight: bold;
    color: #333333;
    line-height: 42rpx;
}
</style>
