<template>
	<view class="enterpriseRecharge_body">
		<topBar height="143rpx" title="企业充值预处理">
		</topBar>
		<view class="listContainer" style='flex: 1;overflow: hidden;'>
			<scroll-view style="height: 100%;" scroll-y="true">
				<view class="list_item_car">
					<view style="">
						<view class=" list_item_car_title flex jb">
							<view class="flex">
								<view class="flex jcenter acenter" style="min-width: 93rpx;">
									<view>浪潮：{{detailData.lcCollectId}}</view>
								</view>
							</view>
						</view>
						<view class=" list_item_car_title flex ">
							<view class="flex">
								<view class="pricr_text">
									<view class="flex" style="padding: 15rpx 0;">
										企业名称
										<view style="margin: 0 10rpx; min-width: 150rpx;" class="blackcolor">
											{{detailData.companyName}}
										</view>
									</view>
									<view class="flex" style="padding: 15rpx 0;">
										交易金额
										<view style="margin: 0 10rpx;min-width: 150rpx;" class="blackcolor">
											{{ Number(detailData.collectionAmount).toFixed(2) }}
										</view>
									</view>
									<view class="flex" style="padding: 15rpx 0;">
										创建时间
										<view style="margin: 0 10rpx;min-width: 150rpx;" class="blackcolor">
											{{ detailData.createTime }}
										</view>
									</view>
								</view>
							</view>
							<view class="preTreatmentSignFlex">
								<view v-if="detailData.preTreatmentSign ==0" class="preTreatmentSign colorFFBA00">
									未处理
								</view>
								<view v-if="detailData.preTreatmentSign ==1" class="preTreatmentSign color13D6C4">
									已处理
								</view>
								<view v-if="detailData.preTreatmentSign ==-1" class="preTreatmentSign colorFF4949">
									已驳回
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="list_item_car">
					<view style="">
						<view class=" list_item_car_title flex jb">
							<view class="flex">
								<view class="flex jcenter acenter" style="min-width: 93rpx;">
									<view>汇款公司账户</view>
								</view>
							</view>
						</view>
						<view class=" list_item_car_title flex ">
							<view class="flex">
								<view class="pricr_text">
									<view class="flex" style="padding: 15rpx 0;">
										账户名称
										<view style="margin: 0 10rpx; min-width: 150rpx;" class="blackcolor">
											{{detailData.offlinePaymentCompany?detailData.offlinePaymentCompany:'暂无'}}
										</view>
									</view>
									<view class="flex" style="padding: 15rpx 0;">
										银行账号
										<view style="margin: 0 10rpx;min-width: 150rpx;" class="blackcolor">
											{{ detailData.payBankAccount }}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="list_item_car">
					<view style="">
						<view class=" list_item_car_title flex jb">
							<view class="flex">
								<view class="flex jcenter acenter" style="min-width: 93rpx;">
									<view>收款公司账户</view>
								</view>
							</view>
						</view>
						<view class=" list_item_car_title flex ">
							<view class="flex">
								<view class="pricr_text">
									<view class="flex" style="padding: 15rpx 0;">
										账户名称
										<view style="margin: 0 10rpx; min-width: 150rpx;" class="blackcolor">
											{{detailData.collectionAccountName}}
										</view>
									</view>
									<view class="flex" style="padding: 15rpx 0;">
										开户行
										<view style="margin: 0 10rpx;min-width: 150rpx;" class="blackcolor">
											{{detailData.collectionBankName }}
										</view>
									</view>
									<view class="flex" style="padding: 15rpx 0;">
										银行账号
										<view style="margin: 0 10rpx;min-width: 150rpx;" class="blackcolor">
											{{ detailData.collectionBankAccount }}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="list_item_car">
					<view style="">
						<view class=" list_item_car_title flex jb">
							<view class="flex">
								<view class="flex jcenter acenter" style="min-width: 93rpx;">
									<view>赊销待还金额</view>
								</view>
							</view>
						</view>
						<view class=" list_item_car_title flex ">
							<view class="uni-container" style="height: 300rpx;overflow: auto;">
								<uni-table ref="table" border stripe type="selection" emptyText="暂无更多数据"
									@selection-change="handleSelectionChange">
									<uni-tr>
										<uni-th align="center">赊销金额</uni-th>
										<uni-th align="center">创建时间</uni-th>
									</uni-tr>
									<uni-tr v-for="(item, index) in tableData" :key="index" :disabled="item.disabled">
										<uni-td>{{ item.transactionAmount?item.transactionAmount.toFixed(2):'暂无数据' }}</uni-td>
										<uni-td>
											<view class="name">{{ item.createTime }}</view>
										</uni-td>
									</uni-tr>
								</uni-table>
							</view>
						</view>
						<view style="padding: 30rpx 0;">
							合计赊销待还款金额：{{Number(cumulative).toFixed(2)}}
						</view>
					</view>
				</view>

				<view class="list_item_car">
					<view style="display: flex;margin-bottom: 100rpx;">
						<view style="width: 200rpx;font-size: 32rpx;font-weight: bold;line-height: 80rpx;">充值金额：</view>
						<view style="width: 400rpx;">
							<uni-easyinput disabled v-model="input">
							</uni-easyinput>
						</view>

					</view>
				</view>
				<view style="display: flex;padding: 30rpx 20rpx 50rpx;" v-if="detailData.preTreatmentSign ==0">
					<view class="preTreatmentSign" style="background-color: #fff;border: #555;" @tap="back">
						返回
					</view>
					<view class="preTreatmentSign" style="background-color: #ff4949;color: #fff;" @tap="bohuiDialog">
						驳回
					</view>
					<view class="preTreatmentSign" style="background-color: #1890ff;color: #fff;" @tap="handleClick">
						确认提交
					</view>
				</view>

			</scroll-view>
		</view>
		<popup :butten='butten' @confirmFn='confirmFn' @closeFn='closeFn' :show="show" v-model="iShow.seting">
			<view slot="coment">
				<view class="popup_coment">
					<uni-section subTitle="是否确认驳回？" type="line" padding>
						<uni-easyinput type="textarea" v-model="rejectRemark" placeholder="请输入驳回原因"></uni-easyinput>
					</uni-section>
				</view>
			</view>
		</popup>
	</view>
