<template>
	<div class="checkRecord">
		<headNav
			@backPage="backPage"
			@rightClick="rightClick"
			:iconName="showIcon"
			:title="'监督检查记录'"
			class="headNav"
		></headNav>
		<div class="content">
			<div v-if="showImg" class="pdfImg">
				<van-image :src="imgSrc"></van-image>
			</div>

			<div class="file" id="file" v-else>
				<div class="title">
					<div class="title_top">
						{{ topInfo.lawUnit }}
					</div>
					<div class="title_bottom">消防监督检查记录</div>
					<div class="title_bottom">(其他形式消防监督检查适用)</div>
				</div>

				<div class="number">
					<span class="">编号：{{ jobDetail.job_no }}</span>
				</div>
				<div class="number">
					<span class="">检查时间：<span @click="showSelectCheckTime">{{checkTime}}</span></span>
				</div>	
				<table class="record_table">
					<tr>
						<td colspan="5" class="check_type_tr">
							<div class="check_type_label">
								检查类型：
							</div>
							<van-checkbox-group v-model="check_type" direction="horizontal" class="check_item_content check_type_content">
								<van-checkbox shape="square" name="a">大型群众性活动举办前的检查</van-checkbox>
								<van-checkbox shape="square" name="b">建设工程施工现场检查</van-checkbox>
								<van-checkbox shape="square" name="c">对举报投诉的核查</van-checkbox>
								<van-checkbox shape="square" name="d">复查</van-checkbox>
								<van-checkbox shape="square" name="e">申请恢复施工、使用、生产、经营的检查</van-checkbox>
								<van-checkbox shape="square" name="f">申请解除临时查封的检查</van-checkbox>
								<van-checkbox shape="square" name="g">其他检查</van-checkbox>
							</van-checkbox-group>
						</td>
					</tr>
					<tr>
						<td rowspan="2" style="width: 10%;" class="td_center">
							单位<br/>情况
						</td>
						<td style="width: 18%;" class="td_center">
							单位(场所)<br/>名&nbsp;&nbsp;称
						</td>
						<td style="width: 27%;">
							<van-field class="full_field" autosize v-model="objName" type="textarea" :border="false"/>
						</td>
						<td style="width: 18%;" class="td_center">
							法定代表人/<br/>主要负责人
						</td>
						<td style="width: 27%;">
							<van-field class="full_field" autosize v-model="objLegPerson" type="textarea" :border="false"/>
						</td>
					</tr>
					<tr>
						<td class="td_center">
							地&nbsp;&nbsp;址
						</td>
						<td>
							<van-field class="full_field" autosize v-model="objAddr" type="textarea" :border="false"/>
						</td>
						<td class="td_center">
							联系人及<br/>联系电话
						</td>
						<td>
							<van-field class="full_field" autosize v-model="objLegPersonPhone" type="textarea" :border="false"/>
						</td>
					</tr>
					<tr>
						<td style="width: 10%;" class="td_center">
							检查<br/>内容<br/>和<br/>情况
						</td>
						<td colspan="4">
							<van-field v-model="checkContent" rows="6" type="textarea" :border="false"/>
						</td>
					</tr>
					<tr>
						<td style="width: 10%;" class="td_center">
							备注
						</td>
						<td colspan="4">
							<van-field v-model="remark" rows="6" type="textarea" :border="false"/>
						</td>
					</tr>
					<tr>
						<td colspan="5" class="no_border">
							<span>消防监督检察员(签名)：</span><van-field v-model="checkerAssign"  :border="false"/><br/>
						</td>
					</tr>
					<tr>
						<td colspan="5" class="no_border">
							<span>被检查单位随同检察人员(签名)：</span><van-field v-model="assismentAssign"  :border="false"/>
						</td>
					</tr>
					<tr>
						<td colspan="5" class="no_border">
							此纪录由公安机关消防机构存档。对大型群众性活动举办前进行消防安全检查的，另制作一份加盖印章后移交公安机关治安管理部门，由其在存档联备注栏签收。
						</td>
					</tr>
				</table>
			</div>
			<div class="btn" v-if="!showImg">
				<van-button type="info" @click="sure">下一步</van-button>
			</div>
		</div>
		<van-popup v-model="show_time" position="bottom">
			<van-datetime-picker
				v-model="checkTime"
				title="检查时间"
				type="datehour"
				@cancel="cancelSelectTime"
				@confirm="chooseDate"
			/>
		</van-popup>
		<!-- 遮罩层 -->
		<v-mask :showOverLay="showOverLay" :tipMsg="tipMsg"></v-mask>
	</div>
</template>

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

