<template>
	<view>
		<view class="grxx">
			<view class="grxxItem">
				<view class="sfzhm" >
					<view class="uni-list-cell-left">
						日期:
					</view>
					<view class="example-body">
						<uni-datetime-picker :clearIcon="false" :border="false" type="date" :disabled="false" v-model="time" @change="bindChange"  />
					</view>
				</view>
				<view class="sfzhm">
					<view class="uni-list-cell-left">
						流调名称:
					</view>
					<view class="uni-list-cell-db">
						<uni-combox :candidates='numList' v-model="numData" @input="numInput"></uni-combox>
					</view>
				</view>
				<view class="sfzhm">
					<button style="width: 50%;" size="mini" type="primary" @click="searchData">统计</button>
				</view>
			</view>
		</view>
		<uni-table class="table" :loading="loading" @selection-change="selects" border stripe >
			<!-- 表头行 -->
			<uni-tr>
				<uni-th width="20%" align="center">部门名称</uni-th>
				<uni-th  width="20%" align="center">金山</uni-th>
				<uni-th  width="20%" align="center">市区</uni-th>
				<uni-th  width="20%" align="center" >不在院</uni-th>
				<uni-th  width="20%" align="center" >体温异常</uni-th>
			</uni-tr>
			<!-- 表格数据行 -->
			<uni-tr v-for="(item,index) in userList" :key="index">
				<uni-td align="center">{{item.officeName}}</uni-td>
				<uni-td align="center">
					<button :class="item.jsAlreadyCount>0?'tabButton':'tab'" @click="item.jsAlreadyCount>0?clickNum(item.officeId,2,1):''" type="default">{{item.jsAlreadyCount}}</button>
				</uni-td>
				<uni-td align="center">
					<button :class="item.sqAlreadyCount>0?'tabButton':'tab'" @click="item.sqAlreadyCount>0?clickNum(item.officeId,2,2):''" type="default">{{item.sqAlreadyCount}}</button>
				</uni-td>
				<uni-td align="center">
					<button :class="item.outAlreadyCount>0?'tabButton':'tab'" @click="item.outAlreadyCount>0?clickNum(item.officeId,2,3):''" type="default">{{item.outAlreadyCount}}</button>
				</uni-td>
				<uni-td align="center">
					<button :class="item.abnormalCount>0?'tabButton':'tab'" @click="item.abnormalCount>0?clickNum(item.officeId,2,4):''" type="default">{{item.abnormalCount}}</button>
				</uni-td>
			</uni-tr>
		</uni-table>
		
	</view>
</template>

<script>
	import {
		postRequest,
		getRequest
	} from '@/api/api.js'
	export default {
		data() {
			return {
				userList:[],
				total:0,
				loading:false,
				tableData:{
					  companyId: "",
					  current: 1,
					  id: "",
					  officeId: "",
					  openId: "",
					  userType:'',
					  orders: [
						{
						  asc: true,
						  column: ""
						}
					  ],
					  size: 10
					},
				isnb:0,
				picTime:false,
				time:'',
				numList:[],
				numData:'',
				visible: true,
				indicatorStyle: `height: 50px;`,
			}
		},
		onLoad() {
			let userType=uni.getStorageSync('userType')
			this.tableData.userType= userType;
			let date = new Date();
			let mouth = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
			let dates = date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate();
			this.time = date.getFullYear() + "-" + mouth + "-" + dates; //表示当前日期
			
		},
		methods: {
			//时间选择器变化
			bindChange: function(date) {
				this.time=date;
				this.postLDList()
			},
			postLDList(){
				this.numList = []
				this.numData = ''
				this.userList = []
				let data={
					type:0,  //0:每日流调，1：临时流调，2：在院流调
					createDate:this.time
				}
				postRequest('/dailyReportNum/findListByCodeAndType',data).then(res=>{
					if(res.code=='200'){
						let list=res.data;
						list.forEach(item=>{
							this.numList.push(item.num)
						})
						this.getList();
					}
				})
			},
			searchData(){
				if(this.time==''){
					uni.showModal({
						title: '提示',
						showCancel: false,
						content: '时间不能为空',
						success: function(res) {
					
						}
					})
				}
				if(this.numData==''){
					uni.showModal({
						title: '提示',
						showCancel: false,
						content: '流调编号不能为空',
						success: function(res) {
					
						}
					})
				}else{
					this.getList();
				}
			},
			numInput(value){
				this.numData = value
			},
			getList(){
				let data={
					type:2,
					reportNum:this.numData
				}
				this.userList = []
				postRequest('/statistics/reportedResultStatistics',data).then((res)=>{
					if(res.code=='200' && res.data.length>0){
						this.loading=false;
						this.userList=res.data;
					}else{
						this.loading=false;
					}
				})
			},
			selects(ss){
				let list=[]
				let index=ss.detail.index;
				index.forEach(item=>{
					list.push(this.userList[item].id)
				})
				this.userIdlist=list
			},
			clickNum(officeId,type,areaType) {
				console.log(officeId)
				let data={
					officeId: officeId,
					areaType,
					type,
					reportNum:this.numData
				}
				uni.navigateTo({
					url:`/pages/ld/sfInfo?data=${JSON.stringify(data)}`
				})
			}
		}
	}
</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%;
	}
	
	/* 时间选择器 */
	.picTime {
		z-index: 10;
		height: 100%;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		bottom: 0;
		left: 0;
	}
	
	.uni-padding-wrap {
		position: absolute;
		bottom: 400rpx;
		left: 0;
		width: 750rpx;
		background-color: white;
		display: flex;
		justify-content: center;
		padding: 10px 0;
	}
	
	.uni-padding-wrap button {
		height: 30px;
		line-height: 30px;
		font-size: 15px;
	}
	
	.uni-padding-wrap button:last-of-type {
		background-color: #007AFF;
		color: white;
	}
	
	.pickers {
		position: fixed;
		bottom: 0;
		left: 0;
		text-align: center;
		width: 750rpx;
		height: 400rpx;
		margin-top: 20rpx;
		background-color: white;
	}
	
	.pickers .picker-view {
		width: 750rpx;
		height: 400rpx;
		margin-top: 20rpx;
		background-color: white;
	}
	.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;
	}
</style>
