<template>
    <view>
        <Head isBack :text="tabList[type].label" />
        <view class="statistics-container">
            <view class="card">
                <view class="titles" v-if="type === 'addressEvent' || type === 'addressMobileEvents'">地点：{{ data.address }}</view>
                <view class="titles" v-if="type === 'mobileEvent'">姓名：{{ data.name }}</view>
                <view class="sub-tit" v-if="type === 'mobileEvent'">联系电话：{{ data.mobile }}</view>
                <view class="sub-tit" v-if="type === 'addressEvent'">类别：{{ data.categoryName }}</view>
                <view class="sub-tit">
                    投诉次数：
                    <text class="count-num">{{ data.amount }}</text>
                </view>
            </view>
            <view class="card">
                <view class="event-list">
                    <view class="event-item" @tap="gotoPage" :data-id="item.icEventId" v-for="(item, index) in list" :key="index">
                        <view>
                            <view class="userInfo">
                                <view class="name">{{ item.name }} {{ item.mobile }}</view>
                                <view class="status">{{ item.statusName }}</view>
                            </view>
                            <view class="address">
                                <view class="grid">{{ item.gridName }}</view>
                                <view class="time">{{ item.createdTime }}</view>
                            </view>
                            <view class="desc">
                                {{ item.eventContent }}
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import Head from '../../../../components/Head';
import { dwdEventList } from '../../../../utils/statisticsApi';
const app = getApp();
export default {
    components: {
        Head
    },
    data() {
        return {
            tabList: {
                addressEvent: {
                    label: '同地点同类型',
                    value: 'addressEvent'
                },
                addressMobileEvents: {
                    label: '同区域不同类型',
                    value: 'addressMobileEvents'
                },
                mobileEvent: {
                    label: '同一人员',
                    value: 'mobileEvent'
                }
            },

            type: '',

            data: {
                address: '',
                name: '',
                mobile: '',
                categoryName: '',
                amount: ''
            },

            list: [],
            pageNo: 1,
            total: 0,
            label: ''
        };
    },
    onLoad(options) {
        this.setData({
            type: options.type,
            data: options.data ? JSON.parse(options.data) : ''
        });
        this.getList();
    },
    onReachBottom() {
        if (this.list.length < this.total) {
            this.setData({
                pageNo: this.pageNo + 1
            });
            this.getList();
        }
    },
    methods: {
        getList() {
            let params = {
                pageNo: this.pageNo,
                pageSize: 10
            };
            let detail = this.data;
            if (this.type === 'addressEvent') {
                params.secondIdList = [detail.categoryId];
            }
            if (this.type === 'addressEvent' || this.type === 'addressMobileEvents') {
                params.content = detail.address;
            }
            if (this.type === 'mobileEvent') {
                params.mobile = detail.mobile;
            }
            dwdEventList(params).then((res) => {
                this.setData({
                    total: res.data.total,
                    list: this.list.concat(res.data.list)
                });
            });
        },

        gotoPage({
            currentTarget: {
                dataset: { id }
            }
        }) {
            uni.navigateTo({
                url: '/subpages/statistics/pages/event/detail/detail?id=' + id
            });
        }
    }
};
</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;
    margin-bottom: 60rpx;
}
.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;
}
.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;
}
.titles {
    font-size: 34rpx;
    font-weight: 500;
    color: #333333;
    margin-bottom: 30rpx;
}
.sub-tit {
    margin-bottom: 25rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: #666666;
}
.count-num {
    font-size: 40rpx;
    font-weight: bold;
    color: #ff783c;
}
.event-list .event-item:first-child {
    padding-top: 0;
}
.event-list .event-item {
    border-bottom: 1px solid #eaeaea;
    padding: 30rpx 0;
}
.event-list .event-item .userInfo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15rpx;
}
.event-list .event-item .userInfo .name {
    font-size: 34rpx;
    font-weight: bold;
    color: #333333;
}
.event-list .event-item .userInfo .status {
    font-size: 28rpx;
    font-weight: 500;
    color: #13c8bd;
}
.event-list .event-item .address {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20rpx;
}
.event-list .event-item .address .grid {
    font-size: 28rpx;
    font-weight: 400;
    color: #666666;
}

.event-list .event-item .address .time {
    font-size: 26rpx;
    font-weight: 500;
    color: #c1c1c1;
}
.event-list .event-item .desc {
    font-size: 32rpx;
    font-weight: 500;
    color: #333333;
    line-height: 48rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    height: 144rpx;
}
</style>
