<template>
    <view>
        <Head isBack text="画像匹配人员" />

        <view class="statistics-container">
            <view class="card">
                <view class="title">
                    <!-- <text class="bold">“基础教育” </text> -->
                    潜在不满意人员:
                    <text class="blue">{{ total }}</text>
                    人
                </view>
                <view class="log-list">
                    <view class="log-item" @tap="gotopage" :data-id="item.restId" v-for="(item, index) in list" :key="index">
                        <view>
                            <view class="user">
                                <view class="name">{{ item.restName }} {{ item.mobile }}</view>
                            </view>
                            <view class="address">地址：{{ item.houseAddress }}</view>
                        </view>

                        <image src="/static/images/right.png" mode="widthFix" class="icon" />
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import Head from '../../../../components/Head';
import { satisfactionCrowdList } from '../../../../utils/statisticsApi';
export default {
    components: {
        Head
    },
    data() {
        return {
            list: [],
            total: 0,
            params: {},
            pageNo: 1,
            pageSize: 10
        };
    },
    onLoad(options) {
        let params = {};
        let data = JSON.parse(decodeURIComponent(options.data));
        for (let key in data) {
            if (data[key]) {
                params[key] = data[key];
            }
        }
        this.setData({
            params
        });
        this.getList();
    },
    onReachBottom() {
        if (this.list.length < this.total) {
            this.setData({
                pageNo: this.pageNo + 1
            });
            this.getList();
        }
    },
    methods: {
        gotopage(e) {
            uni.navigateTo({
                url: '/subpages/statistics/pages/residentPortrait2/residentPortrait?id=' + e.currentTarget.dataset.id
            });
        },

        getList() {
            satisfactionCrowdList({
                ...this.params,
                pageNo: this.pageNo,
                pageSize: this.pageSize
            }).then(({ data }) => {
                this.setData({
                    list: this.list.concat(data.list),
                    total: data.total
                });
            });
        }
    }
};
</script>
<style>
.statistics-container {
    padding: 20rpx;
    box-sizing: border-box;
}
.card {
    background: #fff;
    border-radius: 20rpx;
    padding: 30rpx;
    margin-top: 20rpx;
}
.title {
    font-size: 30rpx;
    color: #333333;
    padding-bottom: 30rpx;
    border-bottom: 1px solid #eaeaea;
}
.bold {
    font-weight: bold;
}
.blue {
    color: #3a80e7;
}
.log-item {
    border-bottom: 1px solid #eaeaea;
    padding: 30rpx 0;
}
.log-item .user {
    display: flex;
    align-items: center;
    margin-bottom: 10rpx;
}
.log-item .icon {
    width: 48rpx;
    height: 48rpx;
}
.log-item .name {
    font-size: 32rpx;
    font-weight: 500;
    color: #333333;
}
.log-item .address {
    font-size: 28rpx;
    font-weight: 500;
    color: #999999;
}
.log-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
page {
    background: #f7f7f7;
}
</style>