</template>

<script>
	import scroll from '@/components/scroll'
	import enterpriseRecharge from '@/api/enterpriseRecharge'
	export default {
		components: {
			scroll
		},
		data() {
			return {
				datas: {
					"pretreatmentId": "", //企业充值预处理id (row.id)
					"auditMark": 1, // 审核标识
					"companyBankCardId": "", // 公司银行卡
					"companyId": "", // 公司id
					"createSource": "XOIL_OMS_WEB", // 创建来源
					"offlineCompleteTime": "", // 线下汇款完成时间
					"offlinePaymentCompany": "", // 线下汇款公司
					"offlineStartTime": "", // 线下汇款开始时间
					"reverseRemark": "", // 说明
					"transactionAmount": '', // 充值金额
					"transactionState": 1, //   交易状态  0-已申请 1-已成功  -1-已撤销
					"transactionType": "RECHARGE", // 交易类型 （固定为充值）
					"repaymentIds": "" // 赊销待还款id(多个以逗号分隔)
				},
				rowDetails: {},
				detailData: {},
				id: '',
				tableData: [],
				cumulative: 0,
				input: '0.00',
				selectedIndexs: [],
				iShow: {
					seting: false
				},
				show: {
					img: false,
					footer: true
				},
				butten: {
					colse: '不用了',
					confirm: '确定',
					coloseBg: '#ffffff',
					coloseColor: '#555555',
					confirmBg: '#1890ff',
					confirmColor: '#FFFFFF',
					borderRadius: '30rpx'
				},
				rejectRemark: ''
			}
		},
		onLoad(e) {
			if (e.jsData) {
				this.rowDetails = JSON.parse(e.jsData)
				this.id = JSON.parse(e.jsData).id
				let companyId = JSON.parse(e.jsData).companyId
				this.findDetail(this.id)
				this.getCompanyTrading(companyId)
				this.init()
			}
		},
		watch: {
			cumulative: function() {
				console.log('实时更新价格变动', this.rowDetails.collectionAmount, this.cumulative)
				this.input = this.rowDetails.collectionAmount - this.cumulative;
				this.input = this.input.toFixed(2)
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			bohuiDialog() {
				this.iShow.seting = true
			},
			closeFn() {
				this.rejectRemark = ''
				this.iShow.seting = false
			},
			confirmFn() {
				let data = {
					id: this.rowDetails.id,
					rejectRemark: this.rejectRemark
				}
				enterpriseRecharge.handleRejection(data).then(res => {
					if (res.code == 20000) {
						uni.showToast({
							title: '驳回成功',
							icon: 'success'
						})
						this.iShow.seting = false
						this.back()
					}
				})
			},
			handleClick() {
				if (this.rowDetails.collectionAmount - Number(this.cumulative).toFixed(2) < 0) {
					uni.showToast({
						title: '赊销金额大于充值金额！',
						icon: 'error'
					})
					return
				}
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认将不可更改?',
					success: function(res) {
						if (res.confirm) {
							that.saveSbumit()
						} else if (res.cancel) {
							console.log(res.cancel, '用户取消');
						}
					}
				});
			},
			saveSbumit() {
				let data = this.datas
				enterpriseRecharge.savePreprocessing(data).then(res => {
					if (res.code == 20000) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						this.back()
					}
				})
			},
			init() {
				this.datas.pretreatmentId = this.rowDetails.id;
				this.datas.companyId = this.rowDetails.companyId;
				this.datas.companyBankCardId = this.rowDetails.payBankAccount;
				this.datas.offlineCompleteTime = this.rowDetails.offlineCompleteTime;
				this.datas.offlinePaymentCompany = this.rowDetails.offlinePaymentCompany;
				this.datas.offlineStartTime = this.rowDetails.offlineStartTime;
				this.datas.transactionAmount = this.rowDetails.collectionAmount;
				this.input = this.rowDetails.collectionAmount ? this.rowDetails.collectionAmount.toFixed(2) : 0.00
			},
			handleSelectionChange(item) {
				this.selectedIndexs = item.detail.index
				let e = this.selectedIndexs.map(i => this.tableData[i])
				if (this.calculation(e) > this.rowDetails.collectionAmount) {
					this.$refs.table.toggleRowSelection(e[e.length - 1], false);
					return
				}
				if (e.length != 0) {
					this.cumulative = this.calculation(e)
				} else {
					this.cumulative = 0;
				}
				this.datas.repaymentIds = e.map(item => item.id).join(',');
			},
			calculation(e) {
				if (e.length == 0) return 0
				let number = e.length == 1 ? e[0].transactionAmount : e.reduce((sum, item, index, arr) => {
					return (sum.transactionAmount ? sum.transactionAmount : sum) + item.transactionAmount
				});
				return number
			},
			findDetail(id) {
				enterpriseRecharge.findDetail(id).then(res => {
					if (res.code !== 20000) return
					this.detailData = res.data
				})
			},
			getCompanyTrading(companyId) {
				enterpriseRecharge.getCompanyTrading({
					companyId: companyId,
					transactionType: 'CHARGE_SALES',
					chargeSalesAuditStatus: '-2'
				}).then(res => {
					this.tableData = res.data
					this.tableData.forEach(tab => {
						if (tab.transactionAmount > this.rowDetails.collectionAmount) {
							tab.disabled = true
						} else {
							tab.disabled = false
						}
					})
				})
			}
		}
	}
</script>

<style>
	@import url("./index.css");
</style>