<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>稽核时间：{{detailMsg.Audit_Time }}</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>稽核反馈 <div class="video-btn" @click="toVideoView" v-show="detailMsg.ShowView">回放录像 <text class="uni-icon uni-icon-arrowright"></text></div></h4>
		<template v-if="detailMsg.CheckAccount_Desc">
			<view class="main-card desc" >

				<text :class="{'ico-yd':detailMsg.Calibrator_Mark==2000}">
					{{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" :style="pageMsg.isChangeValue? 'color:#333':'color:#C5C4C4'" @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">

				<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,
					isChangeValue: false
				},
				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
				this.pageMsg.isChangeValue = true
			},
			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
						res.Result_Data.Audit_Time = res.Result_Data.Audit_Time.replace('T',' ')
						_this.getWidth(res.Result_Data)

						_this.saveMsg.addAmout = (Math.abs( res.Result_Data.Different_Price)).toFixed(2)
						_this.pageMsg.isShow = true
					}
					uni.hideLoading()
					_this.pageMsg.ispost = false
				})
			},
			// 图片预览
			showImg(index) {
				uni.previewImage( {
					urls: this.imageList,
					current: index,
					loop: true,
					indicator: 'number'
				});
			},

			changeState(e){
				if(e.detail.value.length>0){

					this.saveMsg.addAmout = (Math.abs(this.detailMsg.Different_Price)).toFixed(2)
				}else {
					this.saveMsg.addAmout = ''
				}
				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.pageMsg.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: '正在提交...',
					mask: true,
				})
				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',
							success() {
								_this.getDetail()
								_this.shouldReLoadingList(true)
							}
						})

						_this.detailMsg.CheckAccount_Desc = _this.saveMsg.auditExplain


					}
				})

			},
			toVideoView(){
				let auditT = (new Date(this.detailMsg.Audit_Time)).getTime()
				let { VideoSerno,token,ChannelID }=this.detailMsg.videoModel
				let bt = formateT(auditT-2*60*1000)
				let et = formateT(auditT+2*60*1000)

				// this.$util.toNextRoute('navigateTo', `/pages/webview/webview?name=video&sc=${VideoSerno}&&hd=${ChannelID}&bt=${bt}&et=${et}&token=${token}`)
				this.$util.toNextRoute('navigateTo', `/pages/severpartVideo/severpartVideo?sc=${VideoSerno}&&hd=${ChannelID}&bt=${bt}&et=${et}&token=${token}`)
				// `F79721547/1.rec?begin=20210603211700&end=20210603233159`
				function formateT(dd){
					dd = new Date(dd)// 获取AddDayCount天后的日期
					let type = 'YYYY-MM-DD hh:mm:ss' //
					let y = dd.getFullYear()
					let m = (dd.getMonth() + 1) < 10 ? '0' + (dd.getMonth() + 1) : (dd.getMonth() + 1) // 获取当前月份的日期，不足10补0
					let d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
					let h = dd.getHours() < 10 ? '0' + dd.getHours() : dd.getHours()
					let mi = dd.getMinutes() < 10 ? '0' + dd.getMinutes() : dd.getMinutes()
					let s = dd.getSeconds() < 10 ? '0' + dd.getSeconds() : dd.getSeconds()
					return type.replace('YYYY', y).replace('MM', m).replace('DD', d).replace('hh', h).replace('mm', mi).replace('ss', s)
				}
			}
		},
		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;
		position: relative;
		clear: all;
	}
	.video-btn {
		color: #2c3e50;
		font-size: 25rpx;
		float: right;
		margin-top: 2rpx;
	}
	.uni-icon-arrowright {
		font-size: 26rpx;
	}
	.ico-yd {
		display: flex;
		align-items: center;
	}
	.ico-yd::after {
		content: '';
		background-image: url('https://eshangtech.com/ShopICO/ahyd-BID/contract/htsp_mobile.png');
		margin-right: 0rpx;
		height: 24rpx;
		width: 36rpx;
		background-position: center right;
		display: block;
		margin-right: 6rpx;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
	}
	.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 {
		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: 232rpx;
	}
	.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>
