{yun:}include file="$wapstyle/member/cheader.htm"{/yun}
<div class="none" id="yunvue">
	<!-- 页面整体部分 -->
	<div class="issue_post_body">
		<div class="issue_post_body_card">
			<div class="comshowtip">上传公司环境照片，可提升企业曝光率</div>
			<div class="company_photo_box">
				<van-uploader v-model="showList" :before-delete="beforedel" :after-read="afterRead"
					:before-read="beforeRead" :max-size="5242880" />
			</div>

		</div>
		<div class="Save_button" @click="showSave">{{btext}}</div>
	</div>
</div>
<script src="{yun:}$wap_style{/yun}/js/compressor.min.js?v={yun:}$config.cachecode{/yun}"></script>
<script>
	var uploadArr = [];
	var uploadErr = false;
	new Vue({
		el: '#yunvue',
		data: {
			picDel: [],
			picAdd: [],
			picList: [],
			picViewNum: [],
			btext: '保存',
			showList: [],

		},
		created() {
			this.getList();
		},
		methods: {
			getList: function() {
				showLoading();
				var self = this;
				$.post('{yun:}url d=wxapp h=com m=info c=show{/yun}', {
					rand: Math.random()
				}, function(data) {
					hideLoading();

					if (data) {

						let list = data.data.list
						self.picList = list;

						if (list && list.length > 0) {
							let picViewNum = []
							for (let i = 0; i < list.length; i++) {
								picViewNum.push(i) // 只是个计数器，没其它作用，每个盒子展示两个图片，顾出来个这o(*￣︶￣*)o
								let temp = {
									'url': list[i].picurl,
									'id': list[i].id
								};
								self.showList.push(temp);
							}
							self.picViewNum = picViewNum
						}
					}

					$("#yunvue").css('display', 'block');
				}, 'json');
			},
			beforedel(file, detail) {
				var self = this;
				var noupload = true;
				self.picAdd.forEach(function(val,index){
					if(val.index == detail.index){
						// 删除的是本次选择的，不是已经上传的
						noupload = false;
						self.picAdd.splice(index, 1);
					}
				});
				if(noupload){
					// 删除已经上传的，需要记录
					self.picDel.push(file);
				}
				return true;
			},
			beforeRead(file) {
				return new Promise((resolve) => {
					// compressorjs 默认开启 checkOrientation 选项
					// 会将图片修正为正确方向
					// 图片压缩
					new Compressor(file, {
						quality: 0.6,
						success: resolve,
						error(err) {}
					});
				});
			},
			afterRead(file,detail) {
				//保存添加图片的上传信息
				//拼接个对象进去

				let obj = {
					error: true,
					url: file.content,
					index: detail.index
				};
				this.picAdd.push(obj);

			},
			showSave: function() {
				let that = this;
				let showAdd = that.picAdd;
				let showDel = that.picDel;
				let saveErr = false;
				if (showAdd.length > 0) {
					uploadArr = showAdd;
					showLoading('上传中...');
					that.uploadAjax();
					return false;
				}
				if (showDel.length > 0) {
					var formData = {};
					formData.id = [];
					for (let i = 0; i < showDel.length; i++) {
						if (showDel[i].id) {
							formData.id.push(showDel[i].id);
						}
					}
					showLoading('删除中...');
					$.post('{yun:}url d=wxapp h=com m=info c=showdel{/yun}', formData, function(data) {
						if (data.error != 1) {
							saveErr = true;
						}
					});
				}
				
				if (saveErr) {
					that.btext = "重新上传";
					showToast('保存失败');
				} else {
					showToast("保存成功", 2, function() {
						history.back();
					});
				}
			},
			uploadAjax(key = 0){
				var that = this;
				if(key < uploadArr.length){
					var formData = {
						wappic: 1,
						uimage: uploadArr[key].url
					};
					$.post("{yun:}url d=wxapp h=com m=info c=showSave{/yun}", formData, function(data){
						if (data.error == 1) {
							uploadArr[key].error = false;
										
						} else {
							uploadArr[key].error = true;
							uploadErr = true;
						}
						key++
						that.uploadAjax(key);
					})
				}else{
					// 上传完毕
					this.picAdd = [];
					if(this.picDel.length > 0){
						// 有需要删除的图片，再处理删除
						this.showSave();
					}else{
						if (uploadErr) {
							this.btext = "重新上传";
							showToast('保存失败');
						} else {
							showToast("保存成功", 2, function() {
								history.back();
							});
						}
					}
				}
			}
		}
	})
</script>
</body>
</html>