<template>
	<view class="content">
		<view class="">
			<view class="">
				<view class="pb">
					<picker v-show="ischangeColor==0" @change="bindPickerChange2" :value="sqindex" :range="sqList"
						range-key="name">
						<button type="primary">排班</button>
					</picker>
					<button v-show="ischangeColor==1 && Index==0" type="primary" class="deleButon" @click="qxpb">取消排班</button>
					<button v-show="ischangeColor==1 && Index==2" type="warn" class="deleButon" @click="deletUser">删除</button>
				</view>
			</view>
			<view class="grxx">
				<view class="grxxItem">
					<view class="sfzhm">
						<text>姓名：</text>
						<input type="text" v-model="tableData.name" placeholder="请输入姓名" @input="changeName" />
					</view>
					<view class="sfzhm">
						<text>手机号：</text>
						<input type="text" v-model="tableData.phone" placeholder="请输入手机号" @input="changePhone" />
					</view>
					<view class="sfzhm">
						<text>排班状态：</text>
						<view class="pbzt">
							<picker style="width: 100%;" @change="bindPickerChange" :value="Index" :range="statusList">
								<view class="uni-input">{{ischange1?statusList[Index]:'请选择'}}</view>
							</picker>
						</view>
					</view>
					<view class="sfzhm">
						<text>日期</text>
						<view class="example-body">
							<uni-datetime-picker :clearIcon="false" :border="false" type="date" :disabled="false" v-model="tableData.schedul" start="2021-3-20" end="2024-6-20"
								@change="bindChange" />
						</view>
					</view>
				</view>
			</view>
			<view class="table1">
				<uni-table ref="table" type="selection" @selection-change="selects" :loading="isLoading" border stripe
					emptyText="暂无更多数据">
					<!-- 表头行 -->
					<uni-tr>
						<uni-th width="65" align="center">姓名</uni-th>
						<uni-th align="center">手机</uni-th>
						<uni-th width="50%" 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.companyName}}</uni-td>
					</uni-tr>
				</uni-table>
				<view class="ydd" v-if="isReachBottom">
					~<没有了>~
				</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 = 2019; 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 {
				tableData: {
					//查询条件
					//姓名
					name: '',
					//日期
					schedul: '',
					//手机
					phone: '',
					companyId: "",
					current: 1,
					id: "",
					officeId: "",
					openId: "",
					orders: [{
						asc: true,
						column: ""
					}],
					size: 15
				},
				total: 0,
				picTime: false,

				userList: [],
				list: [],
				userIdlist: [],

				sqList: [{
					id: 1,
					name: '金山'
				}, {
					id: 2,
					name: '市区'
				}],
				sqindex: 0,

				type: '',
				nowtime: '',

				years,
				months,
				days,
				timers: year + '-' + month + '-' + day,
				value: [9999, month - 1, day - 1],
				visible: true,
				indicatorStyle: `height: 50px;`,

				//未排班  已排班  切换
				ischangeColor: 1,
				isLoading: false,
				isReachBottom: false,
				
				Index:2,
				statusList:['已排班','待排班','全部'],
				ischange1:false


			}
		},
		onLoad(option) {
			this.type = option.icon;
			this.getAllList();
			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.tableData.schedul = date.getFullYear() + "-" + mouth + "-" + dates; //表示当前日期
		},
		onReachBottom() {
			if (this.isReachBottom) {
				return
			} else {
				this.tableData.current++;
				if (this.Index == 1) {
					this.getList()
				} else if(this.Index == 0){
					this.getListypb()
				}else{
					this.getAllList()
				}
			}
			if (this.list.length > 0) {
				this.list.forEach(item => {
					this.userList.push(item)
				})
			}
		},
		methods: {
			//排班状态选择
			bindPickerChange(e){
				this.Index=e.target.value;
				this.ischange1=true;
				this.tableData.current=1;
				this.isReachBottom=false;
				this.userList=[]
				if(e.target.value==0){
					this.ischangeColor=1
					this.getListypb()
				}else if(e.target.value==1){
					this.ischangeColor=0
					this.getList()
				}else{
					this.ischangeColor=1
					this.getAllList();
				}
			},
			//点击切换待排班
			dpbCli() {
				this.$refs.table.clearSelection()
				this.ischangeColor = 0;
				this.isReachBottom = false
				this.getList();
				this.qcSearch();
			},
			//点击切换已排班
			ypbCli() {
				this.$refs.table.clearSelection()
				this.ischangeColor = 1;
				this.getListypb()
				this.qcSearch();
				this.isReachBottom = false
				this.userList = []
			},
			//清除搜索条件
			qcSearch() {
				this.tableData.name = '';
				this.tableData.phone = '';
				this.tableData.schedul = ''
			},
			//按姓名搜索
			changeName(e) {
				this.tableData.current = 1;
				this.tableData.name = e.target.value;
				this.userList = []
				if (this.ischangeColor == 0) {
					this.getList();
				} else {
					this.getListypb()
				}
			},
			//按手机搜索
			changePhone(e) {
				this.tableData.current = 1;
				this.tableData.phone = e.target.value;
				this.userList = []
				if (this.ischangeColor == 0) {
					this.getList();
				} else {
					this.getListypb()
				}
			},
			//时间选择器变化
			bindChange: function(date) {
				this.tableData.schedul=date;
				if (this.ischangeColor == 0) {
					this.getList();
				} else {
					this.getListypb()
				}
			},
			//删除角色
			deletUser(){
				if (this.userIdlist.length <= 0) {
					uni.showToast({
						title: '无选中'
					})
				} else {
					let data = {
						ids: this.userIdlist
					}
					postRequest('/thirdUser/delByIds', data).then(res => {
						if (res.code == '200') {
							uni.showToast({
								title: "删除成功"
							})
							this.userList=[]
							this.getAllList();
							this.$refs.table.clearSelection()
						}
					})
				}
			},
			//点击取消排班
			qxpb() {
				if (this.userIdlist.length <= 0) {
					uni.showToast({
						title: '无选中'
					})
				} else {
					let data = {
						identify: 1,
						userId: this.userIdlist
					}
					postRequest(this.type == 'innerArrange' ? '/sysUser/save' : '/dailyStaff/save', data).then(res => {
						if (res.code == '200') {
							uni.showToast({
								title: "删除成功"
							})
							this.getListypb()
						}
					})
				}
			},
			bindPickerChange2: function(e) {
				this.sqindex = e.target.value;
				let id = this.sqList[e.target.value].id;
				if (this.userIdlist.length <= 0) {
					uni.showToast({
						title: '无选中'
					})
				} else {
					let data = {
						identify: 0,
						officeId: id,
						schedul: this.tableData.schedul,
						userId: this.userIdlist
					}
					postRequest(this.type == 'innerArrange' ? '/sysUser/save' : '/dailyStaff/save', data).then(res => {
						if (res.code == '200') {
							uni.showToast({
								title: '指定成功'
							})
							this.$forceUpdate()
							this.$refs.table.clearSelection()
							this.userList = []
							this.getList()
						}
					})
				}
			},
			selects(ss) {
				let list = []
				let index = ss.detail.index;
				
				if (this.ischangeColor == 1 && this.Index==0) {
					index.forEach(item => {
						list.push(this.userList[item].userId)
					})
				} else {
					index.forEach(item => {
						list.push(this.userList[item].id)
					})
					console.log(list)
				}
				this.userIdlist = list
			},
			pagi(e) {
				this.tableData.current = e.current;
				this.getList()
			},
			//获取全部人员
			getAllList(){
				this.isLoading = true
				postRequest('/thirdUser/findAllThirdUserByPage',this.tableData).then(res=>{
					if (res.code == '200' && res.data != null) {
						if (this.userList.length <= 0) {
							this.userList = res.data.records
						}
						this.list = res.data.records;
						this.total = res.data.total;
						if (this.tableData.current >= res.data.pages) {
							this.isReachBottom = true
						}
						this.isLoading = false
					} else {
						this.list = []
						this.isLoading = false
					}
				})
			},
			//获取未排班
			getList() {
				this.isLoading = true
				let data = this.tableData;
				postRequest(this.type == 'innerArrange' ? '/sysUser/findList' : '/thirdUser/getList', data).then((res) => {
					if (res.code == '200' && res.data != null) {
						if (this.userList.length <= 0) {
							this.userList = res.data.records
						}
						this.list = res.data.records;
						this.total = res.data.total;
						if (this.tableData.current >= res.data.pages) {
							this.isReachBottom = true
						}
						this.isLoading = false
					} else {
						this.list = []
						this.isLoading = false
					}
				})
			},
			//获取已排班
			getListypb() {
				this.isLoading = true
				let data = this.tableData;
				postRequest(this.type == 'innerArrange' ? '/sysUser/getList' : '/dailyStaff/getList', data).then((res) => {
					if (res.code == '200' && res.data != null) {
						if (this.userList.length <= 0) {
							this.userList = res.data.records
						}
						this.list = res.data.records;
						this.total = res.data.total;
						if (this.tableData.current >= res.data.pages) {
							this.isReachBottom = true
						}
						this.isLoading = false
					} else {
						this.list = []
						this.isLoading = false
					}
				})
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
		position: relative;
	}

	.ydd {
		text-align: center;
		padding: 5px;
		color: #cac5c5;
	}

	.nav {
		position: fixed;
		top: 6%;
		left: 0;
		width: 100%;
		background-color: white;
		z-index: 96;
		padding-bottom: 3%;
		box-shadow: 0px 0px 15px 3px rgba(0, 0, 0, 0.1);
	}

	.content {
		height: 100%;
		padding: 0 10px;
	}

	.content .grxxTitle {
		padding: 5% 0;
		font-size: 14px;
	}
	.uni-date__input{
		height: 48rpx;
	}
	.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 {
		margin: 0 10px;
		border-bottom: 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%;
		font-size: 13px;
		color: #999999;
	}
	.pbzt{
		width: 70%;
	}
	

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

	.grxxItem .mdd input {
		width: 70%;
		margin-left: 10px;
	}
	.pb {
		padding: 10rpx 0;
		overflow: hidden;
	}
	.pb button{
		width: 30%;
		float: right;
	}
	.grxxItem .sfzhm:last-of-type {
		border: none;
	}

	.nav {
		padding-top: 6px;
		overflow: hidden;
	}

	.nav view view {
		width: 50%;
		height: 10%;
		font-size: 13px;
		border: 1px solid rgba(0, 0, 0, .2);
		border-radius: 20rpx;
	}

	.changess {
		background-color: #007AFF;
		color: white;
		border: 1px solid #CCCCCC;
		border-radius: 20rpx;
	}

	

	.uni-list-cell-db {
		width: 100%;
		display: flex;
		justify-content: space-around;
	}

	.uni-list-cell-db view {
		text-align: center;
		padding: 5px;
		width: 50%;
	}

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

	.grxx {
		padding-top: 10px;
	}

	.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;
	}

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

	.grxxItem .sfzhm input {
		border-bottom: #cccccc;
	}
	/deep/.grxxItem .sfzhm input.uni-date__input{
		height: 48rpx;
	}
	.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;
	}

	.xx {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 4px 10px;
		padding: 10px 0;
		border-bottom: 1px solid #CCCCCC;
	}

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

	.yymc {
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 100;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.pickers {
		position: absolute;
		bottom: 0;
		left: 0;
		height: 50%;
		z-index: 10;
		text-align: center;
		background-color: white;
	}

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

	.item {
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.xx1 {
		margin: 0;
		padding: 0;
		width: 34%;
		border-radius: 68px 0 0 68px;
		height: 34px;
		line-height: 34px;
		border: none;
		font-size: 15px;

	}

	.xx2 {
		margin: 0;
		padding: 0;
		width: 34%;
		border-radius: 0 68px 68px 0;
		height: 34px;
		line-height: 34px;
		border: none;
		font-size: 15px;
	}

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

	.xxdz {
		margin: 0 10px;
		padding: 10px;
		font-size: 84%;
		color: #999999;
		position: relative;
	}

	.xxdz .hxx {
		top: 7%;
	}

	.xxdz .sfzhm {
		margin: 0;
		border-bottom: 1px solid #CCCCCC;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 0;
		font-size: 84%;
		color: #999999;
		border: none;
	}

	.xxdz .sfzhm text:first-of-type {
		color: #333333;
		font-size: 15px;
	}

	.xxdz .sfzhm text:last-of-type {
		color: #007AFF;
	}

	.footer {
		text-align: center;
		margin-top: 30px;
	}

	.footer button {
		width: 50%;
		background-color: #007AFF;
		color: white;
	}

	.tongji {
		padding-top: 10px;
	}

	.uni-table-thead {
		padding: 12px 10px;
		width: 100%;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		font-size: 14px;
		font-weight: bold;
		color: #909399;
		border-bottom: 1px #ebeef5 solid;
		text-align: center;
	}

	.table1 {
		margin-top: 10px;
		font-size: 14px;
	}

	.table1 table tr td {
		font-size: 12px;
	}
</style>
