<template>
	<view class="page-body">
		<view v-if="pageStep==1">
			<view class="feedback-box">
				<textarea v-model="saveMsg.auditExplain" placeholder="在此输入稽核异常的原因（必填）" class="feedback" placeholder-style="color:#CCCCCC;"/>
				<checkbox-group @change="changeState">
					<label class="checkbox">
						<checkbox :value="saveMsg.isAddIn" checked /><text class="checkbox-text">本次{{pageType==1 ? '长款已补齐流水':'短款已补入现金'}}</text>
					</label>
				</checkbox-group>
			</view>
			<view class="btn-box">
				<button type="default" class="main-btn" @click="nextStep ">提交</button>
				
			</view>
		</view>
		<view class="photo-box" v-else-if="pageType==0 && pageStep==2">
			<h4>上传短款凭证照片</h4>
			<div class="img-box">
				
				<div class="upload-file-container">
				 
				  <div class="upload-file-unit" v-for="(item,index) in uploadImgList" :key="index">
					<span class="upload-file-remove" @click.stop="deleteImgFunc(index)">-</span>
					<image mode="aspectFill" :src="item" @tap="showImg(index)" />
				  </div>
					<div class="upload-file-add" @click="chooseImage">
						<div class="upload-file-add-container">
						
						</div>
					 </div>
				</div>
			</div>
			<view class="uni-flex btn-box">
				
				<button type="default" class="stip-btn" @tap="submitMsg">跳过</button>
				<button type="default" class="push-btn" @tap="submitMsg">提交</button>
			</view>
		</view>
		<view class="success-box" v-else>
			<image src="/static/images/success.png" mode="aspectFit"></image>
			<h2>稽核反馈提交成功！</h2>
		</view>
	</view>
</template>

<script>
	import {mapGetters,mapMutations} from 'vuex'
	export default {
		data(){
			return {
				uploadImgList: [],
				pageType: '',
				pageStep: 1,
				saveMsg: {
					CheckAccount_Id: '',
					auditExplain: '',
					isAddIn: true,
					imageInfo: ''
				}
			}
		},
		methods: {
			changeState(e){
				
				this.saveMsg.isAddIn = e.detail.value.length>0 ? true : false
			},
			deleteImgFunc(index) {
				this.uploadImgList.splice(index,1)
			},
			showImg(index) {
				uni.previewImage( {
					urls: this.uploadImgList,
					current: index,
					loop: true,
					indicator: 'number'
				});
			},
			chooseImage(){
				let _this = this
				uni.chooseImage({
					sourceType: ['camera','album'],
					sizeType: 'compressed',
					cout: 1 ,
					success: (data) => {
						// console.log(data)
						
						if(data.tempFilePaths.length>0) {
							// let list = []
							 data.tempFilePaths.forEach(function (n){
								uni.getFileSystemManager().readFile({
									filePath: n, //选择图片返回的相对路径
									encoding: 'base64', //编码格式
									success: function(res) { // 
										let base64 = 'data:image/jpeg;base64,'+res.data //.replace(/\+/ig,'%2B') //不加上这串字符，在页面无法显示的哦
										
										// list.unshift(base64)
										_this.uploadImgList.unshift(base64)
									}
								})
							})
						}
					},
				});
			},
			nextStep(){
				if(this.pageType==1) { //长款直接提交
					this.submitMsg()
				}else {
					if(this.saveMsg.auditExplain.trim().length==0) {
						uni.showToast({
							title:'请输入异常原因',
							icon: 'none'
						})
						return
					}
					this.pageStep=2
					
				}
			},
			submitMsg() {
				let _this = this
				if(this.saveMsg.auditExplain.trim().length==0) {
					uni.showToast({
						title:'请输入异常原因',
						icon: 'none'
					})
					return
				}
				this.saveMsg.imageInfo = this.uploadImgList.join('|')
				this.$request.$webPost('Audit/UpLoadAuditExplain',this.saveMsg).then(res=>{
					
					if(res.Result_Code!==100) {
						
						uni.showToast({
							title: res.Result_Desc,
							icon: 'none'
						})
					}else{
						_this.pageStep = 3
						setTimeout(function(){
							uni.navigateBack({
								delta:1
							})
							uni.$emit('cashAudit',true)
						},1500)
					}
				})
				// console.log(this.saveMsg)
			}
		},
		onLoad(option) {
			this.pageType = option.type
			this.saveMsg.CheckAccount_Id = option.id
		}
	}
