<template>
	<view>
		<view class="grxx">
			<view class="grxxItem">
				<view class="sfzhm" @click="picXs">
					<text>日期</text>
					<input type="text" v-model="time" placeholder="请选择日期" />
					<image src="../../static/icon/rili.png" mode=""></image>
				</view>
			</view>
		</view>
		<uni-table :loading="loading" @selection-change="selects" border stripe>
			<!-- 表头行 -->
			<uni-tr>
				<uni-th width="70" rowspan="2" align="center">机构</uni-th>
				<uni-th align="center" colspan="2">全部</uni-th>
				<uni-th colspan="2" align="center">金山</uni-th>
				<uni-th colspan="2" align="center">市区</uni-th>
			</uni-tr>
			<uni-tr>
				<uni-th width="80" align="center">待填报</uni-th>
				<uni-th width="80" align="center">已填报</uni-th>
				<uni-th width="80" align="center">待填报</uni-th>
				<uni-th width="80" align="center">已填报</uni-th>
				<uni-th width="80" align="center">待填报</uni-th>
				<uni-th width="80" 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.noneCount>0?'tabButton':'tab'" @click="item.noneCount>0?clickNum(item.officeId,null,0):''" type="default">{{item.noneCount}}</button>
				</uni-td>
				<uni-td align="center">
					<button :class="item.alreadyCount>0?'tabButton':'tab'" @click="item.alreadyCount>0?clickNum(item.officeId,null,1):''" type="default">{{item.alreadyCount}}</button>
				</uni-td>
				<uni-td align="center">
					<button :class="item.jsNoneCount>0?'tabButton':'tab'" @click="item.jsNoneCount>0?clickNum(item.officeId,1,0):''" type="default">{{item.jsNoneCount}}</button>
				</uni-td>
				<uni-td align="center">
					<button :class="item.jsAlreadyCount>0?'tabButton':'tab'" @click="item.jsAlreadyCount>0?clickNum(item.officeId,1,1):''" type="default">{{item.jsAlreadyCount}}</button>
				</uni-td>
				<uni-td align="center">
					<button :class="item.sqNoneCount>0?'tabButton':'tab'" @click="item.sqNoneCount>0?clickNum(item.officeId,2,0):''" type="default">{{item.sqNoneCount}}</button>
				</uni-td>
				<uni-td align="center">
					<button :class="item.sqAlreadyCount>0?'tabButton':'tab'" @click="item.sqAlreadyCount>0?clickNum(item.officeId,2,1):''" type="default">{{item.sqAlreadyCount}}</button>
				</uni-td>
			</uni-tr>
		</uni-table>
		<!-- 时间选择器 -->
		<view v-show="picTime" class="picTime">
			<view class="uni-padding-wrap">
				<button type="default" @click="picQx">取消</button>
				<button type="default" @click="picQd">确定</button>
			</view>
			<view class="pickers">
				<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange"
					class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
					</picker-view-column>
				</picker-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		postRequest,
		getRequest
	} from '../../api/api.js'
	export default {
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
			const days = []
			const day = date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()
			for (let i = date.getFullYear() - 2; i <= date.getFullYear(); i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				if (i < 10) {
					months.push('0' + i)
				} else {
					months.push(i)
				}
			}
			for (let i = 1; i <= 31; i++) {
				if (i < 10) {
					days.push('0' + i)
				} else {
					days.push(i)
				}
			}
			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: '',

				years,
				months,
				days,
				timers: year + '-' + month + '-' + day,
				value: [9999, month - 1, day - 1],
				visible: true,
				indicatorStyle: `height: 50px;`,
			}
		},
		mounted() {
			let userType = uni.getStorageSync('userType')
			this.tableData.userType = userType;
			this.loading = true;
			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; //表示当前日期
			this.getList();
		},
		methods: {
			//时间选择器变化
			bindChange: function(e) {
				const val = e.detail.value
				let year = this.years[val[0]]
				let month = this.months[val[1]]
				let day = this.days[val[2]]
				let times = year + '-' + month + '-' + day;
				this.time = times;
			},
			//时间选择器点击取消
			picQx() {
				this.picTime = false;
				this.getList();
			},
			picQd() {
				this.picTime = false;
				this.getList();
			},
			//点击弹出时间选择器
			picXs() {
				this.picTime = true
			},
			getList() {
				postRequest('/statistics/sysUserReportedStatistics', {schedul:this.time}).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
			},
			pagi(e) {
				this.tableData.current = e.current;
				this.getList()
			},
			clickNum(officeId,areaType,type) {
				let data={
					officeId,
					areaType,
					type,
					schedul:this.time
				}
				uni.navigateTo({
					url:`/pages/userList/userList?data=${JSON.stringify(data)}&type=yn`
				})
			}
		}
	}
</script>

<style>
	.nav {
		padding: 10px;
		display: flex;
		justify-content: space-evenly;
	}

	.nav button {
		width: 32%;
		height: 10%;
		margin: 0 3px;
		font-size: 13px;
	}

	.uni-table {
		font-size: 14px;
	}

	.butts {
		background-color: #007AFF;
		color: white;
	}

	.nav view button {
		width: 39%;
	}

	.grxxItem {
		border-radius: 5px;
		box-shadow: 0px 0px 15px 3px rgba(0, 0, 0, 0.1);
	}

	.grxxItem .ygxm {
		padding: 10px;
		background-color: #3297ff;
		color: white;
	}

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

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

	.sfzhm input {
		width: 70%;
	}

	.sfzhm:first-of-type input {
		width: 30%;
	}

	.grxxItem .mdd {
		justify-content: left;
	}

	.grxxItem .mdd input {
		width: 70%;
		margin-left: 10px;
	}

	.hxx {
		position: absolute;
		color: red;
		left: 3px;
		top: 25%;
	}

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

	/* 时间选择器 */
	.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>