export default {
	name: "optimizeImmediately",
	components: {
		headNav,
		"v-mask": mask_overLay,
	},
	data() {
		return {
			dayjs,
			check_type: [],
			show_time: false,
			checkTime: '',
			objName: '',
			objAddr: '',
			objLegPerson: '',
			objLegPersonPhone: '',
			checkContent: '',
			remark: '',
			checkerAssign: '',
			assismentAssign: '',
			checkForm: "1",
			isImportant: "1",
			showOverLay: false,
			tipMsg: "加载中",
			topInfo: "",
			questionList: "",
			companyInfo: "",
			year: "",
			month: "",
			day: "",
			hour: "",
			imgSrc: "",
			showImg: "",
			showIcon: "",
			checkBox1: false,
			checkBox2: false,
			checkBox3: false,
			checkBox4: false,
			radioGroup1: "",
			pdfDataOld: [],
			pdfDataNew: "",
			pdfDataQes: "",
			fileNum: "",
			arr1: [],
			arr2: [],
			arr3: [],
			arr4: [],
			arr5: [],
			arr6: [],
			arr7: [],
			arr8: [],
			arr9: [],
			arr10: [],
			formData: {}
		};
	},
    computed: {
        jobDetail () {
            const jobDetail = this.$route.query.jobDetail
            if (!jobDetail) return {}
			const res = JSON.parse(jobDetail)
			const {job_result_content, enforce_result, job_result_remark } = res
			console.log(job_result_content);
			this.checkContent = job_result_content
			this.remark = job_result_remark
			this.objName = res.enforce_obj_name
			this.objAddr = res.enforce_obj && res.enforce_obj.enforce_obj_address
			this.objLegPerson = res.enforce_obj && res.enforce_obj.legal_person
			this.objLegPersonPhone = res.enforce_obj && res.enforce_obj.legal_person_phone
			this.checkTime =  dayjs(res.start_time).format('YYYY 年 MM 月 DD 日 HH 时')
            return res
        }
    },
	mounted() {
		this.init();
	},
	watch: {
		show_time(n) {
			if (!n) {
				this.checkTime = this.checkTime || dayjs(this.jobDetail.start_time).format('YYYY 年 MM 月 DD 日 HH 时')
			}
 		}
	},
	methods: {
		showSelectCheckTime(){
			this.show_time = true
		},
		formatter(type, val) {
			return dayjs(val).format('YYYY 年 MM 月 DD 日 HH 时')
		},
		chooseDate(value) {
			this.checkTime = dayjs(value).format('YYYY 年 MM 月 DD 日 HH 时')
			this.show_time = false;
		},
		cancelSelectTime() {
			this.show_time = false
			this.checkTime = dayjs(this.jobDetail.start_time).format('YYYY 年 MM 月 DD 日 HH 时')
		},
		// 初始化
		async init() {
			// this.showOverLay = true;
			this.$http.get(`/v2/api/enforce-job/${this.jobDetail.id}`).then(res => {
                if (res && res.data && res.data.check_nodes) {
					const obj = res.data
					const users = []
					if (obj.executors) {
						obj.executors.map(item => {
							users.push(item.user_name)
						})
						obj.executorNames = users.join(', ')
					}
					const date = new Date(obj.start_time)
					this.year = date.getFullYear()
					this.month = date.getMonth()
					this.day = date.getDay()
					this.hour = date.getHours()
					this.formData = res.data
					this.fileNum = res.data.job_no
                }
            })
		},

		// 获取图片Api
		getPdfImgApi(id) {
			return get(`/supervision/getCheckLogPic/${id}`);
		},

		// 获取任务详情信息
		async getDetailInfoApi() {
			const res = await get(
				`/cdsupervisionTask/get/${this.$route.params.currentID}`
			);
			if (res.success === true) {
				return res.data;
			}
		},

		// 获取pdf答案
		async getPdfDataApi(id) {
			const res = await get(`/applet/getPdfData/${id}`);
			if (res.success === true) {
				return res.data;
			}
		},

		// 获取单位信息
		async getCompanyInfoApi(id) {
			const res = await get(`/cdSuperObjE/get/${id}`);
			if (res.success === true) {
				return res.data;
			}
		},

		// 获取编号
		async getFileNumApi() {
			const res = await get(`/applet/getPdfCode`);
			if (res.success === true) {
				return res.data;
			}
		},

		// 解析radio的字符串为数组
		getRadioGroup(str) {
			return str.split(",");
		},

		// 后退一页
		backPage() {
			this.$router.go(-1);
		},

		// 跳转检查结果
		rightClick() {
			this.$router.push(
				`/checkResult/${this.topInfo.taskId}/${this.$route.params.currentID}`
			);
		},

		// base64转blob
		dataURItoBlob(base64Data) {
			var byteString;

			if (base64Data.split(",")[0].indexOf("base64") >= 0)
				byteString = atob(base64Data.split(",")[1]);
			else byteString = unescape(base64Data.split(",")[1]);

			var mimeString = base64Data
				.split(",")[0]
				.split(":")[1]
				.split(";")[0];

			var ia = new Uint8Array(byteString.length);

			for (var i = 0; i < byteString.length; i++) {
				ia[i] = byteString.charCodeAt(i);
			}

			return new Blob([ia], {
				type: mimeString,
			});
		},

		// 确定
		async sure() {
			this.showOverLay = true;
			this.tipMsg = "生成pdf中";
			let subData = "";

			subData = await downloadPDF(
				document.querySelector("#file"),
				"消防监督检查记录"
			);

			var blob = this.dataURItoBlob(subData.turnImgData); // 上一步中的函数

			var canvas = document.createElement("canvas");
			var dataURL = canvas.toDataURL("image/jpeg", 0.5);
			var fd = new FormData(document.forms[0]);
			fd.append("file", blob, "pdf.png");

			this.tipMsg = "上传pdf中";

			let res = await postImg("/upload/moreUploadImg", fd);

			let imgSrc = "";
			if (res.success === true) {
				imgSrc = res.data;
			}

			postImg("/upload/moreUploadImg", subData.pdfFile).then((res) => {
				if (res.success === true) {
					post("/supervision/addCheckLogPic", {
						checkLogPic: imgSrc,
						taskId: this.topInfo.taskId,
					}).then((res) => {
						this.showOverLay = false;
						if (res.success === true) {
							this.$router.push(
								`/checkResult/${this.topInfo.taskId}/${this.$route.params.currentID}`
							);
						} else {
							this.$toast.fail("上传失败");
						}
					});
				} else {
					this.$toast.fail("上传失败");
				}
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.checkRecord {
	height: 100vh;
	display: flex;
	flex-direction: column;
	font-size: 14px;
	overflow: hidden;
	.headNav {
		flex: 0 0 50px;
	}
	.content {
		flex: 1;
		overflow-y: auto;
	}



	.pdfImg {
		margin-top: 47px;
	}

	.ml5 {
		margin-left: 5px;
	}

	.scale8 {
		transform: scale(0.8);
	}

	.scale9 {
		transform: scale(0.9);
	}

	.item {
	}

	.itemFlex1 {
		flex: 1;
	}

	.itemFlex2 {
		flex: 2;
	}

	.underLine {
		flex: 1;
		height: 15px;
		border-bottom: 1px solid #a0a0a2;
	}

	.underLine_ {
		border-bottom: 1px solid #a0a0a2;
		padding: 0 4px;
	}

	.file {
		margin-top: 60px;
		background-color: #fff;
		font-family: arial;

		color: #585858;
		font-size: 10px;

		.title {
			padding-top: 30px;
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			letter-spacing: 2px;

			.title_top {
				font-size: 1px;
				margin-bottom: 10px;
			}

			.title_bottom {
				font-size: 14px;
				font-weight: bold;
			}
		}

		.title {
			margin-bottom: 5px;
		}

		.number {
			font-size: 12px;
			display: flex;
			justify-content: flex-end;
			margin: 0 26px 0 0;
		}

		.file_top {
			margin-top: -40px;
		}

		.isImportant {
			margin: 20px 0;
			display: flex;
		}

		.tips {
			margin: 80px 0;
		}
	}

	.btn {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;

		button {
			flex: 1;
			margin: 5px 25px;
			height: 40px;
		}
	}

	.table {
		margin-top: -120px;

		.flexEnd {
			align-items: flex-end !important;
		}

		table {
			border: none;
			border-bottom: 1px solid;
			// border-collapse: collapse
		}

		.processName {
			width: 30px;
			font-size: 13px;
			text-align: center;
			color: #4d4d4d;
		}

		.sonProcessContent {
			padding: 0px 0px 20px 0px;

			.sonProcessItem {
				display: flex;
				align-items: flex-start;
				justify-content: flex-start;
				flex-wrap: wrap;

				.tableInput {
					border: none;
					border-bottom: 1px solid #a0a0a2;
				}

				.left {
					display: flex;
					margin-top: 2px;
				}

				.explain {
					textarea {
						border: none;
						width: 100%;
						resize: none;
						padding: 0;
					}
				}

				.sonProcessName {
					font-weight: bold;
					font-size: 12px;
					transform: scale(0.9);
					margin-left: -5px;
					// margin-top: 2px;
				}

				.right {
					display: flex;
					flex-wrap: wrap;
					margin-left: 10px;
					flex: 2;
					margin-top: -1px;

					.right_title {
					}

					.right_content {
						padding-left: 8px;
						height: 15px;
						display: flex;
						align-items: flex-end;
					}
				}

				.pabsolute {
					position: absolute;
					right: 15px;
					top: 15px;
				}
			}

			.sonProcessSpec {
				flex-wrap: nowrap;
				position: relative;
			}
		}

		th {
			border: 1px solid;
			padding: 4px 5px;
			border-bottom: none;
			border-right: none;

			&:last-child {
				border-right: 1px solid;
			}
		}

		td {
			border: 1px solid;
			padding: 4px 5px;
			border-bottom: none;
			border-right: none;

			&:last-child {
				border-right: 1px solid;
			}
		}

		.tableNewList_item {
			display: flex;
			justify-content: space-between;
		}
	}
}
</style>

<style lang="scss">
.checkRecord {
	.specCheckBox {
		display: inline-block;
		position: relative;

		.specCheckBox_div {
			position: absolute;
			font-weight: normal;
			width: 130px;
			top: -14px;
			left: 20px;
		}
	}

	.van-radio-group {
		flex-wrap: wrap;
		align-items: flex-start;
	}

	.van-radio__icon--checked .van-icon {
		background-color: transparent;
		border: none;
		color: #000;
		// font-size: 14px;
	}

	.van-radio__label {
		color: #585858;
	}

	.van-radio__icon.van-radio__icon--square {
		border: 1px solid #383838;
		width: 10px;
		height: 10px;
		margin-bottom: 2px;
	}

	.van-radio__icon.van-radio__icon--square.van-radio__icon--checked {
		border: 1px solid transparent;
		margin-left: -3px;
	}

	.van-icon.van-icon-success {
		border: none;
	}

	.van-field__control {
		border-bottom: 1px solid #757575;
		width: 100%;
	}

	.van-cell.van-field {
		padding: 5px 5px;
	}

	.van-radio__icon--disabled .van-icon {
		background-color: transparent;
	}

	.van-radio__label.van-radio__label--disabled {
		margin-left: 4px;
		color: #7f7f7f;
	}

	.van-checkbox {
		align-items: flex-start;

		.van-checkbox__icon.van-checkbox__icon--square {
			width: 12px;
			height: 12px;
		}

		.van-checkbox__icon.van-checkbox__icon--square.van-checkbox__icon--checked {
			// margin-top: 5px;

			.van-icon.van-icon-success {
				margin-top: 5px;
				width: 12px;
				height: 12px;
				font-size: 12px;
				background-color: transparent;
				color: #323233;
				border: none;
			}
		}

		.van-icon.van-icon-success {
			margin-top: 5px;
			width: 12px;
			height: 12px;
			font-size: 12px;
			border: 1px solid #323243;
		}
	}
}
</style>
<style lang="scss" scoped>
.check_type {
	width: 90%;
	margin: 0 5%;
	display: flex;
	border: 1px solid #ddd;
}
.check_item_label {
	flex: 0 0 57px;
}
.check_item_content {
	flex: 1;
}
.flex{
	display: flex;
}
.flex_col {
	flex-direction: column;
}
.flex_1 {
	flex: 1;
}
.br {
	border-right: 1px solid #ddd;
}
.bl {
	border-left: 1px solid #ddd;
}
.bt {
	border-top: 1px solid #ddd;
}
.bb {
	border-bottom: 1px solid #ddd;
}
.nb {
	border: none;
}
.min-height {
	height: 50%;
}
.center {
	display: flex;
	align-items: center;
	text-align: center;
}
/deep/ {
	.van-field__control {
		border: none;
	}
}
p {
	/deep/ {
		.van-field {
			width: 50px;
		}
	}
}

.record_table {
	border-collapse: collapse;
	margin-top: -20px;
	transform: scale(0.9);
	td {
		padding: 2px;
		border: 1px solid #ddd;
		&.td_center {
			text-align: center;
		}
		&.no_border {
			padding-top: 0;
			padding-bottom: 0;
		}
	}
	.no_border {
		border: none;
		span,
		.van-field {
			vertical-align: middle;
		}
		.van-field {
			height: 20px;
			display: inline-block;
			width: 100px;
		}
	}
}
.check_type_label {
	float: left;
	width: 60px;
}
.check_type_content {
	width: calc(100% - 60px);
}
.full_field {
	width: 100%;
	height: 100%;
	font-size: 10px;
}
</style>