<template>
	<view class="fullHeight">
		<headers :showBack="true" :themeType="'white'"
			style="position: fixed; top: 0; left: 0; width: 100%; z-index: 1111;">
			<view class="headerName">
				辅助考勤
			</view>
		</headers>
		<view class="content" :style="{ 'padding-top': (statusBarHeight+52) * 1.5 + 'rpx' }">
			<view class="header_title">
				姓名：{{workerInfo.workerName}}
			</view>
			<view class="content-items">
				<view class="content-item">
					<view>
						考勤日期：
					</view>
					<picker mode="date" :value="form.changeDate" @change="startTimeChange($event,1)">
						<view v-if="!form.changeDate" style="color: #c0c4cc; font-size: 28rpx;">开始时间</view>
						<view v-else class="uni-input">{{form.changeDate}}</view>
					</picker>
				</view>
				<view class="content-item">
					<view>
						进出方向：
					</view>
					<radio-group @change="radioChange">
						<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
							<view>
								<radio :value="item.value" :checked="item.value == current" />
							</view>
							<view>{{item.name}}</view>
						</label>
					</radio-group>
				</view>
				<view class="content-item">
					<view>
						进/出场时间：
					</view>
					<picker mode="time" :value="form.changeTime" @change="startTimeChange($event,2)">
						<view v-if="!form.changeTime" style="color: #c0c4cc; font-size: 28rpx;">点击选择时间</view>
						<view v-else class="uni-input">{{form.changeTime}}</view>
					</picker>
				</view>
			</view>

			<view class="cause-items">
				<view class="cause-item">
					<view class="cause">
						使用辅助考勤原因：
					</view>
					<textarea v-model="form.reissueCardReason" placeholder-style="color:#c0c4cc" placeholder="请输入原因" />
				</view> 
				<view class="cause-item">
					<view>
						补考勤证明：<text style="color: #8C8C8C; font-size: 28rpx;">(请上传进/出场实时人脸照片)</text>
					</view>
					<view class="mt-10">
						<view class="addImgBox" @click="uploadImg" v-show="form.imgFileList.length == 0">
							<image src="/static/safeMange/upload_image.png" class="icon-add"></image>
						</view>
						<view class="imgBox" v-show="form.imgFileList.length>0" v-for="(item,index) in form.imgFileList"
							:key="index">
							<image :src="url_config+'image/'+item.url" class="img"
								@click="previewImage(url_config+'image/'+item.url)"></image>
							<view @click="deleteImg(item,1)" class="deleteImg">
								<image src="/static/safeMange/close_icon.png"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="kqbtn" @click="submitBtn">
			提交
		</view>
	</view>
</template>

