<template>
	<view>
		<view class="grxx">
			<view class="grxxItem">
				<view class="sfzhm">
					<text>姓名</text>
					<input v-model="name" class="uni-input" focus />
				</view>
				<view class="sfzhm">
					<text>手机号</text>
					<input v-model="phone" class="uni-input" focus />
				</view>
				<view class="sfzhm">
					<button style="width: 50%;" size="mini" type="default" @click="changeWorkSpace">修改工作地点</button>
					<button style="width: 30%;" size="mini" type="primary" @click="searchData">查询</button>
				</view>
			</view>
			<view v-show="visible" class="picTime">
				<view class="uni-padding-wrap">
					<button type="default" @click='visible=!visible'>取消</button>
					<button type="default" @click="modifyWorkSpace">确定</button>
				</view>
				<view class="pickers">
					<picker-view :indicator-style="indicatorStyle" :value="bindValue" @change="bindChange" class="picker-view">
						<picker-view-column>
							<view class="item" v-for="(item,index) in workSpaceList" :key="item.value">{{item.label}}</view>
						</picker-view-column>
					</picker-view>
				</view>
			</view>
		</view>
		<uni-table class="table" :loading="loading" @selection-change="normalSelect" border stripe type='selection'>
			<!-- 表头行 -->
			<uni-tr>
				<uni-th width="20%" align="center">姓名</uni-th>
				<uni-th width="40%" 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-tr> -->
				<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-td align="center">
					{{item.areaType=='1'?'金山':'市区'}}
				</uni-td>
			</uni-tr>
		</uni-table>
		<uni-pagination class="pagin" show-icon="true" :total="pagination.total" :current="pagination.current" @change='handleChangePage'></uni-pagination>
	</view>
</template>

<script>
	import {
		postRequest,
		getRequest
	} from '@/api/api.js'
	import * as dd from 'dingtalk-jsapi';
	export default {
		data() {
			return {
				bindValue: [],
				visible: false,
				workSpaceList: [],
				value: [],
				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: '',
				indicatorStyle: `height: 50px;`,
				name: '',
				phone: '',
				selectedRows: [],
				selectedWorkSpace: '',
				pagination: {
					total:0,
					current: 1
				}
			}
		},
		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; //表示当前日期
			this.getList()
		},
		methods: {
			normalSelect(selection, row) {
				this.selectedRows = []
				let selectIndex = selection.detail.index

				console.log(selectIndex)
				selectIndex.forEach((item, index) => {
					console.log(selectIndex[index])
					this.selectedRows.push(
						this.userList[selectIndex[index]].reportId
					)
				})
			},
			handleChangePage(e) {
				this.pagination.current = e.current
				this.searchData()
			},
			//时间选择器变化
			bindChange: function(date) {
				console.log(date)
				this.bindValue = date.detail.value
			},
			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() {
				this.getList();
			},
			numInput(value) {
				this.numData = value
			},
			getQueryString(name) {
				const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
				const search = window.location.search.split('?')[1] || '';
				const r = search.match(reg) || [];
				return r[2];
			},
			getList() {
				let that = this
				let data = {
					name: this.name,
					phone: this.phone,
					reportNum: that.getQueryString('num'),
					// reportNum: 'mr20210830170300',
					userType: that.getQueryString('userType'),
					// userType: '1',
					current: this.pagination.current
				}
				this.userList = []
				postRequest('/sys-dict/findDictByType', {type: 'area_type'}).then((res) => {
					if (res.code == '200') {
						this.loading = false;
						this.workSpaceList = res.data;
					} else {
						this.workSpaceList = []
						this.loading = false;
					}
				})
				
				postRequest('/dailyReport/alreadyReportList', data).then((res) => {
					if (res.code == '200') {
						this.loading = false;
						this.userList = res.data.records;
						this.pagination.total = res.data.total
						this.pagination.current = res.data.current
					} else {
						this.userList = []
						this.loading = false;
					}
				})
			},
			clickNum(officeId, type, areaType) {
				let data = {
					areaType,
					type,
					reportNum: this.numData
				}
				uni.navigateTo({
					url: `/pages/ld/sfInfo?data=${JSON.stringify(data)}`
				})
			},
			changeWorkSpace() {
				if(this.selectedRows.length > 0) {
					this.visible = !this.visible
				} else {
					uni.showModal({
						title: '提示',
						showCancel: false,
						content: '请至少选择一项！',
						success: function(res) {
							
						}
					})
				}
			},
			modifyWorkSpace() {
				console.log(this.selectedRows.length)
				const data = {
				  "areaType": this.bindValue.toString(),
				  "reportIds": this.selectedRows
				}
				postRequest('/dailyReport/updateAreaType', data).then((res) => {
					if (res.code == '200') {
						this.loading = false;
						this.searchData()
					} else {
						this.loading = false;
						this.searchData()
					}
				})
			}
		}
	}
</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;
	}

	.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
	}

	.item {
		height: 50px;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	
	.pagin {
		width:94%;
		margin: 10px 3%;
		position: absolute;
		bottom: 0;
	}
</style>
