<template>
	<view>
		<u-navbar title="收款账户" :border-bottom="false" :background="bgc" title-color='#fff' title-size='36'
			back-icon-color="#fff" height='50'></u-navbar>
		<view class="cont">
			<!-- 银行卡 --> <!-- 银行卡 --> <!-- 银行卡 --> <!-- 银行卡 -->
			<view class="card" @click="tobd(0)" v-if="yhkflag && infoList.BANK_CARD">
				<view class="tit">
					银行卡
				</view>
				<view class="txt"
					style="display: flex;justify-content: space-between;width: 100%;padding-right: 30rpx;box-sizing: border-box;">
					<text>需绑定银行卡</text>
					<text>去绑定</text>
				</view>
			</view>
			<view class="card" @click="tobd(0)" v-if="!yhkflag && infoList.BANK_CARD">
				<view class="tit" style="display: flex;align-items: center;">
					<view class=""
						style="width: 50rpx;height: 50rpx;overflow: hidden;border-radius: 50%;position: relative;margin-right: 10rpx;">
						<image
							:src="'https://bkaear.market.alicloudapi.com/banklogo/' + infoList.BANK_CARD[0].cardInfo.Icon"
							style="position: absolute;top: 0;left: -5rpx;" mode="heightFix"></image>
					</view>
					<text>{{infoList.BANK_CARD[0].name}}</text>
				</view>
				<view class="txt"
					style="display: flex;justify-content: space-between;width: 100%;padding-right: 30rpx;box-sizing: border-box;">
					<view>{{infoList.BANK_CARD[0].cardInfo.bankName}}</view>
					<view>{{infoList.BANK_CARD[0].accountNo}}</view>
				</view>
			</view>
			<!-- 银行卡 --> <!-- 银行卡 --> <!-- 银行卡 -->

			<view class="card" style="background-color: #00BA88 ;" v-if="infoList.WECHAT">
				<view class="tit">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uXQRpObfAZgNgamWSgk8" mode="aspectFit"></image>
				</view>
				<view class="txt">
					使用当前微信收款
					<text v-if="wxaccountNo" style="margin-left: 120rpx;">{{wxaccountNo}}</text>
					<text v-else style="margin-left: 240rpx;" @click="btnbd">点击绑定</text>
				</view>
			</view>

			<view class="card" style="background-color: #4C97E7 ;" @click="tobd(1)" v-if="infoList.OFFLINE_IMAGE">
				<view class="tit">
					线下二维码收款
				</view>
				<view class="txt"
					style="display: flex;justify-content: space-between;width: 100%;padding-right: 30rpx;">
					<text>需上传收款码</text>
					<text v-if="infoList.OFFLINE_IMAGE[0]">已上传</text>
					<text v-else>去上传</text>
				</view>
			</view>

			<view class="tip">注意：缴费收入将直接结算至收款账户，请谨慎填写 </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#8883F0",
				},
				infoList: [],
				stause: false,
				wxaccountNo: '',
				yhkflag: true,
				yhkaccountNo: '',
				yhkid: '',
				xxid: ''
			}
		},
		onShow() {
			this.getinfo()
			this.getstause()
		},
		computed: {
	    
		},
		methods: {
			// 点击绑定微信openid
			btnbd() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '您是否要绑定当前微信收款？',
					success: function(res) {
						if (res.confirm) {
							// 绑定请求
							wx.login({
								success(res) {
									if (res.code) {
										let openid = res.code
										let data = {
											accountType:2,
											accountNo: openid,
										}
										that.$u.post("/app/account",data).then(res => {
											if (res.code == 200) {
												that.getinfo()
												uni.showToast({
													title: res.msg,
													icon: 'success',
													duration: 1000,
												})
											}
										})
									}
								}
							})
						} 
					}
				})
			},

			tobd(num) {
				if (num == 0) {
					if (this.infoList.BANK_CARD == null || this.infoList.BANK_CARD.length === 0) {
						uni.navigateTo({
							url: '/page_user/mapditu/bdcard'
						})
					} else {
						uni.navigateTo({
							url: '/page_user/mapditu/bdcard?accountId=' + this.infoList.BANK_CARD[0].accountId
						})
					}
				} else if (num == 1) {
					if (this.infoList.OFFLINE_IMAGE == null || this.infoList.OFFLINE_IMAGE.length == 0) {
						uni.navigateTo({
							url: '/page_user/mapditu/bdAlipay'
						})
					} else {
						uni.navigateTo({
							url: '/page_user/mapditu/bdAlipay?accountId=' + this.infoList.OFFLINE_IMAGE[0].accountId
						})
					}
				}

			},
			getstause() {
				this.$u.get('/app/config/wa').then((res) => {
					if (res.code == 200) {
						this.stause = res.data
					}
				})
			},
			getinfo() {
				this.$u.get('/app/account').then((res) => {
					if (res.code == 200) {
						this.infoList = res.data
						// 判断当前微信openid
						if (this.infoList.WECHAT && this.infoList.WECHAT[0] && this.infoList.WECHAT[0].accountNo) {
							this.wxaccountNo = this.infoList.WECHAT[0].accountNo
							this.wxaccountNo = this.wxaccountNo.substring(0, 5) + '********' + this.wxaccountNo.slice(-2)
						}
						//判断是否有银行卡
						if (res.data.BANK_CARD && res.data.BANK_CARD[0] && res.data.BANK_CARD[0].accountNo) {
							this.yhkflag = false
						} else {
							this.yhkflag = true
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-title {
		padding-bottom: 22rpx;
	}

	/deep/ .u-icon__icon {
		padding-bottom: 22rpx;
	}
	.cont {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		margin: 0 auto;

		.card {
			display: flex;
			flex-wrap: wrap;
			margin-top: 26rpx;
			width: 636rpx;
			height: 188rpx;
			background: #8EA9E4;
			box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
			border-radius: 20rpx;

			.tit {
				display: flex;
				align-items: center;

				image {
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
					margin-right: 10rpx;
				}

				width: 80%;
				margin-top: 20rpx;
				margin-left: 48rpx;
				font-family: AlibabaPuHuiTi,
				AlibabaPuHuiTi;
				font-weight: 400;
				font-size: 40rpx;
				color: #FFFFFF;
				line-height: 40rpx;
			}

			.txt {
				// margin-top: 20rpx;
				margin-left: 48rpx;
				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
			}

			.txts {
				width: 100%;
				text-align: right;
				margin-right: 48rpx;
				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}

		.tip {
			margin-top: 62rpx;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			font-size: 24rpx;
			color: #FF8D1A;
			line-height: 36rpx;
		}

		.btn {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 218rpx;
			width: 590rpx;
			height: 84rpx;
			background: #8883F0;
			border-radius: 40rpx;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			font-size: 36rpx;
			color: #FFFFFF;

		}
	}
</style>