<template>
	<view class="page-container">
		<!-- 轮播图 -->
		<swiper indicator-dots style="height: 120rpx;" autoplay indicator-active-color="#fff">
			<swiper-item>
				<image src="/static/images/banner_1.png" style="width: 100vw;height: 120rpx;"></image>
			</swiper-item>
			<swiper-item>
				<image src="/static/images/banner_2.png" style="width: 100vw;height: 120rpx;"></image>
			</swiper-item>
		</swiper>
		<!-- 付款信息 -->
		<view class="container-box">
			<view class="box-title">付款方信息</view>
			<view class="item center">
				<view class="title star">公司名称</view>
				<view class="content">
					<input class="input-box" placeholder="请输入公司名称" :value="companyName" @input="inputCompanyName" />
				</view>
			</view>
			<view class="item center">
				<view class="title star">开户银行</view>
				<view class="content"><input :value="companyBank" @input="inputCompanyBank" class="input-box"
						placeholder="请输入开户银行" /></view>
			</view>
			<view class="item center">
				<view class="title star">银行账号</view>
				<view class="content"><input class="input-box" placeholder="请输入银行账号" :value="companyBankNum"
						@input="inputCompanyNum" /></view>
			</view>
			<view class="item center">
				<view class="title star">打款时间</view>
				<view class="content">
					<uni-datetime-picker
						:style="{'color':selectTime==''? '$text-gray-hint-color' :'$text-color !important'}"
						type="datetime" :border="false" v-model="selectTime" @change="changeDateTime" />
				</view>
			</view>
			<view class="item">
				<view class="title star">打款凭证</view>
				<view class="content">
					<uni-file-picker :value="files" ref="imgPicker" :del-icon="true" limit="1" fileMediatype="image"
						@delete="delImgs" :auto-upload="false" :image-styles="imageStyles"
						@select="uploadImgToNet"></uni-file-picker>
				</view>
			</view>
		</view>
		<view class="container-box">
			<view class="box-title">收款方信息</view>
			<view class="item mt-10">
				<view class="title">公司名称</view>
				<view class="content">{{incomeEnterprise.bankAccountName}}</view>
			</view>
			<view class="item">
				<view class="title">开户银行</view>
				<view class="content">{{incomeEnterprise.bankName}}</view>
			</view>
			<view class="item">
				<view class="title">银行账号</view>
				<view class="content">{{incomeEnterprise.bankNumber}}</view>
			</view>
			<view class="item">
				<view class="title">银行联行号</view>
				<view class="content">{{incomeEnterprise.bankUnionpayNumber}}</view>
			</view>
			<view class="item">
				<view class="title">打款备注</view>
				<view class="content">{{incomeEnterprise.bankRemark}}</view>
			</view>
			<view class="item">
				<view class="title" style="font-weight: 600;">说明</view>
				<view class="content" style="color: red;">请打款时必须按照以上备注填写</view>
			</view>
		</view>
		<view class="bottom-fixed-footer">
			<view class="money">金额:
				<text class="price">{{payMoney}}元</text>
				<text style="font-size:12px;" v-if="packageId">({{packageName}})</text>
			</view>
			<view class="bottom-btn-green" @click="completePay">完成充值</view>
		</view>
		<uni-popup type="message" ref="msg">
			<uni-popup-message :type="msgType" :message="msgTxt" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import {
		get
	} from '@/common/js/cache/storage.js'
	import PayApi from '@/common/js/net/payApi'
	import {
		uploadImgUrl,
		previewUrl
	} from '@/common/js/net/http.js'
	export default {
		data() {
			return {
				uploadImgUrl: uploadImgUrl,
				incomeEnterprise: {},
				showError: false,
				errorHint: '',
				dateTimeArray: null,
				dateTime: null,
				selectTime: '',
				startYear: 2010,
				endYear: 2050,
				files: [],
				companyName: '', //公司名称
				companyBank: '', //开户行
				companyBankNum: '', //账户号码
				packageId: '', //套餐ID
				payMoney: 0, //金额
				packageName: '', //套餐名称
				accountRechargeId: '', //订单ID
				msgType: 'info',
				msgTxt: '',
				imageStyles: {
					width: 72,
					height: 72,
					border: {
						color: "#F5F5F5",
						width: 1,
						style: 'solid',
						radius: '2px'
					}
				},
			}
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title: '对公转账',
			})
			uni.setNavigationBarColor({
				frontColor: '#000000', // 必写项，字体颜色仅支持#ffffff和#000000
				backgroundColor: '#F0F0F0', // 传递的颜色值，仅支持十六进制颜色
				animation: { // 可选项
					duration: 500,
					timingFunc: 'easeIn'
				}
			})
			console.log(options);
			// 获取完整的年月日时分秒，以及默认显示的数组
			console.log(typeof options.packageId)
			this.packageId = options.packageId && options.packageId != 'undefined' ? options.packageId : '' //套餐包
			this.packageName = options.name
			this.payMoney = options.money //金额
			this.getEnterpriseAccountInfo()
			//获取订单
			console.log(this.packageId)
			this.doGetOrder()
		},
		methods: {
			//公司名称
			inputCompanyName(e) {
				this.companyName = e.detail.value
			},
			//公司名称
			inputCompanyBank(e) {
				this.companyBank = e.detail.value
			},
			//账号
			inputCompanyNum(e) {
				this.companyBankNum = e.detail.value
			},
			//选中时间
			changeDateTime(e) {
				this.selectTime = e
				console.log('选中时间', this.selectTime);
			},
			//获取订单编号
			doGetOrder() {
				uni.showLoading({
					title: '加载中...',
				})
				const _self = this
				const data = {
					packageInfoId: _self.packageId ? _self.packageId : '',
					rechargeMoney: _self.payMoney,
					thirdParty: "对公转账"
				}
				PayApi.doGetOrder(data)
					.then(res => {
						uni.hideLoading()
						if (res.accountRechargeId && res.accountRechargeId != '') {
							_self.accountRechargeId = res.accountRechargeId
						} else {
							_self.msgTxt = '获取订单失败,请稍后重试'
							_self.msgType = 'error'
							_self.$refs.msg.open()
							setTimeout(() => {
								uni.navigateBack()
							}, 1500);
						}
					})
					.catch(err => {
						uni.hideLoading()
						_self.msgTxt = '获取订单失败,请稍后重试'
						_self.msgType = 'error'
						_self.$refs.msg.open()
						setTimeout(() => {
							uni.navigateBack()
						}, 1500);
					})
			},
			//获取收款方信息
			getEnterpriseAccountInfo() {
				const _self = this
				uni.showLoading({
					title: '加载中...',
				})
				PayApi.doGetEnterpriseAccountInfo()
					.then(res => {
						uni.hideLoading()
						_self.incomeEnterprise = res
					}, err => {
						uni.hideLoading()
						_self.msgTxt = err.msg ? err.msg : '网络错误,请稍后重试'
						_self.msgType = 'error'
						_self.$refs.msg.open()
					})
			},
			//删除图片
			delImgs() {
				this.files = []
				this.$refs.imgPicker.clearFiles()
			},
			//上传图片
			uploadImgToNet(e) {
				uni.showLoading({
					title: '上传中...'
				})
				const tempFilePaths = e.tempFilePaths;
				const token = get('token')
				const header = {}
				if (token) {
					header.Auth = `Bearer ${token}`;
				}
				var that = this
				for (let i = 0; i < tempFilePaths.length; i++) {
					uni.uploadFile({
						url: that.uploadImgUrl,
						header: header,
						filePath: tempFilePaths[i],
						name: 'image',
						success(res) {
							uni.hideLoading()
							console.log(res)
							if (res.statusCode == 200) {
								let result = res.data
								if (typeof res.data == 'string') {
									result = JSON.parse(res.data)
								} else {
									result = res.data
								}
								result.data.url = previewUrl + result.data.fileId
								result.data.name = result.data.fileName
								let lastDot = result.data.fileName.lastIndexOf('.')
								result.data.extname = result.data.fileName.substring(lastDot + 1);
								that.files = that.files.concat(result.data)
								console.log(that.files)
							} else {
								that.msgTxt = '凭证上传失败,请稍后重试'
								that.msgType = 'error'
								that.$refs.msg.open()
								that.$refs.imgPicker.clearFiles()
							}
						},
						fail(err) {
							uni.hideLoading()
							console.log("错误", err);
							that.$refs.imgPicker.clearFiles()
						}
					})
				}
			},
			//完成充值
			checkParams() {
				const _self = this
				if (_self.companyName == '') {
					_self.msgTxt = '请输入公司名称'
					_self.msgType = 'error'
					_self.$refs.msg.open()
					return false
				}
				if (_self.companyBank == '') {
					_self.msgTxt = '请输入开户银行'
					_self.msgType = 'error'
					_self.$refs.msg.open()
					return false
				}
				if (_self.companyBankNum == '') {
					_self.msgTxt = '请输入银行账号'
					_self.msgType = 'error'
					_self.$refs.msg.open()
					return false
				}
				if (_self.files.length <= 0) {
					_self.msgTxt = '请上传打款凭证'
					_self.msgType = 'error'
					_self.$refs.msg.open()
					return false
				}
				return true
			},
			//提交
			completePay() {
				const _self = this
				var isLegal = _self.checkParams()
				if (!isLegal) {
					return
				}
				uni.showLoading({
					title: '提交中...',
				})
				const fileIdStr = _self.files.map(file => file.fileId).join(',');
				const data = {
					orgBank: _self.companyBank,
					orgName: _self.companyName,
					orgNumber: _self.companyBankNum,
					packageInfoId: _self.packageId ? _self.packageId : '',
					rechargeFinalTime: _self.selectTime,
					rechargeMoney: _self.payMoney,
					rechargeRemark: "",
					rechargeVoucher: fileIdStr,
					thirdParty: "对公转账"
				}
				PayApi.doCompleteEnterprisePay(_self.accountRechargeId, data)
					.then(res => {
						uni.hideLoading()
						console.log(res)
						uni.redirectTo({
							url: '/pages/pay/payState/payState?type=1',
						})
					})
					.catch(err => {
						uni.hideLoading()
						_self.msgType = 'error'
						_self.msgTxt = err.msg ? err.msg : '网络错误,请稍后重试'
						_self.$refs.msg.open()
					})
			}
		}
	}
