<template>
	<div class="missionExplain">
		<headNav :title="'监督检查记录'"></headNav>

		<!-- 文件名称 -->
		<div class="fileName">
			<span class="label">文件名称</span>
			<span class="FontColorInfo">任务情况说明</span>
		</div>

		<!-- 执行时间 -->
		<div class="missionTime">
			<van-cell :is-link="!hasAnswer" title="执行时间" @click="openTimePicker">
				<template #default>
					<span>{{ currentTime }}</span>
				</template>
			</van-cell>
		</div>

		<!-- 任务情况和内容 -->
		<div class="missionContent">
			<span>任务内容和情况</span>
			<van-field 
			type="textarea" 
			placeholder="任务内容和情况"
			rows="4"
			:disabled="hasAnswer"
			v-model="missionContent"
			autosize></van-field>
		</div>
		
		<!-- 备注 -->
		<div class="missionContent">
			<span>备注</span>
			<van-field 
			type="textarea" 
			v-model="missionRemark"
			:disabled="hasAnswer"
			placeholder="备注"
			rows="4"
			autosize></van-field>
		</div>
		
		<div class="img">
			<span class="mb10">现场记录</span>
			<van-uploader v-model="imgFile" multiple :max-count="3" :disabled="hasAnswer" />
		</div>
		
		<div class="btn">
			<van-button v-if="!hasAnswer" type="info" @click="submit">确定</van-button>
		</div>
		
		<!-- 时间弹窗 -->
		<van-popup v-model="showTimePicker" position="bottom">
			<van-datetime-picker
			v-model="currentDate"
			type="date"
			title="选择年月"
			:min-date="minDate"
			:max-date="maxDate"
			@cancel="showTimePicker = false"
			@confirm="chooseDate"
			/>
		</van-popup>
		
		
		<!-- 遮罩层 -->
		<v-mask :showOverLay="showOverLay" :tipMsg="tipMsg"></v-mask>
	</div>
</template>

<script>
import headNav from '@/components/headNav.vue';
import mask_overLay from '@/components/overLay_xy.vue';
import { get, post, put, postImg, imgBaseUrl } from '@/utils/http.js';

export default {
	name: 'missionExplain',
	components: {
		headNav,
		'v-mask': mask_overLay
	},

	data() {
		return {
			imgFile: [],
			showOverLay: false,
			tipMsg: '加载中',
			missionContent: '',
			missionRemark: '',
			currentTime: this.$getTime(new Date()).split(' ')[0],
			currentDate: new Date(),
			minDate: new Date(2000, 0, 1),
			maxDate: new Date(2050, 10, 1),
			showTimePicker: false,
			imgSrc: '',
			hasAnswer: false,
			imgGroup: ''
		};
	},

	mounted() {
		this.init();
	},

	methods: {
		// 初始化
		async init() {
			this.tipMsg = '加载中';
			this.showOverLay = true;
			const res = await this.getAnswerApi();
			this.showOverLay = false;
			if (res.data.length > 0) {
				this.hasAnswer = true;
				this.imgFile = [];
				this.currentTime = res.data[0].excuteTime.split(' ')[0];
				this.missionContent = res.data[0].taskContHappen;
				this.missionRemark = res.data[0].taskDescRemark;
				this.imgGroup = res.data[0].liveRecordImg.split(',');
				this.imgGroup.map(item => {

					this.imgFile.push({
						url: imgBaseUrl + item
					});
				});
			} else {
				this.showOverLay = false;
			}
		},
		
		async getAnswerApi() {
			return get('/cdsupervisionTaskDesc/listByCondition', {
				taskId: this.$route.params.taskId
			});
		},

		backPage() {
			this.$router.go(-1);
		},
		
		chooseDate() {
			let time = '';
			time = this.$getTime(this.currentDate).split(' ')[0];
			this.currentTime = time;
			this.showTimePicker = false;
		},
		
		openTimePicker() {
			if (!this.hasAnswer) {
				this.showTimePicker = true;
			} else {
				return
			}
		},
		
		// 提交
		async submit() {
			if (this.missionContent === '' || this.missionContent.trim() === '') {
				this.$toast.fail('请填写任务说明和情况');
			} else if (this.missionRemark === '' || this.missionRemark.trim() === '') {
				this.$toast.fail('请填写备注');
			} else if (this.imgFile.length === 0) {
				this.$toast.fail('未上传现场记录');
			} else {
				await this.upImg();

				let submitObj = {
					taskId: this.$route.params.taskId,
					fileName: '任务情况说明',
					excuteTime: this.currentTime,
					taskContHappen: this.missionContent,
					taskDescRemark: this.missionRemark,
					liveRecordImg: this.imgSrc
				}
				
				this.tipMsg = '上传数据中';
				const res = await post('/cdsupervisionTaskDesc/add', submitObj);
				
				if (res.success === true) {
					this.$router.go(-1);
				} else {
					this.$toast.fail(`${ res.msg }`);
					this.showOverLay = false;
				}
			}
		},
		
		async upImg() {
			var formData = new FormData();
			this.tipMsg = '上传图片中';
			this.showOverLay = true;
			this.imgFile.map(item => {
				formData.append("file", item.file);
			});
			
			const res = await postImg('/upload/moreUploadImg', formData);
			if (res.success === true) {
				this.imgSrc = res.data;
			} else {
				this.$toast.fail(`${ res.msg }`);
			}
		},
	}
};
</script>

<style lang="scss" scoped>
.missionExplain {
	font-size: 16px;

	.fileName {
		margin-top: 57px;
		margin-bottom: 10px;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		padding: 10px 15px;
		font-size: 14px;
		color: #323233;
	}
	
	.missionContent {
		margin-top: 10px;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		padding: 10px 15px;
		font-size: 14px;
		color: #323233;
	}
	
	.img {
		margin-top: 10px;
		margin-bottom: 10px;
		display: flex;
		flex-direction: column;
		background-color: #fff;
		padding: 10px 15px;
		font-size: 14px;
		color: #323233;
	}
	
	.btn {
		padding: 10px 15px;
		
		button {
			width: 100%;
		}
	}
}
</style>

<style lang="scss">
.missionExplain {
	
	.van-field {
		margin-top: 10px;
		padding: 5px;
		background-color: #f9f9f9;
	}
}
</style>
