<template>
	<view class="fullHeight workStationSchedulePage">
		<scroll-view class="smallHeight" scroll-y>
			<headers :tabIndex="2" :navList="navList"></headers>
			<view class="schedule-nav"></view>
			<view class="schedule_box">
				<view class="calendar_box"><uni-calendar :insert="true" :lunar="false" @change="changeDate" @monthSwitch="changeMonth" :selected="dateList" :showMonth="false"></uni-calendar></view>
			</view>
			<view class="schedule_list" v-if="workerList.length>0">
				<view class="schedule_item" v-for="(item,index) in workerList" :key="index" @click="previewData(item)">
					<view class="schedule_title">{{item.scheduleTitle}}</view>
					<view class="schedule_date">
						<image src="/static/workstation/icon_date.png"></image>
						<span>{{item.scheduleStartTime}}~{{item.scheduleEndTime}}</span>
					</view>
					<view class="schedule_address">
						<image src="/static/workstation/icon_address.png"></image>
						<span>{{item.scheduleAddr}}</span>
					</view>
				</view>
			</view>
			<view class="no-data" v-else>
				暂无数据
			</view>
		</scroll-view>
		<footers2></footers2>
	</view>
</template>

<script>
import footers2 from '../../../components/footers/footers2.vue';
import headers from '../headers.vue';
export default {
	data() {
		return {
			navList: [
				{
					name: "任务清单"
				},
				{
					name: "通知公告"
				},
				{
					name: "工作日程"
				}
			],
			dateList: [],
			workerList:[],
			userId: "",
			month: "",
			fulldate: ""
		};
	},
	components: {
		footers2,
		headers
	},
	onShow(){
		
	},
	created(){
		this.userId = JSON.parse(uni.getStorageSync('userInfo')).userId;
		this.fulldate = this.selectNowDate();
		this.month = this.selectNowDate().split('-')[0]+ '-' + this.selectNowDate().split('-')[1];
		this.selectDayWorker();
		this.selectMonthWorker();
	},
	methods: {
		previewData(val){
			// if(uni.getStorageSync('attendee')){
			// 	uni.removeStorage({
			// 		key: 'attendee',
			// 		success: function (res) {
			// 		   console.log('success');
			// 		}
			// 	})
			// }
			// uni.navigateTo({
			// 	url: '../workstationIndex/editProject?id='+val.taskId
			// })
		},
		selectNowDate(){
			var date = new Date(),
			year = date.getFullYear(),
			month = date.getMonth() + 1,
			day = date.getDate();
			month >= 1 && month <= 9 ? (month = "0" + month) : "";
			day >= 0 && day <= 9 ? (day = "0" + day) : "";
			var timer = year + '-' + month + '-' + day;
			// console.log(timer)
			return timer;
		},
		selectDayWorker(){
			let _this = this;
			this.sendRequest({
				url: "xmgl/workstationWorkSchedule/selectWorkScheduleList",
				data: {
					monthTime: this.month,
					createUser: this.userId,
					dayTime: this.fulldate
				},
				method: "POST",
				success(res){
					console.log(res);
					_this.workerList = res.result
				}
			});
		},
		selectMonthWorker(){
			let _this = this;
			this.sendRequest({
				url: "xmgl/workstationWorkSchedule/selectUserWorkScheduleCount",
				data: {
					monthTime: this.month,
					createUser: this.userId
				},
				method: "POST",
				success(res){
					console.log(res);
					_this.dateList = [];
					res.result.forEach(item=>{
						_this.dateList.push({
							date: item.schedule_date
						});
					});
				}
			});
		},
		changeDate(val) {
			console.log(val.fulldate);
			this.fulldate = val.fulldate;
			this.selectDayWorker();
		},
		changeMonth(val){
			console.log(val.month);
			this.month = val.month;
			// this.selectDayWorker();
			this.selectMonthWorker();
		}
	}
};
</script>

<style lang="scss" scoped>
.smallHeight {
	height: calc(100% - 54rpx);
}
.workStationSchedulePage {
	padding-top: 220rpx;
	box-sizing: border-box;
	background: #f6f6f6;
	:deep( .headers_box ){
		// padding-bottom: 30rpx;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2;
	}
	.schedule-nav{
		background: #127FEC;
		padding-bottom: 30rpx;
		border-radius: 0px 0px 40rpx 40rpx;
	}
	.schedule_box {
		margin-top: -28rpx;
		:deep( .uni-calendar-item__weeks-box-circle ){
			background: #127fec;
			right: 8rpx;
			top: 60%;
			transform: translateY(-50%);
		}
		.calendar_box {
			width: 704rpx;
			margin: 0 auto;
			border-radius: 16rpx;
			background: #fff;
			box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.1);
			overflow: hidden;
			margin-bottom: 28rpx;
		}
	}
	.schedule_list{
		padding-bottom: 58rpx;
		.schedule_item{
			font-size: 26rpx;
			color: #6C7178;
			width: 704rpx;
			margin: 0 auto;
			border-radius: 16rpx;
			background: #fff;
			box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.1);
			overflow: hidden;
			margin-bottom: 12rpx;
			padding: 30rpx;
			box-sizing: border-box;
			.schedule_title{
				font-size: 30rpx;
				color: #262D4A;
				margin-bottom: 10rpx;
			}
			image{
				width: 20rpx;
				height: 20rpx;
				margin-right: 18rpx;
			}
			.schedule_date{
				margin-bottom: 10rpx;
			}
			.schedule_address{
				
			}
		}
	}
}
.no-data{
	text-align: center;
	padding-top: 50rpx;
}
</style>