</script>

<style lang="scss">
	.container-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-color: white;
		margin-top: 10px;
		border-radius: 5px;
		padding-bottom: 20rpx;
	}

	.container-box:nth-last-of-type(2) {
		margin-bottom: 200rpx;
	}

	.box-title {
		font-size: 16px;
		font-weight: bold;
		color: black;
		padding: 10px 20px;
	}

	.item {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: flex-start;
		padding: 6px 20px;
	}

	.center {
		align-items: center;
	}

	.red {
		color: red;
	}

	.title {
		flex: 0.3;
		font-size: 14px;
		color: black;
		font-weight: bold;
	}

	.content {
		flex: 0.7;
		font-size: 14px;
	}

	.time-picker-box {
		display: flex;
		flex-direction: row;
	}



	.time-icon {
		background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzQzNDE0Mzc3MjcwIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ2MjgiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTE5MiA1MTJoMTI4di0xMjhIMTkyeiBtMCAxOTJoMTI4di0xMjhIMTkyeiBtNzY4LTE5Mi4wMzJWMTYwYTk2IDk2IDAgMCAwLTk2LTk2aC05NnYtMzEuMTA0YzAtMTcuMjE2LTEzLjI0OC0zMi4wNjQtMzAuNDY0LTMyLjg2NEw3MzYgMGEzMiAzMiAwIDAgMC0zMiAzMnYzMkgzMjB2LTMxLjEwNEMzMjAgMTUuNjggMzA2Ljc1MiAwLjgzMiAyODkuNTM2IDAuMDMyTDI4OCAwYTMyIDMyIDAgMCAwLTMyIDMydjMySDE2MGE5NiA5NiAwIDAgMC05NiA5NnY2NDBhOTYgOTYgMCAwIDAgOTYgOTZoMjg4YzU4LjkxMiA3OC4wOCAxNTEuNDg4IDEyOCAyNTUuNzQ0IDEyOGgyLjg0OC0wLjE2YzE3NS45NjgtMS4zMTIgMzE4LjgxNi0xNDYuNDMyIDMxNy41MzYtMzIyLjRhMzE3LjEyIDMxNy4xMiAwIDAgMC02NC41NzYtMTkwLjRsMC41NzYgMC44ek0xMjggMTc2QTQ4IDQ4IDAgMCAxIDE3NiAxMjhIMjU2djMxLjEwNGMwIDE3LjIxNiAxMy4yNDggMzIuMDY0IDMwLjQ2NCAzMi44NjRMMjg4IDE5MmEzMiAzMiAwIDAgMCAzMi0zMlYxMjhoMzg0djMxLjEwNGMwIDE3LjIxNiAxMy4yNDggMzIuMDY0IDMwLjQ2NCAzMi44NjRMNzM2IDE5MmEzMiAzMiAwIDAgMCAzMi0zMlYxMjhoODBBNDggNDggMCAwIDEgODk2IDE3NlYyNTZIMTI4ek0zODQgNzA0djAuMzg0YTMxOC4wOCAzMTguMDggMCAwIDAgMjcuNDU2IDEyOS42NjRsLTAuOC0yLjAxNkgxNzZhNDggNDggMCAwIDEtNDgtNDh2LTQ2NGg3Njh2MTI4Yy01Mi44MzItMzkuOTM2LTExOS42MTYtNjQtMTkyLTY0cy0xMzkuMTY4IDI0LjAzMi0xOTIuOCA2NC41NzZsMC44LTAuNTc2di02NGgtMTI4djEyOGg2NGEzMTYuMzg0IDMxNi4zODQgMCAwIDAtNjQgMTkxLjUydjAuNTEyLTAuMDMyeiBtNTc1Ljk2OCAzLjQyNGEyNTYgMjU2IDAgMSAxLTc3LjM0NC0xODYuNzg0bC0wLjA2NC0wLjA2NGEyNTUuNTg0IDI1NS41ODQgMCAwIDEgNzcuNDA4IDE4My41NTJsLTAuMDMyIDMuNDg4di0wLjE5MnpNODAwIDcwNGgtOTZ2LTE2MGEzMiAzMiAwIDAgMC02NCAwdjE5MmEzMiAzMiAwIDAgMCAzMiAzMmgxMjhhMzIgMzIgMCAwIDAgMC02NHoiIHAtaWQ9IjQ2MjkiIGZpbGw9IiMyYzJjMmMiPjwvcGF0aD48L3N2Zz4=');
		background-size: contain;
		background-repeat: no-repeat;
	}

	.input-box {
		flex: 1;
		background-color: $bg-gray-input-color;
		border-radius: 10rpx;
		padding: 15rpx;
		text-align: left;
		font-size: 28rpx;
		line-height: 40rpx;
		height: 40rpx;
	}

	.item-v {
		display: flex;
		flex-direction: column;
		padding: 5px;
	}

	.title-v {
		flex: 1;
		font-size: 14px;
		font-weight: 800;
	}

	.content-v {
		font-size: 14px;
	}


	.bottom-btn-box {
		position: fixed;
		left: 0;
		bottom: 0;
		text-align: center;
		width: 100vw;
		line-height: 100rpx;
		border-radius: 20rpx;
		background-color: white;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 130px;
	}

	.money {
		color: $text-brown-color;
		font-size: 32rpx;
		text-align: center;
		padding-bottom: 15rpx;
	}

	.price {
		color: $red-color;
	}


	.green-bottom-btn {
		height: 42px;
		width: 90vw;
		line-height: 42px;
		margin-bottom: 20px;
		border-radius: 4px;
		background-color: rgba(255, 169, 0, 1);
		color: rgba(255, 255, 255, 1);
		font-size: 16px;
		text-align: center;
		font-family: PingFangSC-semiBold;
	}

	:deep(.icon-add) {
		width: 50rpx !important;
		height: 4rpx !important;
	}

	:deep(.icon-add .rotate) {
		width: 50rpx !important;
		height: 4rpx !important;
	}

	.uni-datetime-picker--btn {
		background-color: $btn-green-color !important;
		color: white !important;
	}

	.uni-datetime-picker--btn:active {
		background-color: $btn-green-color-active !important;
	}

	.green-bottom-btn:active {
		background-color: rgba(255, 169, 0, 0.3);
		color: white;
	}

	.icon-calendar {
		display: none !important;
	}

	.uni-date-editor--x {
		flex: 1 !important;
		background-color: $bg-gray-input-color !important;
		border-radius: 15rpx !important;
		text-align: left !important;
		font-size: 28rpx !important;
		border: none !important;
		line-height: 40rpx !important;
		padding: 15rpx;
	}

	.uni-date__x-input {
		flex: 1 !important;
		background-color: $bg-gray-input-color !important;
		font-size: 28rpx !important;
		line-height: 40rpx !important;
		height: auto !important;
		color: $text-color !important;
	}

	:deep(.file-picker__progress) {
		display: none !important;
	}

	.icon-delete {
		width: 30rpx;
		height: 30rpx;
		background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzQ0ODYxOTEyMDQ5IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjE0NjIiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTUxMiAwQzIyOS4yOTQwOCAwIDAgMjI5LjI0OCAwIDUxMmMwIDI4Mi43NjczNiAyMjkuMjYzMzYgNTEyIDUxMiA1MTIgMjgyLjc2NzM2IDAgNTEyLTIyOS4xODE0NCA1MTItNTEyQzEwMjQgMjI5LjI5NDA4IDc5NC43NjczNiAwIDUxMiAweiBtMjA5LjkwOTc2IDY1NC4wOTAyNGE0Ny41OTA0IDQ3LjU5MDQgMCAwIDEgMTQuMDg1MTIgMzMuOTA5NzYgNDcuOTUzOTIgNDcuOTUzOTIgMCAwIDEtNDcuOTk0ODggNDcuOTk0ODggNDcuNzU5MzYgNDcuNzU5MzYgMCAwIDEtMzMuOTA5NzYtMTQuMDg1MTJMNTEyIDU3OS44OTYzMmwtMTQxLjk5Mjk2IDE0Mi4wNTk1MmE0Ny45NDg4IDQ3Ljk0ODggMCAwIDEtMzQuMDA3MDQgMTQuMDg1MTJjLTI2LjQ1NTA0IDAtNDcuOTU5MDQtMjEuNDU3OTItNDcuOTU5MDQtNDguMDE1MzZBNDcuNjg3NjggNDcuNjg3NjggMCAwIDEgMzAyLjA4IDY1NC4xNTE2OEw0NDQuMTU0ODggNTEyIDMwMi4xMDU2IDM2OS45NTU4NGE0Ny44ODIyNCA0Ny44ODIyNCAwIDAgMS0xNC4wMzkwNC0zMy45NTU4NCA0Ny45OTQ4OCA0Ny45OTQ4OCAwIDAgMSA4MS45Mi0zMy45NTU4NGwxNDEuOTkyOTYgMTQyLjA3NDg4TDY1NC4wNzQ4OCAzMDIuMDhhNDcuOTI4MzIgNDcuOTI4MzIgMCAwIDEgMzMuOTA5NzYtMTQuMDM5MDRjMjYuNDg1NzYgMCA0Ny45OTQ4OCAyMS40NTc5MiA0Ny45OTQ4OCA0Ny45OTQ4OGE0Ny43NTQyNCA0Ny43NTQyNCAwIDAgMS0xNC4wODUxMiAzMy45NTU4NGwtMTQxLjk5ODA4IDE0MS45OTI5NiAxNDIuMDEzNDQgMTQyLjEwNTZ6IG0wIDAiIGZpbGw9IiNlNmU2ZTYiIHAtaWQ9IjE0NjMiPjwvcGF0aD48L3N2Zz4=');
		background-size: cover;
		background-repeat: no-repeat;
		position: absolute;
		right: -8rpx;
		top: -8rpx;
	}
</style>