<template>
	<view class="details_body">
		<view class="details_body_car">
			<view class="paymentInformation">
				<view class="paymentInformation_top">
					<view class="felx jw">
						<text style="font-size: 24rpx;"
							class="paymentInformation_item_label">{{details.accountNo}}</text>
						<view
							:style="{background:typeBackground(details.auditStatus),color:typeColor(details.auditStatus)}"
							class="listCard_header_Type">
							<view :style="{background:typeColor(details.auditStatus)}" class="garden"></view>
							<text>{{details.auditStatus|typeText}}</text>
						</view>
					</view>
					<view v-if="details.auditStatus == 2" class="felx ac" style="margin-top: 10rpx;">
						<view v-if="details.status==1" class="companyTag">付款成功</view>
						<view v-if="details.status==2" style="background-color: #ff4949;" class="companyTag">付款失败</view>
					</view>
				</view>
				<view class="paymentInformation_footer felx an jw">
					<view class="oilInformation  ">
						<view class="paymentInformation_item_value">{{details.toAccountName||'--'}}</view>
						<view class="companyTag_label">{{details.toAccountNo||'--'}}</view>
					</view>
					<view class="price">{{details.amount||'---'}}</view>
				</view>
			</view>
			<view class="splitLine">
				<view style="margin-left: -20rpx;" class="splitLineyuan"></view>
				<view class="Line">
					<image src="@/static/line.png" style="width: 100%; height: 1px"></image>
				</view>
				<view style="margin-right: -20rpx;" class="splitLineyuan"></view>
			</view>
			<view class="paymentInformation">
				<view class="paymentInformation_selector felx jc">
					<view @click="selector=0" :class=" selector==0?'on_selector_item':'selector_item'">其他信息</view>
					<!-- <view @click="selector=1" :class=" selector==1?'on_selector_item':'selector_item'">收款信息</view> -->
				</view>
				<view class="paymentInformation_container">
					<view v-if="selector==0" class="paymentInformation_item">
						<view class="paymentInformation_item_value">{{details.batchId||'--'}}</view>
						<view class="paymentInformation_item_label">批次号</view>
					</view>
					<view v-if="selector==0" class="paymentInformation_item">
						<view class="paymentInformation_item_value">{{details.clientPatchId||'--'}}</view>
						<view class="paymentInformation_item_label">客户交易号</view>
					</view>
					<view v-if="selector==0" class="paymentInformation_item">
						<view class="paymentInformation_item_value">{{details.toBank||'--'}}</view>
						<view class="paymentInformation_item_label">汇入银行名称</view>
					</view>
					<view v-if="selector==0" class="paymentInformation_item">
						<view class="paymentInformation_item_value">{{details.note||'--'}}</view>
						<view class="paymentInformation_item_label">转账用途</view>
					</view>
					<view v-if="selector==0" class="paymentInformation_item">
						<view class="paymentInformation_item_value">{{details.msg||'--'}}</view>
						<view class="paymentInformation_item_label">失败原因</view>
					</view>

				</view>
			</view>
			`
		</view>
		<view class="footerButten felx">
			<view @click="goBack" class="backButten felx  justifyContent alignItems">返回</view>
			<!-- <button v-if="details.auditStatus==1" @click="iShow.examine = true"
				class="forwardButten felx justifyContent alignItems">审核</button> -->
		</view>
		<popup :butten='butten' @confirmFn='confirmFn' @closeFn='closeFn' :show="show" v-model="iShow.examine">
			<view slot="coment">
				<view class="popup_coment">
					立即进行审核
					<uni-easyinput style="margin-top: 30rpx;" type="password" v-model="password" placeholder="请输入二次确认密码"></uni-easyinput>
				</view>
			</view>
		</popup>
		<!-- <uni-popup ref="popup" type="center">
			<view style=" padding: 0 20rpx;display: flex;justify-content: center;">
				<image style="height: 70vh;" :src="details.transactionProof" mode="heightFix"></image>
			</view>
		</uni-popup> -->
	</view>
</template>

<script>
	import oilAccount from '@/api/oilAccount'
	import tool from '@/utils/tool.js'
	export default {

		data() {
			return {
				// user.authList.includes('sys:company:rechargeAudit')
				user: uni.getStorageSync('user'),
				selector: 0,
				details: {},
				show: {
					img: false,
					footer: true
				},
				iShow: {
					examine: false,
					seting: false
				},
				moreOpen: false,
				val: '898989898',
				modifyShow: {

				},
				butten: {
					colse: '关闭',
					confirm: '审核成功',
					coloseBg: '#fff',
					coloseColor: '#333',
					confirmBg: '#17A00E90',
					confirmColor: '#FFFFFF',
					borderRadius: '10rpx'
				},
			}
		},
		onLoad(e) {
			if (e.data) {


				this.details = JSON.parse(decodeURIComponent(e.data));
				tool.numberSetting(this.details, ['amount'], 2)
			}
		},
		filters: {
			typeText: function(e) {
				switch (Number(e)) {
					case 1:
						return '待审核'
					case 2:
						return '审核通过'
					default:
						return '---'
				}
			},

		},
		methods: {
			showImg(e) {
				if (e) {
					this.$refs.popup.open('center')
				}
			},
			goBack() {
				uni.navigateBack()
			},
			examine(auditMark, auditRemark = '') {
				let data = {
					auditMark: auditMark,
					auditRemark: auditRemark,
					id: this.details.id,
					updateSource: "OMS-MINIAPP"
				}
				oilAccount.auditRechargeRecords(data).then(res => {
					if (res.code == 20000) {
						uni.showToast({
							title: '操作成功',
							icon: 'success'
						});
						this.iShow.examine = false;
						this.getDetails()
					}
				})
			},

			typeBackground: function(e) {
				switch (Number(e)) {

					case 1:
						return '#ffba0026'
					case 2:
						return '#17A00E26'
					default:
						return ''
				}
			},
			typeColor: function(e) {

				switch (Number(e)) {

					case 1:
						return '#ffba00'

					case 2:
						return '#17A00E'

					default:
						return ''
				}
			},
			codeFn() {
				if (this.details.orderWfStatus == 0) {
					orderList.getOrderQrCodeOms(this.details.orderSerialNumber).then(res => {
						if (res.code == 20000) {
							console.log(res)
							this.val = res.data.codeStr
							this.iShow.seting = true
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})

				} else {
					this.iShow.seting = false
				}
			},


			getDetails(e) {
				oilAccount.getCompanyDetails(this.details.id).then(res => {
					if (res.code !== 20000) return
					this.details = res.data
					tool.numberSetting(this.details, ['transactionAmount'], 2)
				})
			},

			closeFn() {
				this.examine(-1)
				console.log('点击取消')
			},
			confirmFn() {
				this.examine(1)
				console.log('点击确定')
			},
			share() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneTimeline",
					type: 1,
					summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			copy(text) {
				uni.setClipboardData({
					data: `${text}`,
					// data: `订单ID:${this.details.id}\n订单流水号:${this.details.orderSerialNumber}\n订单金额:${this.details.realAmount}元\n订单升数:${this.details.volume}升\n订单类型:${this.details.payAccountType==0?'个人':'企业'}\n司机姓名:${this.details.customerName}\n司机id:${this.details.customerId} ${this.details.companyName?'\n订单所属公司:' + this.details.companyName :''}\n手机号码:${this.details.customerPhone}`, //要被复制的内容
					// ${(this.details.payAccountType==0?'司机姓名':'订单所属公司') + ':' + (this.details.payAccountType==0? this.details.customerName:this.details.companyName)}
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '复制成功'
						})
					}
				});
			},
		}
	}
</script>

<style>
	.showProof {
		margin-top: 20rpx;
		color: #2866FF;
		font-size: 28rpx;
	}

	.garden {
		background-color: #E8CD30;
		border-radius: 50%;
		width: 20rpx;
		height: 20rpx;
		margin-right: 16rpx;
	}

	.listCard_header_Type {
		background: rgba(232, 205, 48, 0.15);
		border-radius: 40rpx;
		color: #E8CD30;
		/* padding: 10rpx 20rpx; */
		font-size: 24rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		Width:
			180rpx;
		Height:
			54rpx;
	}

	.paymentInformation_item_value {
		color: #666666;
		font-size: 28rpx;
	}

	.companyTag_label {
		color: #BBBBBB;
		font-size: 28rpx;
	}

	.companyTag {
		font-size: 20rpx;
		padding: 5rpx 20rpx;
		background-color: #18BC37;
		color: #FFFFFF;
		border-radius: 20rpx;
		margin-left: 15rpx;
	}

	.ac {
		align-items: center;
	}

	.paymentInformation_item_label {
		color: #BBBBBB;
		font-size: 20rpx;
	}

	.popup_coment {
		padding: 80rpx;
		text-align: center;
		font-size: 35rpx;
		color: #666666;
	}

	.backButten {
		background: #ADCEFF;
		border-radius: 22rpx;
		width: 364rpx;
		color: #FFFFFF;
		font-size: 30rpx;
	}

	.paymentInformation_item:last-child {
		margin-bottom: 0;
	}

	.paymentInformation_item {
		margin-bottom: 20rpx;
	}

	.paymentInformation_container {
		padding-top: 40rpx;
	}

	.on_selector_item {
		font-size: 28rpx;
		color: #fFFFFF;
		width: 180rpx;
		height: 60rpx;
		background: #ADCEFF;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 20rpx;
	}

	.selector_item {
		font-size: 28rpx;
		color: #BBBBBB;
		width: 180rpx;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 20rpx;
	}

	.paymentInformation_footer {
		margin-top: 30rpx;
	}

	.an {
		align-items: flex-end;
	}

	.jw {
		justify-content: space-between;
	}

	.jc {
		justify-content: center;
	}

	.copyButten {
		flex: 1;
		height: 76rpx;
		background: #2866FF;
		border-radius: 10rpx;
		margin-right: 19rpx;
	}

	.forwardButten {
		width: 260rpx;
		height: 80rpx;
		background: #FF4A4A;
		border-radius: 22rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		margin: 0;
	}

	.footerButten {
		/* padding: 0 43rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		margin: 43rpx 0; */
		width: 100vw;
		position: fixed;
		height: 80rpx;
		left: 0;
		bottom: env(safe-area-inset-bottom);
		justify-content: space-around;
	}

	.dxx {
		transition: all 1s;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.refund {
		height: 76rpx;
		width: 308rpx;
		background: #EC4645;
		border-radius: 10rpx;
		color: #FFFFFF;
		font-size: 32rpx;
		margin: 0 auto;
	}

	.more {
		padding: 0 43rpx;
	}

	.moreButten {
		height: 67rpx;
		background: #F0F0F0;
		margin: 0 43rpx;
		border-radius: 10rpx;
		margin-top: 40rpx;
	}

	.writeOff {
		height: 92rpx;
		background: #2866FF;
		border-radius: 10rpx;
		font-size: 32rpx;
		margin: 37rpx 43rpx;
		color: #FFFFFF;
		font-weight: 500;
	}

	.bgtext {
		font-size: 38rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #EC4645;
	}

	.actualUnitPrice {
		width: 160rpx;
		height: 108rpx;
		background: #F4F4F4;
		margin-left: 19rpx;
		text-align: center;
	}

	.olitype {
		width: 67rpx;
		height: 108rpx;
		background: #F4F4F4;
	}

	.price {
		/* padding-left: 80rpx; */
		font-size: 48rpx;
		font-weight: 600;
		color: #666666;
	}

	.Line {
		position: relative;
		width: calc(100% - 100rpx);
		height: 100%;
		display: flex;
		align-items: center;
	}

	.splitLineyuan {
		width: 45rpx;
		height: 45rpx;
		border-radius: 50%;
		background-color: #2866FF;
	}

	.splitLine {
		height: 45rpx;
		display: flex;
		justify-content: space-between;
		position: relative;
		margin: 20rpx 0;
	}

	.Text {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.smallText {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #BBBBBB;
	}

	.paymentInformation {
		padding: 0 35rpx;
	}

	.details_body_car_lable .payment {
		width: 160rpx;
		height: 48rpx;
		background: #D1FFDA;
		color: #17A00E;
		font-size: 30rpx;
		position: absolute;
		right: 46rpx;
	}

	.justifyContent {
		justify-content: center;
	}

	.alignItems {
		align-items: center;
	}

	.felx {
		display: flex;
	}

	.details_body_car_lable .payLi {
		width: 100rpx;
		height: 44rpx;
		background: #2866FF;
		border-radius: 0px 0px 12rpx 12rpx;
		color: #FFFFFF;
		margin-left: 51rpx;

	}

	.details_body_car_lable .sign {
		width: 140rpx;
		height: 140rpx;
		background: #FFFFFF;
		box-shadow: 0px 5px 5px 0px rgba(88, 88, 88, 0.18);
		border-radius: 50%;
		top: -50rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.details_body_car_lable {
		width: 100%;
		position: absolute;
		top: 0;
		display: flex;
		padding: 0 46rpx;
	}

	.details_body_car {
		width: 100%;
		/* height: 1003rpx; */
		background-color: #FFFFFF;
		border-radius: 20rpx;
		position: relative;
		/* box-shadow: 0px 5px 5px 0px rgba(88, 88, 88, 0.18); */
		/* padding-bottom: 63rpx; */
		padding: 35rpx 0;
		margin-bottom: calc(env(safe-area-inset-bottom) + 90rpx);

	}

	.details_body {
		padding: 0 31rpx;
		/* padding-bottom: 90rpx; */
		width: 100vw;
		height: 100vh;
		overflow: auto;
		background-color: #2866FF;
	}
</style>