<style  lang="scss" scoped>
	.receiptDetails{
		padding: 5px 20px;
		font-family: aa;
		min-height: 100vh;
		font-size: 14px;
		background: #ecdaea;
		position: relative;
		.top{
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.box{
			width: 100%;
			min-height: calc(100vh - 40px - 30px - 30px - 20px - 36px);
			border: 1px solid #111;
			padding: 10px 30px;
			margin: 10px 0;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			.box_item{
				display: flex;
				align-items: center;
				margin: 10px 0 ;
			}
			.box_item_r{
				border-bottom: 1px solid #666;
			    flex: 1;
			    margin-left: 10px;
			}	
			  
		}
		.bottom{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 10px;
		}
		.vague{
			 -webkit-filter: blur(5px);
			    -moz-filter: blur(5px);
			    -ms-filter: blur(5px);
			    filter: blur(5px);
		}
		.claimbtn{
			width: 100%;
			height: 50px;
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			left: 0;
			bottom: 30px;
			.claimbtn_box{
				width: 150px;
				height: 35px;
				border-radius: 17px;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		.popup {
			width: 100%;
			height: calc(100vh * 0.6 );
			background: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;
			border-radius: 8px;
			overflow: hidden;
			justify-content: space-between;
			.popup_t {
				width: 100%;
				height: 50px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.popup_t_btn{
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		
		.claimbtn_box2{
			width: 150px;
			height: 35px;
			border-radius: 17px;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 20px;
		}
		.color_bt{
			color: #323278;
		}
	}
</style>
<template>
	<view class="receiptDetails" >
		<template v-if="data && boxshow">
			<view style="width: 100%;display: flex;align-items: center;justify-content: center;margin: 10px 0;font-weight: bold;">
				 
				<span style="border-bottom:3px double black;cursor:pointer;letter-spacing:10px;font-size: 24px !important">收款收据</span>
				       
			</view>
			<view class="top">
				<span>开票日期：<span class='color_bt' :class="{'vague':data.State==2}">{{data.CreateTime}}</span></span>
				<span>编号： <sapn style="font-size: 20px;color: #323278;" :class="{'vague':data.State==2}">{{data.ReceiptNo}}</sapn> </span>
			</view>
			<view class="box">
				<view class="box_item">
					<view class="box_item_l">交款人</view>
					<view class="box_item_r color_bt" >{{data.Remitter}}</view>
				</view>
				<view class="box_item">
					  <div style="display: flex;align-items: center;flex:1">
						<span>人民币(大写)</span>
						<span class="box_item_r color_bt" v-if="data.Money">{{changeMoneyToChinese(data.Money)}}</span>
					</div>
					<view style="display: flex;align-items: center;margin-left: 10px;">
						<span>￥：</span>
						<span class="box_item_r color_bt" style="width: 200px" v-if="data.Money">{{addCommas(Math.round(data.Money * 100) / 100)}}</span>
					</view>
				</view>
				<view class="box_item">
					<view class="box_item_l">收款事由</view>
					<view class="box_item_r color_bt" :class="{'vague':data.State==2}">{{data.Remark}}</view>
				</view>
			</view>
			<view class="bottom">
				<view style="display: flex;align-items: center;position: relative;" v-for="(x,y) in AuditSteps" :key='y'>
					<span>{{x.Name}}：</span>
					<image v-if="x.Id==1" :src="data.SealImages"  :class="{'vague':data.State==2}" style="width: 80px;height: 80px;position: absolute;left: 60px;bottom: 0;z-index:9"></image>
					<span v-if="x.Id==4" class='color_bt'>{{data.CreateByName}}</span>
				</view>
			</view>
			<view class="claimbtn" v-if="data.State==2">
				<view class="claimbtn_box" :style="{background:mainColor}" @click="getclaimbtn">认领收据</view>
			</view>
		</template>
		<template v-if="!boxshow">
			<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;width: 100%;height: 100vh;">
				<span style='font-size: 18px;'>该收据已被他人领取您无权查看</span>
				<view class="claimbtn_box2" :style="{background:mainColor}" @click="goblack">返回</view>
				
			</view>
		</template>
		
		<u-popup v-model="show" mode="center" length="60%" :mask-close-able='false'	>
			<view class="popup">
				<view class="popup_t">
					<Text>认取码</Text>
				</view>
				<view v-if="show">
					<u-message-input mode="bottomLine" :fontSize='30' :value='messagevalue' @change="change"></u-message-input>
				</view>
				<view class="popup_t" style="border-top: 1px solid #f5f5f5;display: flex;align-items: center;" >
					<view class="popup_t_btn" @click="show=false">取消</view>
					<view style="width: 1px;height: 50px;background: #f5f5f5;"></view>
					<view class="popup_t_btn" :style="{color:mainColor}" @click="setReceipt">确定认取</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	 
	export default {
		
		data(){
			return{
				FinanceId:0,
				data:null,
				AuditSteps: [{ Id: 1, Name: '单位盖章' }, { Id: 2, Name: '出纳' }, { Id: 3, Name: '交款方式' }, { Id: 4, Name: '开票人' },],
				mainColor:'',
				show:false,
				messagevalue:'',
				boxshow:true,
				UserInfo:null
			}
		},
		
		onLoad(options) {
			uni.setNavigationBarTitle({
			  title: '收据详情',
			});
			this.mainColor = this.$uiConfig.mainColor;
			if(options && options.FinanceId){
				this.FinanceId = options.FinanceId
			}
			this.UserInfo = uni.getStorageSync("mall_UserInfo")?uni.getStorageSync("mall_UserInfo"):{};
			this.getReceiptInfo()
		},
		methods:{
			getReceiptInfo(){
				this.request2(
					{
						url: '/api/AppletEducation/GetEduReceiptInfo',
						data: {FinanceId:this.FinanceId}
					},
					res => {
						if(res.resultCode==1){
							this.data = res.data
						}
					},
					err=>{
						this.boxshow = false
					}
				);
			},
			change(e){
				this.messagevalue = e
			},
			setReceipt(){
				if(this.messagevalue.length<4){
					uni.showToast({
						title:'请输入4位数的认取码',
						icon:'none'
					})
					return
				}
				this.request2(
					{
						url: '/api/AppletEducation/SetEduReceiptClaim',
						data: {ReceiptId:this.data.Id,ClaimCode:this.messagevalue}
					},
					res => {
						if(res.resultCode==1){
							this.getReceiptInfo()
							this.show = false
						}
					}
				);
				
			},
			
			getclaimbtn(){//认领调取接口
				this.messagevalue=''
				this.$forceUpdate()
				this.show = true
			},
			goblack(){//返回
				uni.navigateBack()
			},
			changeMoneyToChinese(Num){
				if (!Num) {
				      return '零'
				    }
				    var isNegative = false; // 是否负数
				    if (Num < 0) {
				      Num = -Num;
				      isNegative = true;
				    }
				    if (typeof Num == 'number') {
				      Num = Num.toString();
				    }
				    for (var i = Num.length - 1; i >= 0; i--) {
				      Num = Num.replace(",", ""); // 替换money中的“,”
				      Num = Num.replace(" ", ""); // 替换money中的空格
				    }
				    Num = Num.replace("￥", ""); // 替换掉可能出现的￥字符
				    if (isNaN(Num)) { // 验证输入的字符是否为数字
				      return;
				    }
				    // ---字符处理完毕，开始转换，转换采用前后两部分分别转换---//
				    let part = String(Num).split(".");
				    let newchar = "";
				    // 小数点前进行转化
				    for (var i = part[0].length - 1; i >= 0; i--) {
				      if (part[0].length > 10) {
				        // alertWarning("位数过大，无法计算");
				        return "";
				      } // 若数量超过拾亿单位，提示
				      let tmpnewchar = "";
				      let perchar = part[0].charAt(i);
				      switch (perchar) {
				        case "0":
				          tmpnewchar = "零" + tmpnewchar;
				          break;
				        case "1":
				          tmpnewchar = "壹" + tmpnewchar;
				          break;
				        case "2":
				          tmpnewchar = "贰" + tmpnewchar;
				          break;
				        case "3":
				          tmpnewchar = "叁" + tmpnewchar;
				          break;
				        case "4":
				          tmpnewchar = "肆" + tmpnewchar;
				          break;
				        case "5":
				          tmpnewchar = "伍" + tmpnewchar;
				          break;
				        case "6":
				          tmpnewchar = "陆" + tmpnewchar;
				          break;
				        case "7":
				          tmpnewchar = "柒" + tmpnewchar;
				          break;
				        case "8":
				          tmpnewchar = "捌" + tmpnewchar;
				          break;
				        case "9":
				          tmpnewchar = "玖" + tmpnewchar;
				          break;
				      }
				      switch (part[0].length - i - 1) {
				        case 0:
				          tmpnewchar = tmpnewchar + "元";
				          break;
				        case 1:
				          if (perchar != 0)
				            tmpnewchar = tmpnewchar + "拾";
				          break;
				        case 2:
				          if (perchar != 0)
				            tmpnewchar = tmpnewchar + "佰";
				          break;
				        case 3:
				          if (perchar != 0)
				            tmpnewchar = tmpnewchar + "仟";
				          break;
				        case 4:
				          tmpnewchar = tmpnewchar + "万";
				          break;
				        case 5:
				          if (perchar != 0)
				            tmpnewchar = tmpnewchar + "拾";
				          break;
				        case 6:
				          if (perchar != 0)
				            tmpnewchar = tmpnewchar + "佰";
				          break;
				        case 7:
				          if (perchar != 0)
				            tmpnewchar = tmpnewchar + "仟";
				          break;
				        case 8:
				          tmpnewchar = tmpnewchar + "亿";
				          break;
				        case 9:
				          tmpnewchar = tmpnewchar + "拾";
				          break;
				      }
				      newchar = tmpnewchar + newchar;
				    }
				    // 小数点之后进行转化
				    if (Num.indexOf(".") != -1) {
				      if (part[1].length > 2) {
				        // alertWarning("小数点之后只能保留两位,系统将自动截段");
				        part[1] = part[1].substr(0, 2);
				      }
				      for (var i = 0; i < part[1].length; i++) {
				        let tmpnewchar = "";
				        let perchar = part[1].charAt(i);
				        switch (perchar) {
				          case "0":
				            tmpnewchar = "零" + tmpnewchar;
				            break;
				          case "1":
				            tmpnewchar = "壹" + tmpnewchar;
				            break;
				          case "2":
				            tmpnewchar = "贰" + tmpnewchar;
				            break;
				          case "3":
				            tmpnewchar = "叁" + tmpnewchar;
				            break;
				          case "4":
				            tmpnewchar = "肆" + tmpnewchar;
				            break;
				          case "5":
				            tmpnewchar = "伍" + tmpnewchar;
				            break;
				          case "6":
				            tmpnewchar = "陆" + tmpnewchar;
				            break;
				          case "7":
				            tmpnewchar = "柒" + tmpnewchar;
				            break;
				          case "8":
				            tmpnewchar = "捌" + tmpnewchar;
				            break;
				          case "9":
				            tmpnewchar = "玖" + tmpnewchar;
				            break;
				        }
				        if (i == 0)
				          tmpnewchar = tmpnewchar + "角";
				        if (i == 1)
				          tmpnewchar = tmpnewchar + "分";
				        newchar = newchar + tmpnewchar;
				      }
				    }
				    // 替换所有无用汉字
				    while (newchar.search("零零") != -1)
				      newchar = newchar.replace("零零", "零");
				    newchar = newchar.replace("零亿", "亿");
				    newchar = newchar.replace("亿万", "亿");
				    newchar = newchar.replace("零万", "万");
				    newchar = newchar.replace("零元", "元");
				    newchar = newchar.replace("零角", "");
				    newchar = newchar.replace("零分", "");
				
				    if (newchar.charAt(newchar.length - 1) == "元" || newchar.charAt(newchar.length - 1) == "角") {
				      newchar = newchar + "整";
				    }
				
				    if (isNegative) {
				      newchar = '负' + newchar;
				    }
				
				    return newchar;
			},
			  //实现每三位一个逗号分隔并且保留两位小数
			  addCommas: function (nStr) {
			    nStr += '';
			    let x = nStr.split('.');
			    let x1 = x[0];
			    let x2 = x.length > 1 ? '.' + x[1] : '';
			    var rgx = /(\d+)(\d{3})/;
			    while (rgx.test(x1)) {
			      x1 = x1.replace(rgx, '$1' + ',' + '$2');
			    }
			    return x1 + x2;
			  },
			
		}
	}
</script>


