<template>
	<view class="page-body" v-if="pageMsg.isShow">
		<!-- 卡片 -->
		<view class="audit-card">
			<view class="card-header">
				<h3>{{detailMsg.Shop_Name }}</h3>
				<view class="uni-flex ai-center jc-between fs12">
					<text>{{detailMsg.Serverpart_Name }}</text>
					<text>稽核时间：{{$util.cutDate(detailMsg.Audit_Time,'YYYY/MM/DD hh:mm:ss') }}</text>
				</view>
			</view>
			
		</view>
		
		<h4>稽核信息</h4>
		<view class="main-card">
			<view  class="uni-flex ai-center jc-between">
				<view class="uni-flex ai-center ">
					<text>现金营收：</text>
					<text class="number-text" :style="{'width': numberText+'rpx'}">{{$util.fmoney( detailMsg.Cash ,2)}}元</text>
				</view>
				<view class="uni-flex ai-center">
					<text>稽核类型：</text>
					<text >{{detailMsg.Audit_Type }}</text>
				</view>
				
			</view>
			<view  class="uni-flex ai-center jc-between">
				<view class="uni-flex ai-center " >
					<text>稽核缴款：</text>
					<text class="number-text" :style="{'width': numberText+'rpx'}">{{$util.fmoney(detailMsg.Cash_Pay) }}元</text>
				</view>
				
				<view class="uni-flex ai-center" >
					<text>稽核人员：</text>
					<text class="number-text">{{detailMsg.Worker_Name }}</text>
				</view>
			</view>
			<view class="uni-flex ai-center jc-between">
				<view class="uni-flex ai-center">
					<text>长短款额：</text>
					<text class="price-num number-text" :style="{'width': numberText+'rpx'}">{{$util.fmoney(detailMsg.Different_Price)}}元</text>
				</view>
				<view class="uni-flex ai-center">
					<text>收银人员：</text>
					<text>{{detailMsg.Cashier_Name}}</text>
				</view>
			</view>
			<view class="uni-flex ai-center jc-between">
				<view class="uni-flex ai-center">
					<text>稽核误差率：</text>
					<text class="number-text" :style="{'width': (numberText - 26)+'rpx'}">{{detailMsg.Audit_ErrorRate }}</text>
				</view>
				
			</view>
			<view  class="uni-flex ai-center jc-between">
				<!-- 短款时不显示 -->
				<view class="uni-flex ai-center" v-if="detailMsg.Add_Amount>0">
					<text>{{detailMsg.Different_Price >0 ? '流水补入' : '现金补入'}}：</text>
					<text :style="{'width': numberText+'rpx'}">{{$util.fmoney(Math.abs(detailMsg.Add_Amount),2)}}元</text>
				</view>
				
			</view>
		</view>
		
		<h4>稽核反馈</h4>
		<template v-if="detailMsg.CheckAccount_Desc">
			<view class="main-card desc" >
				
				<text >
					{{detailMsg.Calibrator_Name ?( detailMsg.Calibrator_Name+'：'+ detailMsg.CheckAccount_Desc ): detailMsg.CheckAccount_Desc}}
				</text>
				<ul class="uni-flex ai-center imgList">
					<li v-for="(img,index) in detailMsg.ImageList " :key="index">
						<image :src="img.ImageUrl " mode="aspectFit" @click="showImg(index)"></image>
					</li>
				</ul>
			</view>
			<view class="uni-flex ai-center" v-if="detailMsg.Check_State!=0">
				<text class="uni-icon uni-icon-checkmarkempty"></text>
				<text class="checkbox-text ">本次{{detailMsg.Different_Price >0 ? '长款已补齐流水':'短款已补入现金'}}</text>
			</view>
			
		</template>
		
		<view class="feedback-box" v-else-if="detailMsg.AuditIurisdiction ==1">
			<view class="uni-flex align-center" v-if="detailMsg.Check_State==0">
				<checkbox-group @change="changeState">
					<label class="checkbox ">
						<checkbox :value="saveMsg.isAddIn" checked /><text class="checkbox-text">本次{{detailMsg.Different_Price >0 ? '长款已补齐流水':'短款已补入现金'}}</text>
						
					</label>
				</checkbox-group>
				<view class="add-amout uni-flex" >
					<input type="digit" :value="saveMsg.addAmout" :placeholder="pageMsg.placeAmout" :placeholder-style="{'color':'#C5C4C4','line-height':'56rpx'}" @input="inputAddAmout"/>
					<text>元</text>
				</view>
				
			</view>
			
			<textarea v-model="saveMsg.auditExplain" :placeholder="(detailMsg.Different_Price <0 ?'在此输入短款差额的原因并上传短款凭证照片（必填），如未补齐现金，将经过二次审核': '在此输入稽核长款的原因（必填），如未补入流水，将经过二次审核')" class="feedback" placeholder-style="color:#CCCCCC;"/>
			<div class="img-box" v-if="detailMsg.Different_Price <0">
				
				<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="showUpImg(index)" />
					</div>
					<div class="upload-file-add" @click="chooseImage">
						<div class="upload-file-add-container"></div>
					 </div>
				</div>
			</div>
		</view>
		
		<view class="page-bottom" v-if="detailMsg.AuditIurisdiction ==1 && !detailMsg.CheckAccount_Desc">
			<button type="default" class="main-btn" @tap="submitMsg">
				<image src="/static/images/publicity/ybyj.png" mode="aspectFit"></image>
				确认反馈
			</button>
		</view>
	</view>
