<template>
	<div class="reportListDetail">
		<headNav :canBack="false" @leftAction="onLeftAction" title="任务执行" class="headNav"></headNav>
		<!-- 单位信息 -->
		<div class="companyInfo">
			<div class="missionInfo_cardInfo">
				<div class="missionInfo_cardInfo_contentCard">
					<!-- <van-cell title="文件名称" :value="jobDetail.job_name" /> -->
					<van-cell title="单位名称" :value="jobDetail.enforce_obj_name" />
					<van-cell title="单位地址" class="visible_cell__value" :value="jobDetail.enforce_obj && jobDetail.enforce_obj.enforce_obj_address" />
					<van-cell title="单位法人" :value="jobDetail.enforce_obj && jobDetail.enforce_obj.legal_person" />
					<van-cell title="联系方式" :value="jobDetail.enforce_obj && jobDetail.enforce_obj.legal_person_phone" />
					<van-cell title="下发单位" :value="jobDetail.enforce_org_name" />
					<van-cell title="编号" :value="jobDetail.job_no" />
					<van-cell title="检查时间" :value="dayjs(jobDetail.start_time).format('YYYY/MM/DD HH:mm:ss')" />
					<van-cell title="检查类型" class="job_status" :value="jobTypeMap[jobDetail.job_type]" />
                    <van-field
                        v-model="form.job_result_content"
                        rows="3"
                        autosize
                        label="检查内容和情况"
                        type="textarea"
                        placeholder="请输入检查内容和情况"
                        />
                    <van-cell title="现场照片">
                        <template>
                            <van-uploader :after-read="uploadFile" v-model="form.fileList"/>
                        </template>
                    </van-cell>
                     <van-field
                        v-model="form.job_result_remark"
                        rows="3"
                        autosize
                        label="备注"
                        type="textarea"
                        placeholder="请输入备注"
                        />
                    <van-cell title="检查结论">
                        <template>
                            <van-radio-group v-model="form.enforce_result"  direction="horizontal">
                                <van-radio name="PASS">合格</van-radio>
                                <van-radio name="NOT_PASS">不合格</van-radio>
                            </van-radio-group>
                        </template>
                    </van-cell>
				</div>
			
			</div>
			<van-button @click="submit" type="info" class="block-btn" block>提交</van-button>
		</div>
	</div>
</template>

<script>
import headNav from "@/components/headNav.vue";
import dayjs from 'dayjs'
import { compressAccurately } from "image-conversion";
import { enfoceJobStatus, enfoceJobSource, jobTypeMap } from "@/utils/variables.js";
import { handleProblemImgs, signFile } from "@/utils/index.js";
import baiduMap from "@/components/baiduMap.vue";
import mask_overLay from "@/components/overLay_xy.vue";
import executeStepMixin from '@/mixins/executeStep';
import { Dialog } from 'vant';

export default {
	name: "excuteJob",
	components: {
		headNav,
		baiduMap,
		"v-mask": mask_overLay,
	},
    mixins: [executeStepMixin],
	created() {
		this.getjobDetail()
	},
	data() {
		return {
			jobTypeMap,
            form: {
				job_result_content: null,
				enforce_result: null,
				job_result_remark: null,
				fileList: [],
			},
			dayjs,
			enfoceJobStatus,
			enfoceJobSource,
		};
	},
	methods: {
        onLeftAction() {
			const vm = this;
			Dialog.confirm({
				title: '温馨提示',
				message: '是否放弃该任务？',
				confirmButtonText: '暂存',
				cancelButtonText: '放弃',
			}).then(() => {
				// on confirm
				vm.submit(true);
			}).catch(() => {
				// on cancel
				put(`/v2/api/enforce-job/${this.jobDetail.id}/exchange`).then(res => {
					vm.$router.back();
				});
			});
		},
		getjobDetail () {
            const jobDetail = this.$route.query.jobDetail
            if (!jobDetail) this.jobDetail = {}
			const res = JSON.parse(jobDetail)
			const {job_result_content, enforce_result, job_result_remark, job_result_pictures } = res
			this.form.job_result_content = job_result_content
			this.form.enforce_result = enforce_result
			this.form.job_result_remark = job_result_remark
			this.form.fileList = this.form.fileList.concat(job_result_pictures ? job_result_pictures.split(',').map(el => this.createFileObj(el)) : [])
            this.jobDetail = res;
			this.updateTaskStep(res.id, 'EXECUTE');
        },
		createFileObj(id) {
			return {
				url: handleProblemImgs(id),
				isImage: true,
				data: {
					id
				}
			}
		},
        async uploadFile(data) {
			const file = await compressAccurately(data.file, {
				size: 100, //图片大小压缩到100kb
				// width: 1280, //宽度压缩到1280
			})
			const form = new FormData();
            form.append('fileName', data.file.name);
            form.append('fileBinary', file);
			// const read = new FileReader()
			// read.readAsDataURL(data.file)
			// read.onload = async () => {
			// 	const res = read.result.slice(28)
			// 	const downloadData = await signFile(res)
			// 	console.log(downloadData);
			// }

            this.$http.post('/v2/api/file', form).then(res => {
                if (res && res.data && res.data.id) {
					this.form.fileList[this.form.fileList.length - 1].data = res.data
                }
            })
        },
		submit(isSaveCache) {
			if (isSaveCache == true) {
				this.$http.put(`/v2/api/enforce-job/${this.jobDetail.id}`, {
					...this.form,
					job_result_pictures: this.form.fileList.map(el => el.data.id).join(',')
				}).then(res => {
					this.$toast.success({ type: 'success', message: '暂存成功' });
					this.$router.back();
				})
				return;
			}
			if (this.form.job_result_content.length > 300) {
				this.$toast.fail('检查内容和情况最多输入300个字');
				return
			}
			if (this.form.job_result_remark.length > 300) {
				this.$toast.fail('备注最多输入300个字');
				return
			}
			if (!this.form.enforce_result) {
				this.$toast.fail('请选择检查结论');
				return;
			}
			this.$http.put(`/v2/api/enforce-job/${this.jobDetail.id}`, {
				...this.form,
				job_result_pictures: this.form.fileList.map(el => el.data.id).join(',')
			}).then(res => {
                this.$router.replace({
					path: `/reportJobMonitorCheckRecord/${this.jobDetail.id}`,
					query: {
						jobDetail: JSON.stringify(this.jobDetail)
					}
				})
            })
		},
	},
};
</script>

