<template>
	<view >
		<view class="grxx">
			<view class="grxxItem">
				<view class="sfzhm">
					<view class="uni-list-cell-left">
						姓名:
					</view>
					<input type="text" v-model="name" />
				</view>
				<view class="sfzhm">
					<view class="uni-list-cell-left">
						手机号:
					</view>
					<view class="uni-list-cell-db">
						<input type="text" v-model="phone" />
					</view>
				</view>
				<view class="sfzhm">
					<button style="width: 50%;" size="mini" type="primary" @click="getList">查询</button>
				</view>
			</view>
		</view>
		<uni-table class="table" :loading="loading" border stripe>
			<!-- 表头行 -->
			<uni-tr>
				<uni-th width="22%" align="center">姓名</uni-th>
				<uni-th width="39%" align="center">手机号</uni-th>
				<uni-th width="39%" align="center">所属部门</uni-th>
			</uni-tr>
			<!-- 表格数据行 -->
			<uni-tr v-for="(item,index) in userList" :key="index">
				<uni-td align="center">{{item.name}}</uni-td>
				<uni-td align="center">{{item.phone}}</uni-td>
				<uni-td align="center">{{item.officeName}}</uni-td>
			</uni-tr>
		</uni-table>
		<uni-pagination class="pagin" show-icon="true" style="margin:10px" :total="pagiNation.total" @change="pagi"
			:current="pagiNation.current"></uni-pagination>

	</view>
</template>

<script>
	import {
		postRequest,
		getRequest
	} from '@/api/api.js'
	export default {
		data() {
			return {
				userList: [],
				loading: false,
				name: '',
				phone: '',
				pagiNation: {
					current: 1,
					size: 10,
					total: 0,
				},
				type: null,
				reportNum: null,
				areaType: null,
			}
		},
		onLoad(option) {
			let userType = uni.getStorageSync('userType')
			const info = JSON.parse(option.data)
			this.type = info.type
			this.reportNum = info.reportNum
			this.areaType = info.areaType
			this.officeId = info.officeId
			this.getList()
		},
		methods: {

			getList() {
				let data = {
					type: this.type,
					reportNum: this.reportNum,
					areaType: this.areaType,
					name: this.name,
					phone: this.phone,
					current: this.pagiNation.current,
					officeId: this.officeId
				}
				this.userList = []
				postRequest('/statistics/reportedResultList', data).then((res) => {
					if (res.code == '200' && res.data.records.length > 0) {
						this.loading = false;
						this.userList = res.data.records;
						this.pagiNation.total = res.data.total;
					} else {
						this.loading = false;
					}
				})
			},

			pagi(e) {
				console.log(e)
				this.pagiNation.current = e.current;
				this.getList()
			},
		}
	}
</script>

<style>
	.grxxItem {
		border-radius: 5px;
		padding: 10px;
		margin: 10px;
		box-shadow: 0px 2px 15px 3px rgba(0, 0, 0, 0.1);
	}

	/deep/.uni-combox__input {
		font-size: 14px;
	}

	.grxxItem .sfzhm {
		padding: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 84%;
		color: #999999;
		position: relative;
	}

	.sfzhm .uni-list-cell-left {
		width: 30%;
	}

	.sfzhm image {
		width: 28rpx;
		height: 30rpx;
	}

	.sfzhm .uni-list-cell-db {
		flex: 1
	}

	.sfzhm:first-of-type input {
		flex: 1;
	}

	.grxxItem .sfzhm:last-of-type {
		border: none;
	}

	.table {
		width: 94%;
		margin: 0 3%;
	}


	.tabButton {
		color: #007AFF;
		text-decoration: underline;
		font-size: 14px;
		background-color: white;
	}

	.tabButton::after {
		border: 0;
	}

	.tab {
		font-size: 14px;
		background-color: white;
	}

	.tab::after {
		border: 0;
	}
	
	.pagin {
		width:94%;
		margin: 10px 3%;
		position: absolute;
		bottom: 0;
	}
</style>