</script>

<style scoped>
	.page-body {
		height:100%;
	}
	.feedback-box {
		padding: 20rpx 52rpx;
		
	}
	.feedback {
		width: 656rpx;
		height: 354rpx;
		padding: 20rpx;
		box-sizing: border-box;
		background: #ffffff;
		border-radius: 14rpx;
		margin-bottom: 28rpx;
	}
	
	.checkbox-text {
		font-size: 26rpx;
		color: #8A9DCA;
	}
	.main-btn {
		margin: 72rpx auto;
		border-radius: 43rpx;
		height: 86rpx;
		line-height: 86rpx;
		padding: 0;
		text-align: center;
		width: 656rpx;
		background: linear-gradient(to left, #8a9dca 0%, #8998bb 98%, #8a99bc 100%);
		color: #fff;
		font-size: 30rpx;
	}
	h3 {
		font-size: 32rpx;
		color: #1A1E24;
	}
	.photo-box {
		padding: 40rpx 30rpx;
		background-color: #fff;
		height: 100%;
		box-sizing: border-box;
	}
	.btn-box {
		
		position: fixed;
		bottom: 0;
		left:0 ;
		width: 100%;
		padding: 42rpx 0 90rpx 0;
		background: #f8f9fb;
		box-sizing: border-box;
	}
	.stip-btn {
		width: 277rpx;
		height: 86rpx;
		color: #8998bb;
		line-height: 86rpx;
		border: 1rpx solid #8998bb;
		border-radius: 43rpx;
		text-align: center;
		font-size: 30rpx;
		
	}
	.push-btn {
		width: 277rpx;
		height: 86rpx;
		color: #fff;
		line-height: 86rpx;
		background: #8a9dca ;
		border-radius: 43rpx;
		text-align: center;
		font-size: 30rpx;
	}
	
	.upload-file-container {
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 260rpx;
		box-sizing: border-box;
		flex-wrap: wrap;
	}
	.upload-file-add {
		width: 130rpx;
		height: 126rpx;
		margin-right: 16rpx;
	    box-sizing: border-box;
	}
	.upload-file-add-container {
	    position: relative;
	    border: 1rpx solid #ccc;
	    width: 136rpx;
	    height: 137rpx;
		border-radius: 6rpx;
	}
	.upload-file-add-container::before {
		content: '';
		display: block;
		position: absolute;
		left: 40rpx;
		top: 50%;
		height: 2rpx;
		background-color: #ccc;
		width: 60rpx;
	}
	.upload-file-add-container::after {
		content: '';
		display: block;
		position: absolute;
		left: 50%;
		top: 40rpx;
		width: 2rpx;
		height: 60rpx;
		background-color: #ccc;
	}
	 
	.upload-file-add-img{
		margin-top: 10rpx;
	    font-size: 24rpx;
	    color: #919191;
	}
	.upload-file-unit {
		position: relative;
		width: 137rpx;
		height: 136rpx;
		margin-right: 36rpx;
		margin-top: 16rpx;
		border-radius: 8rpx;
		border: 2rpx solid #ccc;
	}
	
	.upload-file-unit image {
		width: 135rpx;
		height: 134rpx;
		border-radius: 8rpx;
	}
	
	.upload-file-remove {
		position: absolute;
		top: -14rpx;
		right: -12rpx;
		display: inline-block;
		width: 37rpx;
		height: 37rpx;
		line-height: 30rpx;
		background-color: #ff0000;
		color: #ffffff;
		font-size: 30rpx;
		border-radius: 50%;
		text-align: center;
		z-index: 1;
	}
	/* 成功弹出框 */
	.success-box {
		padding-top: 198rpx;
		text-align: center;
	}
	.success-box h2 {
		font-size: 38rpx;
		color: #364656;
	}
		
	.success-box image {
		width: 406rpx;
		height: 320rpx;
		margin-bottom: 30rpx;
	}
</style>
