<template>
	<view>
		<view class="nav-bar"></view>
		<view class="upper-cont">
			<timeline>
			    <timelineItem leftTime='公告主题'>
			        <view class="tripItem">
			            <view class="title">{{ theme }}</view>
			        </view>
			    </timelineItem>
			    <timelineItem leftTime='公告内容'>
			        <view class="tripItem">
			            <view class="title">{{ content }}</view>
			        </view>
			    </timelineItem>
				<timelineItem leftTime='公告开始时间'>
				    <view class="tripItem">
				        <view class="title">{{ startTime }}</view>
				    </view>
				</timelineItem>
				<timelineItem leftTime='公告结束时间'>
				    <view class="tripItem">
				        <view class="title">{{ endTime }}</view>
				    </view>
				</timelineItem>
				<timelineItem leftTime='工时'>
				    <view class="tripItem">
				        <view class="title">{{ workTime }}</view>
				    </view>
				</timelineItem>
				<timelineItem leftTime='公告类型'>
				    <view class="tripItem">
				        <view class="title">{{ type }}</view>
				    </view>
				</timelineItem>
			</timeline>
		</view>
		<view class="btn-area">
			<button v-show="type == '考试'" @click="jumpExam">进入考试</button>
			<button v-show="type == '培训'" @click="jumpEdu">进入培训</button>
			<button :disabled="signBtnDisabled" @click="clickSign">{{ signContent }}</button>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="btm-popup">
				<h5>提示：签名完成后请点击下方的“保存”按钮</h5>
				 <l-signature disableScroll  ref="signatureRef" :penColor="penColor" :penSize="penSize" :openSmooth="openSmooth" ></l-signature>
			</view>
			<view class="btns" style="display: flex; justify-content: space-around; background-color: #fff;">
			    <view @click="fixSign('clear')">清空</view>
			    <view @click="fixSign('undo')">撤消</view>
			    <view @click="fixSign('save')">保存</view>
			</view>
		</uni-popup>
	</view>
</template>                  