<script>
	import {
		dateformat
	} from "@/utils/tool.js"
	export default {
		data() {
			return {
				statusBarHeight: 0,
				workerId: "",
				workerInfo: {},
				startTime: this.getDate({
					format: true,
				}),
				form: {
					changeDate: dateformat(new Date(), "yyyy-MM-dd"),
					changeTime: "",
					reissueCardReason: "",
					imgFileList: [],
				},
				items: [{
						value: "1",
						name: '进场'
					},
					{
						value: "2",
						name: '出场'
					},
				],
				current: "1"
			}
		},
		onLoad(option) {
			this.workerId = option.id;
			this.getDetailsData();
		},
		mounted() {
			this.statusBarHeight = uni.getStorageSync('systemInfo').statusBarHeight

		},
		onShow() {

		},
		methods: {
			submitBtn(){
				let that = this;
				if(!this.form.changeTime){
					uni.showToast({
					    title: '请选择进/出场时间',
						icon: "none",
					});
					return;
				}
				if(!this.form.reissueCardReason){
					uni.showToast({
					    title: '请输入辅助考勤原因',
						icon: "none",
					});
					return;
				}
				if(that.form.imgFileList.length == 0){
					uni.showToast({
					    title: '请输入补考勤证明',
						icon: "none",
					});
					return;
				}
				this.sendRequest({
					url: 'xmgl/workerAttendance/reissueAttendanceCard',
					method: 'post',
					data: {
						projectSn: JSON.parse(uni.getStorageSync('projectDetail')).projectSn,
						personSn: this.workerInfo.personSn,
						time: `${this.form.changeDate} ${this.form.changeTime}:00`,
						type: Number(this.current),
						reissueCardReason: this.form.reissueCardReason,
						photoUrl: that.form.imgFileList[0].url,
					},
					success: res => {
						if (res.code == 200) {
							uni.showToast({
							    title: '提交成功！',
								icon: "success",
							});
							setTimeout(() => {
								uni.navigateBack()
							}, 2000)
						}
					}
				})
			},
			uploadImg() {
				var that = this
				uni.chooseImage({
					count: 5 - that.form.imgFileList.length,
					success(res) {
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: that.url_config + 'upload/image', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'files',
							success: (uploadFileRes) => {
								let data = {
									name: JSON.parse(uploadFileRes.data).data[0].filename,
									url: JSON.parse(uploadFileRes.data).data[0].imageUrl
								};
								that.form.imgFileList.push(data)
							}
						});
					}
				})
			},
			//删除附件
			deleteImg(val, type) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定删除该附件吗?',
					success: function(res) {
						if (res.confirm) {
							if (type == 1) {
								let fileArr = JSON.parse(JSON.stringify(that.form.imgFileList));
								fileArr.forEach((item, index) => {
									if (item.url == val.url) {
										fileArr.splice(index, 1)
									}
								})
								that.form.imgFileList = fileArr;
							} else if (type == 2) {
								let fileArr = JSON.parse(JSON.stringify(that.videoFileList));
								fileArr.forEach((item, index) => {
									if (item.url == val.url) {
										fileArr.splice(index, 1)
									}
								})
								that.videoFileList = fileArr;
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			radioChange(evt) {
				console.log(evt)
				this.current = evt.detail.value;
			},
			startTimeChange(e, type) {
				console.info(e, 'ee')
				if (type == 1) {
					this.form.changeDate = e.detail.value
				} else if (type == 2) {
					this.form.changeTime = e.detail.value
				}
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year;
				} else if (type === 'end') {
					// year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			//获取详情数据
			getDetailsData() {
				this.sendRequest({
					url: 'xmgl/workerInfo/viewWorkerInfoDetail',
					method: 'post',
					data: {
						workerId: this.workerId,
					},
					success: res => {
						if (res.code == 200) {
							this.workerInfo = res.result.workerInfo;
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding-bottom: 100rpx;
	}
	.kqbtn{
		width: 100%;
		height: 88rpx;
		background-color: #2A8BF2;
		color: white;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 0;
	}
	.cause-items {
		margin-top: 40rpx;
		background-color: white;
		padding: 20rpx;
		font-size: 32rpx;

		.cause-item>.cause::before {
			content: '*';
			color: #FF0404;
		}
		
		.cause-item:not(:first-child){
			margin-top: 30rpx;
		}

		:deep( uni-textarea ){
			width: initial;
			height: 200rpx;
			border: 2rpx solid #F5F5F5;
			padding: 20rpx;
			border-radius: 20rpx;
			margin-top: 10rpx;
		}
	}
	
	.mt-10 {
		margin-top: 20rpx;
	}

	.addImgBox {
		border: 1px solid #F5F5F5;
		background-color: #FAFAFA;
		width: 180rpx;
		height: 180rpx;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 20rpx;
		font-size: 24rpx;
		margin-right: 12rpx;

		uni-image {
			width: 100%;
			height: 100%;
		}

		// .icon-add {
		// 	width: 36rpx;
		// 	height: 36rpx;
		// }
	}

	.imgBox {
		width: 180rpx;
		height: 180rpx;
		display: inline-flex;
		position: relative;
		margin-right: 30rpx;
		margin-bottom: 16rpx;

		.img {
			width: 100%;
			height: 100%;
			border-radius: 12rpx;
		}

		.deleteImg {
			position: absolute;
			right: -12rpx;
			top: -18rpx;

			uni-image {
				width: 20rpx;
				height: 20rpx;
			}
		}

	}

	.fullHeight {
		background-color: #EAF1F9;
	}

	.header_title {
		padding: 0 20rpx;
	}

	.content-items {
		background-color: white;
		padding: 20rpx 20rpx 10rpx 20rpx;
		margin-top: 20rpx;
		border-radius: 20rpx 20rpx 0 0;
		font-size: 32rpx;

		.content-item {
			height: 100rpx;
			display: flex;
			align-items: center;

			>uni-view:first-child {
				color: #1C1C1C;
			}
		}

		.content-item:not(:last-child) {
			border-bottom: 1rpx solid #F5F5F5;
		}
	}

	:deep( uni-radio-group ){
		display: flex;
		font-size: 28rpx;

		.uni-label-pointer:has(.uni-radio-input-checked) {
			border-color: #3894FF !important;
			color: #3894FF;
		}

		.uni-label-pointer {
			display: flex;
			align-items: center;
			margin-right: 20rpx;
			border: 1rpx solid #F5F5F5;
			padding: 10rpx 20rpx;
			border-radius: 10rpx;

			.uni-radio-input {
				width: 36rpx;
				height: 36rpx
			}

			.uni-radio-input-checked {
				background-color: #3894FF !important;
				border-color: #3894FF !important;
			}

			.uni-radio-input-checked:before {
				content: "";
				width: 26rpx;
				height: 26rpx;
				background-color: white;
				border-radius: 50%;
				transform: translate(-50%, -50%) scale(.73);
			}
		}
	}
</style>