<template>
	<view>
		<topBar height="431rpx" title="账户明细">
			<view slot="coment">
				<view class="acc_title">
					<view style="display: flex; align-items: flex-end;">
						<image style="height: 40rpx; width: 37rpx; margin-right: 5rpx;" src="../../static/gs.png">
						</image>
						<text style="margin-right: 21rpx;">{{jsData.companyName||gr.userName}}</text>
						<u-switch v-if="jsData.companyNature == 0" :openText='openText' asyncChange
							activeColor='#17A00E' inactive-color="#BBBBBB" size='35' v-model="wqswitchOpen"
							@change="wqchange"></u-switch>
					</view>
					<view v-if="jsData"  style="display: flex;gap: 32rpx;">
						<view v-if="jsData.companyNature == 1" style="display: flex;align-items: center;" @click="openPopup">
							<image class="icontop" src="../../static/jb.png"></image>
							解绑
						</view>
						<view @tap="setUpFn" style="display: flex;align-items: center;">
							<image class="icontop" src="../../static/sz.png"></image>
							设置
						</view>
					</view>
				</view>
				<view class="balance">
					<view style="font-size: 32rpx;">{{jsData.balance || gr.balance}}</view>
					<view style="position: relative;display: flex;justify-content: center;">
						<view>总余额</view>
						<view v-if="jsData.companyNature==1" style="position: absolute; right: 0;">
							<text style="margin-right: 9rpx;">共享额度</text>
							<u-switch :openText='openText' asyncChange activeColor='#17A00E' inactive-color="#BBBBBB"
								size='35' v-model="switchOpen" @change="change"></u-switch>
						</view>
					</view>
				</view>
				<view style="padding: 0 40rpx;">
					<view class="balanceDetails">
						<view class="balanceDetails_row">
							<view class="balanceDetails_row_flex border">
								<view style="text-align: center;">
									<text class="balanceDetails_row_flex_title"> 充值余额 </text> <br />
									<text class="balanceDetails_row_flex_text">{{jsData.rechargeBalance || gr.rechargeBalance}}</text>
								</view>
							</view>
						
							<view class="balanceDetails_row_flex">
								<view style="text-align: center;">
									<text class="balanceDetails_row_flex_title">赊销余额</text> <br />
									<text class="balanceDetails_row_flex_text">{{jsData.chargeRechargeBalance||'--'}}</text>
								</view>
							</view>
						</view>
						<view class="balanceDetails_row">
							<view class="balanceDetails_row_flex border">
								<view style="text-align: center;">
									<text class="balanceDetails_row_flex_title">充返余额</text> <br />
									<text class="balanceDetails_row_flex_text">{{jsData.rebateBalance || gr.rechargeRebateBalance}}</text>
								</view>
							</view>
							<view class="balanceDetails_row_flex">
								<view style="text-align: center;">
									<text class="balanceDetails_row_flex_title">消返余额</text> <br />
									<text class="balanceDetails_row_flex_text">{{jsData.consumeRebateBalance||'--'}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</topBar>
		<view class="list_body">

			<view class="list_body_bg">
				<u-collapse accordion>
					<u-collapse-item v-for=" (item,index) in listData " :key="index">
						<view class="collapse_header" slot="title">
							<view style="display: flex;align-items: center;">
								<image class="collapse_img"
									:src=" item.occurAmount < 0? '../../static/olitype.png': '../../static/olitypef.png' ">
								</image>
								<view>
									<text class="collapse_title">{{classification(item.billType)}}</text><br />
									<text class="collapse_text">{{item.businessOrderId}}</text><br />
									<text class="collapse_text">{{item.createTime}}</text>
								</view>
							</view>
							<view class="collapse_price">{{item.occurAmount}}</view>
						</view>
						<view class="collapse_yc">
							<view style="display: flex;gap:56rpx">
								<view class="collapse_yc_row">
									<view>账户余额</view>
									<view class="small_text_color">{{item.currentBalance}}</view>
								</view>
								<view class="collapse_yc_row">
									<view>充值余额</view>
									<view>{{item.currentRechargeBalance}}</view>
								</view>
								<view class="collapse_yc_row">
									<view>赊销余额 </view>
									<view class="small_text_color">{{item.currentChargeRechargeBalance}}</view>
								</view>
							</view>
							<view style="display: flex;gap:56rpx">
								<view class="collapse_yc_row">
									<view>消费返利 </view>
									<view class="small_text_color">{{item.currentConsumeRebateAmount}}</view>
								</view>
								<view class="collapse_yc_row">
									<view>充值返利</view>
									<view class="small_text_color">{{item.currentTotalRebateBalance}}</view>
								</view>
								<view class="collapse_yc_row">
									<view>冻结余额</view>
									<view class="small_text_color">{{item.currentFrozenBalance}}</view>
								</view>
							</view>
						</view>
					</u-collapse-item>
				</u-collapse>
			</view>
			<uni-popup ref="popup" type="center">
				<view class="popup_jb">
					<image class="popup_jb_headerImg" :src="baseUrl+'popu.png'"></image>
					<view>
						<view class="popup_jb_title">是否解绑该企业油卡</view>
						<view class="popup_jb_text">解绑后自营企业油卡账户将变成外请油卡账户</view>
					</view>
					<view class="popup_jb_footer">
						<view @click="closesFn" class="popup_jb_close">取消</view>
						<view @tap="jbFn" class="popup_jb_ok">确定</view>
					</view>
				</view>
			</uni-popup>
			<popup @confirmFn='confirmFn' @closeFn='closeFn' :butten='butten' :styles="{height:'733rpx'}" v-model="iShow.seting">
				<view slot="coment">
					<view class="from_body">
						<view class="from_header">按金额</view>
						<view class="from_row">
							<view class="from_row_name">单次金额上限</view>
							<view class="from_row_value">
								<input @input="inputChange" v-model="oliCarSeting.orderAmountToplimit" style="font-size: 28rpx !important; text-align: center;" />
								元
							</view>
						</view>
						<view class="from_row">
							<view class="from_row_name">单日金额上限</view>
							<view class="from_row_value">
								<input @input="inputChange" v-model="oliCarSeting.dayAmountToplimit" style="font-size: 28rpx !important; text-align: center;" />
								元
							</view>
						</view>
						<view class="from_header">按升数</view>
						<view class="from_row">
							<view class="from_row_name">单日加油升数上限</view>
							<view class="from_row_value">
								<input @input="inputChange" v-model="oliCarSeting.dayVolumeToplimit" style="font-size: 28rpx !important; text-align: center;" />
								升
							</view>
						</view>
						<view class="from_row">
							<view class="from_row_name">单笔加油升数上限</view>
							<view class="from_row_value">
								<input @input="inputChange" v-model="oliCarSeting.orderVolumeToplimit" style="font-size: 28rpx !important; text-align: center;" />
								升
							</view>
						</view>
					</view>
				</view>
			</popup>
		</view>
	</view>
</template>

<script>
	import topBar from '@/components/topbar'
	import accountDetails from '@/api/accountDetails'
	import popup from '@/components/customPopup'
	import tool from '@/utils/tool.js'
	export default {
		components: {
			topBar,
			popup
		},
		data() {
			return {
				butten:{
					colse:'取消',
					confirm:'确定',
					coloseBg:'',
					coloseColor:'',
					confirmBg:'',
					confirmColor:''
				},
				oliCarSeting:{
					orderAmountToplimit:'',
					dayAmountToplimit:'',
					dayVolumeToplimit:'',
					orderVolumeToplimit:'',
					id:''
				},
				baseUrl: this.networkResource.baseUrl,
				iShow: {
					seting: false
				},
				openText: {
					one: '启用',
					off: '禁用'
				},
				switchOpen: "",
				wqswitchOpen:'',
				styles: {},
				jsData: null,
				listData: [],
				gr:null,
				getData: {
					pageSize: 10,
					currentPage: 1,
					params: {
						// companyId: "",
						// customerId: "",
						accountId:''
					},
					sorted: {}
				}
			}
		},
		onReachBottom() {
			this.getData.currentPage += 1
			this.jsData?this.getList():this.grlist()
			console.log('触底了')
		},
		onShow() {
			console.log(accountDetails, this.networkResource.baseUrl)
			if(this.jsData!==null){
				this.getList()
			}
			if(this.gr!==null){
				this.grlist()
			}
		},
		onLoad(e) {
			let that = this
			if (e.jsData) {
				this.jsData = JSON.parse(e.jsData);
				({
					// companyId: that.getData.params.companyId,
					// customerId: that.getData.params.customerId,
					id:that.getData.params.accountId 
				} = that.jsData)
				this.switchOpen = this.jsData.shareCompanyQuota == 0 ? false : true;
				this.wqswitchOpen = this.jsData.accountState == 0 ? false : true;
				({
					orderAmountToplimit:that.oliCarSeting.orderAmountToplimit,
					dayAmountToplimit:that.oliCarSeting.dayAmountToplimit,
					dayVolumeToplimit:that.oliCarSeting.dayVolumeToplimit,
					orderVolumeToplimit:that.oliCarSeting.orderVolumeToplimit,
					id:that.oliCarSeting.id,
					} = this.jsData)
				console.log(this.jsData, this.switchOpen, JSON.parse(e.jsData), '*-*-')
			}else if(e.gr){
				this.gr = JSON.parse(e.gr)
			}
		},
		methods: {
			grlist(){
				let data = {
					pageSize: this.getData.pageSize,
					currentPage: this.getData.currentPage,
					params: {
						customerId: this.gr.customerId,
						receiptResult: "1"
					}
				}
				accountDetails.oilCustomerAccountRecord(data).then(res=>{
					res.data.list.forEach(item=>{
						tool.numberSetting(item,[ 'currentRechargeBalance', 'currentBalance','currentChargeRechargeBalance','currentConsumeRebateAmount','currentTotalRebateBalance','currentFrozenBalance'],2)
					})
					if (this.getData.currentPage !== 1) {
						this.listData = this.listData.concat(res.data.list);
						return
					}
					this.listData = res.data.list
					console.log(this.listData)
				})
			},
			wqchange(e){
				let that = this
				uni.showModal({
				    title: '提示',
				    content: e ? '确定要启用吗' : '确定要禁用吗',
				    success: function (res) {
				        if (res.confirm) {
							accountDetails.disableEnable({id:that.jsData.id}).then(res=>{
								console.log(res)
								if(res.code!=20000){
									that.wqswitchOpen = that.jsData.accountState == 0 ? false : true
									return
								} 
								uni.showToast({
									title:'修改成功',
									icon:'none'
								})
								setTimeout(()=>{
									uni.$emit('updateDriver')
								},500)
							})
				            console.log('用户点击确定');
				        } else if (res.cancel) {
							that.wqswitchOpen = !e
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			recoveryFn(){
				let that = this;
				({
					orderAmountToplimit:that.oliCarSeting.orderAmountToplimit,
					dayAmountToplimit:that.oliCarSeting.dayAmountToplimit,
					dayVolumeToplimit:that.oliCarSeting.dayVolumeToplimit,
					orderVolumeToplimit:that.oliCarSeting.orderVolumeToplimit,
					id:that.oliCarSeting.id,
					} = this.jsData)
			},
			inputChange(){
				this.butten.colse = '恢复'
				this.butten.coloseBg = '#78797F',
				this.butten.coloseColor = '#FFFFFF'
			},
			setUpFn() {
				this.iShow.seting = true
			},
			confirmFn() {
				accountDetails.upOilCard(this.oliCarSeting).then(res=>{
					if(res.code!==20000){
						this.recoveryFn()
					}else{
						uni.showToast({
							title:'修改成功',
							icon:'none'
						})
						this.butten.colse ='取消'
						this.butten.coloseBg = '',
						this.butten.coloseColor = ''
						this.iShow.seting = false
					}
				})
				console.log('确定回调',this.jsData,this.oliCarSeting)
			},
			closesFn() {
				this.$refs.popup.close()
			},
			closeFn() {
				if(this.butten.colse!='恢复'){
					this.iShow.seting = false
				}else{
					this.recoveryFn()
					this.butten.colse ='取消'
					this.butten.coloseBg = '',
					this.butten.coloseColor = ''
				}
			},
			jbFn() {
				let data = {
					// companyId: this.getData.params.companyId,
					// customerId: this.getData.params.customerId,
					accountId:this.getData.params.accountId
				}
				accountDetails.unbindOilCard(data).then(res => {
					if (res.code !== 20000) return
					this.$refs.popup.close()
					// uni.$emit('updateDriver', this.getData.params.customerId)
					setTimeout(()=>{
						uni.showToast({
							title:'操作成功',
							icon:'none'
						})
					},500)
					setTimeout(()=>{
						uni.navigateBack()
					},1000)
				})
			},
			lower() {
				console.log('lower')
			},
			change(e) {
				let that = this
				uni.showModal({
				    title: '提示',
				    content: e ? '确定要启用吗' : '确定要禁用吗',
				    success: function (res) {
				        if (res.confirm) {
				            console.log('用户点击确定');
							let data = {
								// customerId: that.getData.params.customerId,
								// companyId: that.getData.params.companyId,
								accountId:that.getData.params.accountId,
								shareCompanyQuota: '',
								updateSource: 'OMS-MINIAPP'
							}
							data.shareCompanyQuota = that.switchOpen ? 1 : 0
							accountDetails.updateCompanyQuota(data).then(res => {
								if (res.code !== 20000) {
									that.switchOpen = !e 
									return
								}
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
								setTimeout(()=>{
									that.getList()
								},500)
									
									// uni.$emit('updateDriver', that.getData.params.customerId)
								
							})
				        } else if (res.cancel) {
							that.switchOpen = !e
				            console.log('用户点击取消');
				        }
				    }
				});
				
				console.log(this.switchOpen, '--')
			},
			classification(e) {
				switch (e) {
					case 'SEPARATION_OIL':
						return '分油'
						break;
					case 'TURN':
						return '圈回'
						break;
					case 'REFUELLING':
						return '加油'
						break;
					case 'REFUND':
						return '退款'
						break;
					case 'RECHARGE':
						return '充值'
						break;
					case 'RECHARGE_REFUND':
						return '充值退款'
						break;
					case 'REFUELLING_REFUND':
						return '加油退款'
						break;
					case 'RECHARGE_REBETE':
						return '充值返利'
						break;
					case 'RECHARGE_REBETE__REFUND':
						return '充值返利退款'
						break;
				}
			},
			openPopup() {
				this.$refs.popup.open('center')
			},
			open() {},
			close() {
				this.iShow = false
			},
			getList() {
				accountDetails.getByPage(this.getData).then(res => {
					res.data.list.forEach(item=>{
						tool.numberSetting(item,[ 'currentRechargeBalance', 'currentBalance','currentChargeRechargeBalance','currentConsumeRebateAmount','currentTotalRebateBalance','currentFrozenBalance'],2)
					})
					if (this.getData.currentPage !== 1) {
						this.listData = this.listData.concat(res.data.list);
						return
					}
					this.listData = res.data.list
					console.log(this.listData)
				})
			}
		}
	}
</script>

<style>
	.uni-input-input {
		font-size: 28rpx !important;
	}

	.from_row_name {
		min-width: 230rpx;
	}

	.from_row_value {
		margin-left: 20rpx;
		height: 64rpx;
		background-color: #F1F1F1;
		width: 224rpx;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		/* box-sizing: border-box; */

	}

	.from_row:nth-child(3) {
		/* background-color: #007AFF; */
		margin-bottom: 40rpx;
	}

	.from_row:last-child {
		/* background-color: #007AFF; */
	}

	.from_header {
		color: #999999;
		margin-bottom: 14rpx;
		/* text-align: left; */
	}

	.from_body {
		font-size: 28rpx;
		color: #333333;
		padding: 35rpx;
		padding-bottom: 0;
	}

	.from_row {
		display: flex;
		padding-left: 33rpx;
		align-items: center;
		margin-bottom: 16rpx;

	}

	.icontop {
		width: 29rpx;
		height: 29rpx;
		margin-right: 5rpx;
	}

	.popup_jb_ok {
		background: #2866FF;
		border-radius: 10rpx;
		color: #FFFFFF;
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.popup_jb_close {
		border: 1rpx solid #BBBBBB;
		border-radius: 10rpx;
		color: #333333;
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 29rpx;
	}

	.popup_jb_footer {
		display: flex;
		font-size: 32rpx !important;
		height: 74rpx;
		padding: 29rpx 70rpx 0 70rpx;
		box-sizing: content-box;
		/* gap:29rpx; */
		/* -webkit-gap:29rpx; */

	}

	.popup_jb_title {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #1583FF;
		margin-top: 47rpx;
	}

	.popup_jb_text {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		margin-top: 17rpx;
	}

	.popup_jb_headerImg {
		width: 100%;
		height: 134rpx;
	}

/* 	.setUpPopup_jb {
		width: 610rpx;
		height: 733rpx;
		background: #FFFFFF;
		border-radius: 25rpx;
		overflow: hidden;
	} */

	.popup_jb {
		width: 610rpx;
		height: 400rpx;
		background: #FFFFFF;
		border-radius: 25rpx;
		overflow: hidden;
		text-align: center;
	}

	.u-arrow-down-icon {
		margin-right: 0px !important;
	}

	.u-collapse-item {
		border-bottom: solid 1px #F1F1F1;
	}

	.collapse_price {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.collapse_yc_row {
		flex: 1;
		display: flex;
		gap: 10rpx
	}

	.collapse_yc {
		font-size: 20rpx;
		/* padding-right: 20rpx; */
		padding-bottom: 24rpx;
	}

	.collapse_img {
		width: 60rpx;
		height: 60rpx;
		margin-right: 15rpx;
	}

	.collapse_header {
		flex: 1;
		display: flex;
		justify-content: space-between;
	}

	.list_body_bg {
		background-color: #FFFFFF;
		border-radius: 14rpx;
		padding: 0 40rpx;
	}

	.small_text_color {
		color: #000000;
	}

	.collapse_text {
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}

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

	.list_body {
		/* padding: 0 40rpx; */
		margin-top: 20rpx;
		margin-bottom: 60rpx;
	}

	.balanceDetails_row_flex_text {
		font-size: 28rpx;
		font-weight: 500;
		color: #000000;
	}

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

	.border {
		border-right: 1px solid #F1F1F1;
	}

	.balanceDetails_row_flex {
		display: flex;
		justify-content: center;
		align-items: center;
		flex: 1;
	}

	.balanceDetails :last-child {
		border-bottom: 0px;
	}

	.balanceDetails_row {
		display: flex;
		width: 100%;
		flex: 1;
		padding: 10rpx 0;
		border-bottom: 1px solid #F1F1F1;
		box-sizing: border-box;
		color: #000000;
	}

	.balanceDetails {
		/* width: 670rpx; */
		height: 200rpx;
		background: #FFFFFF;
		border-radius: 14rpx;
		margin: 0 auto;
		margin-top: 29rpx;
		display: flex;
		flex-direction: column;
	}

	.balance {
		text-align: center;
		margin-top: 38rpx;
		padding: 0 40rpx;
	}

	.acc_title {
		display: flex;
		margin-top: 25rpx;
		padding: 0 40rpx;
		justify-content: space-between;
		color: #FFFFFF;
		font-size: 24rpx;

	}
</style>