</template>

<script>
	import {mapGetters,mapMutations} from 'vuex'
	export default {
		data() {
			return {
				pageMsg: {
					id: '',
					isShow: false,
					ispost: false,
					placeAmout: ""
				},
				numberText: 78,
				uploadImgList: [], //上传的图片地址
				saveMsg: {
					CheckAccount_Id: '',
					auditExplain: '',
					isAddIn: true,
					imageInfo: '',
					addAmout:''
				},// 提交的反馈数据
				detailMsg:{}, // 稽核详情
				
			}
		},
			
		computed: {
			
			imageList(){
				let list = []
				if(this.detailMsg.ImageList ){
					this.detailMsg.ImageList.map(n=>{list.push(n.ImageUrl)})
				}
				return list
			}
		},
		methods: {
			...mapMutations(['shouldReLoadingList']),
			inputAddAmout(event) {
				this.saveMsg.addAmout = event.detail.value
			},
			getWidth(data){
				let len1 = parseInt(data.Cash)+''
				let len2 = parseInt(data.Cash_Pay)+''
				let len3 = Math.abs( parseInt(data.Different_Price))+''
				let len4 = parseInt(data.Audit_ErrorRate.replace('%','') )+''
				
				let keyLen = [len1.length,len2.length,len3.length,data.Audit_ErrorRate.indexOf('.')>-1? len4.length+1 :len4.length ]
				
				keyLen.sort(function(a,b){
					return b-a
				})
				
				let len = keyLen[0] < 3 ? keyLen[0]* 2 * 10 + 80 :keyLen[0]* 2 * 10 + 60
				this.numberText =  len  > 100 ? len : 100
				
			},
			getDetail() {
				let _this = this
				this.$request.$webGet('Audit/GetAuditDetils',{ CheckAccount_Id: this.pageMsg.id})
				.then(res =>{
					if(!res.Result_Code ||res.Result_Code!='100'){
						_this.pageMsg.isShow =false
						
						_this.detailMsg = {}
						
					}else{
						_this.detailMsg = res.Result_Data
						_this.getWidth(res.Result_Data)
						_this.pageMsg.placeAmout = (Math.abs( res.Result_Data.Different_Price)).toFixed(2)
						_this.pageMsg.isShow = true
					}
					uni.hideLoading()
				})
			},
			// 图片预览
			showImg(index) {
				uni.previewImage( {
					urls: this.imageList,
					current: index,
					loop: true,
					indicator: 'number'
				});
			},
			
			changeState(e){
				this.saveMsg.isAddIn = e.detail.value.length>0 ? true : false
			},
			deleteImgFunc(index) {
				this.uploadImgList.splice(index,1)
			},
			showUpImg(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) => {
						if(data.tempFilePaths.length>0) {
							
							 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') //不加上这串字符，在页面无法显示的哦
										
										_this.uploadImgList.unshift(base64)
									}
								})
							})
						}
					},
				});
			},
			
			submitMsg() {
				let _this = this
				if(this.ispost) return 
				if(this.saveMsg.auditExplain.trim().length==0) {
					uni.showToast({
						title:'请输入异常原因',
						icon: 'none'
					})
					return
				}
				if(_this.detailMsg.Different_Price<0 && _this.uploadImgList.length==0) {
					uni.showToast({
						title:'请上传凭证',
						icon: 'none'
					})
					return
				}
				if(this.saveMsg.isAddIn && _this.saveMsg.addAmout==='0') {
					uni.showToast({
						title:'补入金额需大于零',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title: '正在提交...',
					icon:'none'
				})
				if(this.saveMsg.isAddIn && !_this.saveMsg.addAmout){
					_this.saveMsg.addAmout = Math.abs(_this.detailMsg.Different_Price)
				}else if(!this.saveMsg.isAddIn){
					_this.saveMsg.addAmout = 0
				}
				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{
						uni.showToast({
							title: res.Result_Desc,
							icon: 'success'
						})
						
						_this.getDetail()
						_this.shouldReLoadingList(true)
						
						_this.ispost = false
					}
				})
			
			}
		},
		onLoad(option) {
			let _this = this
			uni.showLoading({
				title:'正在加载'
			})
			this.pageMsg.id = option.id
			this.saveMsg.CheckAccount_Id = option.id
			this.getDetail()
			
		},
		
		onUnload() {
			this.$util.addUserBehavior()
			
		}
		
	}
</script>