<style lang="scss" scoped>
.reportListDetail {
	font-size: 14px;
	height: 100vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
    .headNav {
        flex: 0 0 50px;
    }
    .companyInfo {
        flex: 1;
        overflow: auto;
    }
	.mt2 {
		margin-top: 3px;
	}

	.headTip {
		margin-bottom: 10px;
		padding: 0 15px;
	}
	.missionInfo {
		margin-top: 57px;

		.missionInfo_cardInfo {
			padding: 0 15px;
			background-color: #fff;

			.missionInfo_cardInfo_headCard {
				padding-top: 10px;
				padding-bottom: 5px;
				font-weight: bold;
			}
		}

		.missionInfo_cardInfo_more {
		}
	}

	.companyInfo {
		@extend .missionInfo;
	}

	.noticeDoc {
		margin-top: 10px;

		.noticeDoc_docItem {
			padding: 10px 0;
			background-color: #fff;
			color: #616161;
			border-bottom: 1px solid #eaeaea;

			&:last-child {
				border-bottom: none;
			}

			.noticeDoc_noticeName {
				padding: 5px 0;
			}

			.noticeDoc_status {
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #787878;
				font-size: 12px;
				margin-top: 5px;
				// padding: ;
			}
		}
	}

	.inspectContent {
		margin-top: 10px;

		.inspectContent_content {
			padding: 5px 15px;
			background-color: #fff;
		}
	}

	.checkResult {
		margin-top: 10px;

		.unChecked,
		.Checked {
			padding: 5px 15px;
			background-color: #fff;

			.checkedItem {
				color: #616161;
				border-bottom: 1px solid #e8e8e8;

				&:last-child {
					border-bottom: none;
				}
			}
		}
	}

	.reCheckResult {
		margin-top: 10px;

		.unChecked,
		.Checked {
			padding: 5px 15px;
			background-color: #fff;
		}

		.unChecked {
			padding-bottom: 10px;
		}
	}

	.lawRecord {
		margin-top: 10px;

		.unChecked,
		.Checked {
			padding: 8px 15px;
			background-color: #fff;

			.checkedItem {
				padding: 8px 0;
				align-items: center;
			}
		}
	}
}
</style>

<style lang="scss">
.reportListDetail {
	.van-cell {
		padding: 8px 0;
		// border-bottom: 1px solid #cfcfcf;
		font-size: 12px;

		&:last-child {
			border-bottom: none;
		}

		.van-cell__title {
			color: #565656;
		}
	}

	.missionInfo {
		.missionInfo_cardInfo {
			.search-icon.van-icon.van-icon-location {
				display: flex;
				align-items: center;
				color: #00f;
				margin-left: 10px;
			}

			.van-icon.van-icon-arrow.van-cell__right-icon {
				margin-left: 10px;
			}
		}
	}

	.missionInfo_cardInfo_more {
		.van-button.van-button--info.van-button--small {
			padding: 5px 20px;
			height: auto;
			margin-bottom: 5px;
			background-color: transparent;
			border: none;
			color: #448fff;
			font-size: 13px;
			font-weight: bold;
		}
	}

	.inspectContent_content {
		.van-cell__value {
			color: #02a7f0;

			span {
				font-size: 9px;
			}
		}

		.van-icon.van-icon-arrow.van-cell__right-icon {
			color: #02a7f0;
			font-size: 12px;
		}
	}

	.van-empty {
		padding: 0;
		padding-bottom: 10px;
	}

	.van-empty__description {
		color: #878787;
		font-weight: bold;
	}

	.checkResult,
	.reCheckResult {
		.unChecked,
		.Checked {
			.checkedItem {
				.van-cell,
				.van-cell.van-cell--clickable {
					border: none;

					&::after {
						border: none;
					}
				}

				.van-cell__value {
					color: #02a7f0;

					span {
						font-size: 9px;
					}
				}

				.van-icon.van-icon-arrow.van-cell__right-icon {
					color: #02a7f0;
					font-size: 12px;
				}
			}
		}
	}

	.van-empty__image {
		width: 140px;
		height: 130px;
	}

	.van-empty__bottom {
		margin-top: 5px;

		.van-button.van-button--info.van-button--normal {
			width: 120px;
			height: 40px;
			border-radius: 5px;
		}
	}
}

.block-btn {
	width: 85%;
	margin: 35px 7.5%;
	border-radius: 10px;
    margin-bottom: 20px;
}
</style>
<style lang="scss" scoped>
.job_status {
	/deep/ {
		.van-cell__value {
			color: #FE9400;
		}
	}
}
</style>