<script>
import { publicPath } from '../../public';
import timeline from '../../components/chenbin-timeline/timeLine.vue'
import timelineItem from '../../components/chenbin-timeline/timelineItem.vue'
	export default {
		data() {
			return {
				noticeId: '',
				theme: '',
				content: '',
				startTime: '',
				endTime: '',
				workTime: '',
				type: '',
				signContent: '',
				timeStatus: '',
				signStatus: '',
				signBtnDisabled: false,
				penColor: 'black',
				penSize: 5,
				signUrl: '',
				picUrl: '',
				openSmooth: true
			}
		},
		components: {
			timeline,
			timelineItem
		},
		methods: {
			fixSign (type) {
				let that = this
			     if(type == 'openSmooth') {
			         that.openSmooth = !that.openSmooth
			         return
			     }
			    if (type == 'save') {
			        that.$refs.signatureRef.canvasToTempFilePath({
			            success: (res) => {
			                // 是否为空画板 无签名
			                console.log(res.isEmpty)
			                // 生成图片的临时路径
			                // H5 生成的是base64
			                that.signUrl = res.tempFilePath
											uni.request({
												url: publicPath + '/backstage/app/uploadPhoto',
												method: 'POST',
												header: {
													'content-type':'application/x-www-form-urlencoded; charset=UTF-8'
												},
												data: {
													base: that.signUrl
												},
												success: (picRes) => {
													console.log(picRes);
													if (picRes.statusCode == 200) {
														that.picUrl = picRes.data[0]
														// 上传图片url
														uni.request({
															url: publicPath + '/backstage/app/signNoticeById',
															method: 'POST',
															header: {
																'content-type':'application/x-www-form-urlencoded; charset=UTF-8'
															},
															data: {
																userId: uni.getStorageSync('id'),
																id: this.noticeId,
																signUrl: that.picUrl
															},
															success: (signRes) => {
																console.log(signRes);
																if (signRes.data.code == 200) {
																	uni.showToast({
																		icon: 'none',
																		title: '签到成功！',
																		success: () => {
																			that.$refs.popup.close()
																			that.signBtnDisabled = true
																			that.signContent = '已签到'
																		}
																	})
																}
															}
														})
													}
												}
											})
			            }
			        })
			        return
			    }
			    if (this.$refs.signatureRef)
			        this.$refs.signatureRef[type]()
			},
			jumpExam () {
				uni.navigateTo({
					url: '/pages/exam/exam'
				})
			},
			jumpEdu () {
				console.log(new Date(this.startTime).getTime(), new Date(this.endTime).getTime(), new Date().getTime());
				if (new Date().getTime() < new Date(this.startTime).getTime()) {
					uni.showToast({
						icon: 'none',
						title: '未到培训开始时间！'
					})
				} else if (new Date().getTime() > new Date(this.endTime).getTime()) {
					uni.showToast({
						icon: 'none',
						title: '已过培训结束时间！'
					})
				} else {
					uni.navigateTo({
						url: `/pages/eduPage/eduPage?noticeId=${this.noticeId}`
					})
				}
			},
			clickSign () {
				let that = this
				console.log(1);
				this.$refs.popup.open()
				/* uni.request({
					url: publicPath + '/backstage/app/signNoticeById',
					method: 'POST',
					header: {
						'content-type':'application/x-www-form-urlencoded; charset=UTF-8'
					},
					data: {
						userId: uni.getStorageSync('id'),
						id: this.noticeId
					},
					success: (signRes) => {
						console.log(signRes);
						if (signRes.data.code == 200) {
							uni.showToast({
								icon: 'none',
								title: '签到成功！',
								success: () => {
									that.signBtnDisabled = true
									that.signContent = '已签到'
								}
							})
						}
					}
				}) */
			}
		},
		onLoad(params) {
			let that = this
			console.log(params);
			this.noticeId = params.id
			this.theme = params.theme
			this.content = params.cont
			this.startTime = params.sTime
			this.endTime = params.eTime
			this.workTime = params.workTime
			if (params.type == 1) {
				this.type = '考试'
			} else if (params.type == 2) {
				this.type = '培训'
			}
			// signInfo 0 未到签到时间 1 正在签到 2 已过签到时间
			// ifSign 0 未签到 1 已签到
			uni.request({
				url: publicPath + '/backstage/app/getSignInfoStatus',
				method: 'POST',
				header: {
					'content-type':'application/x-www-form-urlencoded; charset=UTF-8'
				},
				data: {
					userId: uni.getStorageSync('id'),
					id: params.id
				},
				success: (receiveRes) => {
					console.log(receiveRes);
					if (receiveRes.data.code == 200) {
						that.timeStatus = receiveRes.data.data.signInfo
						that.signStatus = receiveRes.data.data.ifSign
						// 签到按钮状态
						if (that.timeStatus == 0) {
							that.signBtnDisabled = true
							that.signContent = '未到签到时间'
						} else if (that.timeStatus == 1) {
							if (that.signStatus == 0) {
								that.signContent = '点击签到'
							} else if (that.signStatus == 1) {
								that.signBtnDisabled = true
								that.signContent = '已签到'
							}
						} else if (that.timeStatus == 2) {
							that.signBtnDisabled = true
							that.signContent = '已过签到时间'
						}
					}
				}
			})
		}
	}
</script>

<style lang="scss">
	.nav-bar{
		width: 100%;
		height: var(--status-bar-height);
		padding-top: var(--status-bar-height);
	}
	.upper-cont{
		width: 90%;
		margin: 50rpx auto;
		font-size: 16px;
		.tripItem {
		    padding: 20rpx 30rpx;
		    box-sizing: border-box;
		    background:rgba(255,255,255,1);
		    box-shadow:0px 0px 20px 0px rgba(0,0,0,0.08);
		    border-radius:10px;
		    margin-bottom: 30rpx;
		    .title {
		        font-size:28rpx;
		        font-family:PingFangSC-Medium,PingFang SC;
		        font-weight:500;
		        color:rgba(51,51,51,1);
		    }
		    .tips {
		        font-size:22rpx;
		        font-family:PingFangSC-Regular,PingFang SC;
		        font-weight:400;
		        color:rgba(153,153,153,1);
		        margin-top: 20rpx;
	
		    }
		}
	}
	.btn-area{
		width: 80%;
		margin: 0 auto;
		margin-top: 180rpx;
		button{
			margin-bottom: 15rpx;
			background-color: #169BD5;
			color: #fff;
		}
	}
	.btm-popup{
		width: 100%;
		height: 25vh;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		box-sizing: border-box;
		padding: 15rpx;
	}
	.btns{
		view{
			box-sizing: border-box;
			padding: 10rpx 30rpx;
			border-radius: 15rpx;
			background-color: #043e71;
			color: #fff;
		}
	}
</style>