<style scoped>
	.page-body {
		min-height: 100%;
		padding: 40rpx 25rpx;
		background-color: #fff;
		box-sizing: border-box;
		padding-bottom: 196rpx;
	}
	
	.audit-card {
		border-radius: 10rpx;
		width: 700rpx;
		/* height: 165rpx; */
		background: linear-gradient(to right , #8998bb 0%, #a9b5d2 100%);
		color: #FFFFFF;
		
	}
	.card-header {
		padding: 24rpx 16rpx;
	}
	.card-header h3 {
		padding-bottom: 10rpx;
		font-size: 30rpx;
	}
	.card-header .fs12 >text {
		font-size: 24rpx;
		
	}
	
	h4 {
		font-size: 26rpx;
		margin-top: 38rpx;
		margin-bottom: 26rpx;
		color: #000;
	}
	
	.main-card {
		width: 700rpx;
		color: #74838E;
		background: #f8f9fa;
		border-radius: 10rpx;
		font-size: 26rpx;
		padding: 24rpx 16rpx;
		box-sizing: border-box;
	}
	
	.main-card view> view{
		flex: 1;
		
	}
	.main-card p + p, .main-card >view+ view{
		margin-top: 16rpx;
		
	}
	
	.main-card view> text,.main-card view> p,.card-content-title {
		font-size: 26rpx;
		/* white-space: nowrap; */
	}
	
	.main-card view> text:nth-child(2),
	.card-content-text >p{
		color: #000;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		min-width: 76rpx;
		text-align: right;
		max-width: 204rpx;
		/* height: 46rpx; */
		box-sizing: border-box;
	}
	
	.main-card view > p.price-num,.main-card view > text.price-num {
	 color: #DD6060;
	}
	.main-card.desc {
		padding-right: 0;
		margin-bottom: 16rpx;
	}
	.main-card.desc text {
		padding-right: 16rpx;
	}
	/*  */
	.imgList {
		flex-wrap: wrap;
		margin-top: 36rpx;
	}
	.imgList li {
		max-width: 139rpx;
		height: 139rpx;
		border-radius: 8rpx;
		border: 2rpx solid #eee;
		margin-right: 28rpx;
		margin-top: 28rpx;
		overflow: hidden;
	}
	
	.imgList image {
		width: 137rpx;
		height: 137rpx;
		border-radius: 8rpx;
	}
	
	.uni-icon-checkmarkempty {
		color: #91A6D7;
		font-size: 40rpx;
		margin-right: 8rpx;
	}
	/* 稽核反馈输入 */
	.feedback-box {
		
	}
	.feedback {
		width: 100%;
		height: 150rpx;
		padding: 20rpx 20rpx 0 20rpx;
		box-sizing: border-box;
		background: #f8f9fa;
		border-radius: 14rpx 14rpx 0 0;
		
	}
	textarea {
		margin-top: 36rpx;
	}
	checkbox-group {
		width: 312rpx;
	}
	.checkbox-text {
		font-size: 26rpx;
		color: #8A9DCA;
		
	}
	.add-amout {
		border: 1rpx solid #f9f9f9;
		width: 136rpx;
		height: 58rpx;
		color: #91A6D7;
		font-size: 24rpx;
		border-radius: 9rpx;
		margin-left: 12rpx;
		line-height: 60rpx;
		text-align: right;
		padding-right: 8rpx;
		box-shadow: 0px 0px 6rpx 0px rgba(221,228,243,0.75); 
	}
	.add-amout input {
		width: 80%;
		color: #333;
		font-size: 30rpx;
		height: 58rpx;
		line-height: 50rpx;
		min-height: 58rpx;
		padding: 0;
		padding-right: 4rpx;
		/* border: 1px solid #111; */
	}
	.img-box {
		background: #f8f9fa;
		padding: 20rpx 0 20rpx 20rpx;
		border-radius: 0 0 14rpx 14rpx;
	}
	.upload-file-container {
		display: flex;
		align-items: center;
		width: 100%;
		/* min-height: 260rpx; */
		box-sizing: border-box;
		flex-wrap: wrap;
	}
	
	.upload-file-add-container {
	    position: relative;
	    border: 1rpx solid #ccc;
	    width: 136rpx;
	    height: 137rpx;
		border-radius: 6rpx;
		margin-bottom: 16rpx;
	}
	.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-unit {
		position: relative;
		width: 137rpx;
		height: 136rpx;
		margin-right: 32rpx;
		margin-bottom: 16rpx;
		border-radius: 8rpx;
		border: 2rpx solid #ccc;
	}
	
	.upload-file-unit image {
		width: 136rpx;
		height: 136rpx;
		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;
	}
	/* end */
	.page-bottom {
		width: 750rpx;
		padding: 42rpx 0 43rpx 0;
		background: #f8f9fb;
		position: fixed;
		bottom: 0;
		left: 0;
	}
	.main-btn {
		margin: 0 auto;
		border-radius: 44rpx;
		width: 510rpx;
		height: 88rpx;
		line-height: 88rpx;
		padding: 0;
		text-align: center;
		background: linear-gradient( to right ,#8998bb 0%, #8a99bc 100%);
		color: #fff;
		font-size: 26rpx;
		
	}
	.main-btn image {
		width: 31rpx;
		height: 30rpx;
		margin-right: 16rpx;
	}
	checkbox .wx-checkbox-input {
		width: 40rpx;
		height: 40rpx;
	}
	
</style>
