<template>
	<div class="behaviorNotice">
		<headNav :title="titleName"></headNav>

		<div class="time">
			<div class="timeContent">
				<div>
					上传时间：
				</div>
				<div class="ml10 df aic">
					<span v-if="datetime">
						{{ datetime }}
					</span>
					<span v-else>
						—— ——
					</span>
				</div>
			</div>
		</div>

		<div class="file">
			<div class="fileContent">
				<div class="img" v-if="fileList.length == 0">
					<van-image v-if="!isSee" :src="imgSrc" width="4rem" height="5rem"></van-image>
					<van-image 
					v-else 
					:src="imgSrc" 
					width="8rem" 
					height="12rem" 
					@click="preview(imgSrc)">
						<template v-slot:loading>
						    <van-loading type="spinner" size="20" />
						  </template>
					</van-image>
				</div>
				<div class="tips mt20 FontColorInfo" v-if="!isSee">
					需要添加项目后才能执行相关操作
				</div>
				<div class="btn mt20" v-if="!isSee">
					<van-uploader :before-read="beforeAvatarUpload"  v-model="fileList" multiple :after-read="afterRead" :max-count="1">
						<van-button type="info" icon="plus">拍照上传</van-button>
					</van-uploader>
				</div>
			</div>
		</div>
		
		<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 { ImagePreview } from 'vant'
	import {
		get,
		post,
		postImg,
		imgBaseUrl
	} from '@/utils/http.js'
	import { compressAccurately } from "image-conversion";

	export default {
		name: 'behaviorNotice',
		components: {
			headNav,
			'v-mask': mask_overLay
		},
		data() {
			return {
				fileList: [],
				isSee: false,
				titleName: '行为告知单',
				imgSrc: require('../../assets/null.png'),
				datetime: '',
				showOverLay: false,
				tipMsg: ''
			}
		},
		mounted() {
			if (this.$route.params.status == '1') {
				this.titleName = '行为告知单'
			} else if (this.$route.params.status == '2') {
				this.titleName = '处罚决定书'
			}
			this.init();
		},
		methods: {
			// 初始化
			init() {
				this.getImgApi();
			},
			
			getImgApi() {
				this.showOverLay = true;
				this.tipMsg = '加载中';
				get(`/v1/api/imageAddress/imageInfos`, {
					illegalOccId: this.$route.params.ID,
					punishTypeName: this.$route.params.status
				}).then(res => {
					this.showOverLay = false;
					if (res.data === 'noImage') {
						this.isSee = false;
					} else {
						this.isSee = true;
						if (this.$route.params.status === '1') {
							let imgSrc = res.data.fileAddress;
							imgSrc = imgSrc.split('/').reverse();
							// this.imgSrc = imgBaseUrl + '/' + imgSrc[3] + '/' + imgSrc[1] + '/' + imgSrc[0];
							this.imgSrc = '/v1/api/' + imgSrc[3] + '/' + imgSrc[1] + '/' + imgSrc[0];
						} else {
							// this.imgSrc = imgBaseUrl + res.data.fileAddress;
							this.imgSrc = '/v1/api/' + res.data.fileAddress;
						}

						this.datetime = this.$getTime(new Date(res.data.createTime));
					}
				});
			},

			backPage() {
				this.$router.go(-1);
			},

					    //上传图片前压缩
    beforeAvatarUpload(file) {
      console.log(file);
      const isJpgOrPng =
        file.type === "image/jpeg" || file.type === "image/png";
      if (!isJpgOrPng) {
        this.$toast.fail("图片只能是 JPG 或 PNG 格式!");
        return false;
      }
	  				this.showOverLay = true;
				this.tipMsg = '上传中';
      return new Promise((resolve) => {
        compressAccurately(file, {
            size: 100, //图片大小压缩到100kb
            // width: 1280, //宽度压缩到1280
          })
          .then((res) => {
			  			  	this.showOverLay = false;
				this.tipMsg = '上传成功';
            resolve(res);
          });
      });
    },

			
			// 预览图片
			preview(src) {
				ImagePreview([src]);
			},

			afterRead(file) {
				let formData = new FormData();

				formData.append("file", file.file);
				formData.append("imageType", `${ this.$route.params.status }`);
				formData.append('illegalOccId', `${ this.$route.params.ID }`);
				
				this.showOverLay = true;
				this.tipMsg = '上传中';

				postImg('/v1/api/uploadImgs/illegalOccUploadImg', formData).then(res => {
					this.showOverLay = false;
					if (this.$route.params.status == '2') {
						this.$router.push(`/roadDetails/${ this.$route.params.ID }`);
					} else {
						this.$router.push(`/roadDetails/${ this.$route.params.ID }`);
					}
				});
				
			}
		},
	}
</script>

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

		.time {
			margin-top: 57px;

			.timeContent {
				display: flex;
				font-size: 13px;
				color: #7f7f7f;
				background-color: #fff;
				padding: 10px 15px;
			}
		}

		.file {
			height: calc(100vh - 108px);
			background-color: #fff;
			margin-top: 10px;

			.fileContent {
				padding: 0 15px;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100%;
				flex-direction: column;
			}
		}


	}
</style>

<style lang="scss">
	.behaviorNotice {
		.van-image.van-uploader__preview-image {

			width: 200px;
			height: 400px;
		}
	}
</style>
