<template>
	<view>
		<view class="df aic jcsb head-fangshi">
			<div>付款方式</div>
			<div v-if="name.length > 0" @click="show = true">{{ name }}></div>
			<div v-else style="color: #ccc;" @click="show = true">请选择支付方式 ></div>
		</view>
		<view class="make-collections" v-if="name == '银行卡'">
			<div>收款账户</div>
			<div v-for="(item, index) in simg ? radiolist1 : listtwo" :key="index">
				<div class="df aic bommsd" @click="btn(index, item)">
					<div class="make-dem">
						<image v-if="indexa == index" :src="$util.img(`/upload/weapp/user/gou.png`)" mode=""></image>
						<image v-else :src="$util.img(`/upload/weapp/user/un_gou.png`)" mode=""></image>
					</div>
					<div class="make-two">
						<div>银行名称 <span>{{ item.branch_bank_name }}</span></div>
						<div>开户名称 <span>{{ item.realname }}</span></div>
						<div>对公账号 <span>{{ item.bank_account }}</span></div>
					</div>

				</div>
				<!-- <div class="xu"></div> -->
			</div>
			<div class="Order-commodity df jcsa">
				<div class="df aic" @click="simga">
					展开
					<image v-if="simg == true" :src="$util.img('/upload/weapp/user/arrow-top.png')" mode="">
					</image>
					<image v-if="simg == false" :src="$util.img('/upload/weapp/user/arrow-bottom.png')" mode="">
					</image>
				</div>
			</div>
		</view>
		<view class="upload">
			<div>上传汇款凭证：<span>限制上传5张凭证，单张不超过3M</span></div>
			<div class="visittwo">
				<view class="Visit-img" v-if="list.length < 5">
					<div @click="upload()" class="df aic jcsa">
						<image :src="$util.img(`/upload/weapp/pageSalesman/reportForm/plussign.png`)" mode=""></image>
					</div>
				</view>
				<view class="visitsui df">
					<view class="" v-for="(item, index) in list" :key="index">
						<image :src="$util.img(item[0])" mode=""></image>
					</view>
				</view>

			</div>

		</view>
		<view class="df aic jcsb button-box">
			<div class="df aic jcsa">金额￥{{ money }}</div>
			<div class="df aic jcsa" @click="btnti">提交</div>
		</view>
		<view>
			<u-action-sheet :actions="zhifufangshi" @select="selectClick" :title="title" :show="show"
				@close="show = false"></u-action-sheet>
			<!-- <u-button @click="show = true">打开ActionSheet</u-button> -->
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			simg: false,
			fileList5: [],
			title: '请选择支付方式',
			show: false,
			value: '2022-9-12',
			value1: '',
			indexa: 0,
			radiolist1: [{
				name: '中国银行xx支行',
				disabled: false,
				unit: '北京市朝阳区安国药业有限公司',
				account: '02984884'
			},
			{
				name: '邮政银行xx银行',
				disabled: false,
				unit: '北京市朝阳区安国药业有限公司',
				account: '02984884'
			},

			{
				name: '邮政银行xx银行',
				disabled: false,
				unit: '北京市朝阳区安国药业有限公司',
				account: '02984884'
			}

			],
			list: [],
			listtwo: [],
			money: '',
			zhifufangshi: [
				{ id: 1, name: '微信' },
				{ id: 2, name: '支付宝' },
				{ id: 3, name: '银行卡' }
				// {id:4,name:'其它'},
			],
			id: '',
			name: '',
			order_id: '',
			member_id: '',
			// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
			radiovalue1: '中国银行xx支行',
		};
	},
	onLoad(e) {
		this.order_id = e.id
		this.member_id = e.di
		uni.$on('money', (data) => {
			this.money = data
			// console.log(data,'amount');
		})
	},
	onUnload() {
		uni.$off('money')
	},
	onShow() {
		this.$api.sendRequest({
			url: '/api/salasmanorder/getBankList',
			data: {},
			success: res => {
				console.log(res.data.list, '平台收款账户列表');
				this.radiolist1 = res.data.list
				this.itemlist = res.data.list[0]
				this.listtwo = [...res.data.list].slice(0, 2)
			}
		})
	},
	methods: {
		selectClick(index) {
			this.id = index.id
			this.name = index.name
			console.log(index)
		},
		upload(type, size = 1) {
			this.$util.upload(size, {
				path: 'otherImage'
			}, res => {
				this.list.push(res)
				console.log(this.list);
			})
		},
		simga() {
			this.simg = !this.simg
			let _this = this
			if (!_this.simg) {
				_this.listtwo = [..._this.radiolist1].slice(0, 2)

			} else {

			}
		},
		groupChange(n) {
			console.log('groupChange', n);
		},
		radioChange(n) {
			console.log('radioChange', n);
		},
		btn(index, item) {
			console.log(item);
			this.itemlist = item
			this.indexa = index
		},
		btnti() {
			if (this.name.length == 0) {
				this.$util.showToast({
					title: '请选择付款方式'
				});
				return
			}
			if (this.list.length == 0) {
				this.$util.showToast({
					title: '请上传凭证'
				});
				return
			}
			if (this.name == '银行卡') {
				this.$api.sendRequest({
					url: '/api/salasmanorder/orderPayAdd',
					header: {
						'Content-Type': 'application/json' //自定义请求头信息
					},
					data: {
						order_id: this.order_id,//订单id
						member_id: this.member_id,//订单客户id
						pay_type: this.id,//付款方式 1微信 2支付宝 3银行卡
						bank_num: this.itemlist.bank_account,//银行卡号
						bank_name: this.itemlist.branch_bank_name,//银行卡开户行名称
						name: this.itemlist.realname,//开户名称
						money: this.money,//收款金额
						images: this.list//凭证 数组
					},
					success: res => {
						this.$util.showToast({
							title: '提交成功'
						});
						setTimeout(() => {
							uni.navigateTo({
								url: `/page_salesman_order/Collection_record/Collection_record?id=${this.member_id}&di=${this.order_id}`
							})
						}, 500)
					}
				})
			} else {
				this.$api.sendRequest({
					url: '/api/salasmanorder/orderPayAdd',
					header: {
						'Content-Type': 'application/json' //自定义请求头信息
					},
					data: {
						order_id: this.order_id,//订单id
						member_id: this.member_id,//订单客户id
						pay_type: this.id,//付款方式 1微信 2支付宝 3银行卡
						money: this.money,//收款金额
						images: this.list//凭证 数组
					},
					success: res => {
						setTimeout(() => {
							uni.navigateTo({
								url: `/page_salesman_order/Collection_record/Collection_record?id=${this.member_id}&di=${this.order_id}`
							})
						}, 500)
					}
				})
			}


		}
	}
}
</script>

<style lang="scss">
.head-fangshi {
	width: 702rpx;
	background: #FFFFFF;
	padding: 12rpx 6rpx;
	box-sizing: border-box;
	margin: 0 auto;
	margin-top: 24rpx;
}

.visittwo {
	height: 264rpx;
	width: 600rpx;
	border: 1rpx solid #ccc;
	position: relative;

	.visitsui {
		// margin-left: 12rpx;
		margin-top: 12rpx;

		image {
			width: 80rpx;
			height: 80rpx;
			margin-left: 12rpx;
		}
	}
}

.Visit-img {
	position: absolute;
	bottom: 12rpx;
	left: 12rpx;
	width: 80rpx;
	height: 80rpx;
	background: #EFEFEF;
	border-radius: 16rpx;

	image {
		width: 80rpx;
		height: 80rpx;
	}
}

.head-time {
	width: 750rpx;
	height: 110rpx;
	background: #FFFFFF;
	box-sizing: border-box;

}

.head-time div:nth-child(1) {
	font-size: 28rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #999999;
	line-height: 40rpx;
	margin-left: 24rpx;
}

.head-time div:nth-child(2) {
	width: 550rpx;
	height: 70rpx;
	background: #F6F6F6;
	border-radius: 16rpx;
	box-sizing: border-box;
	margin-left: 40rpx;

	input {
		// width: 550rpx;
		// height: 70rpx;
		// background: #F6F6F6;
		// border-radius: 16rpx;
		padding-left: 68rpx;
		// margin-left: 40rpx;
		// box-sizing: border-box;
	}
}

.make-collections {
	width: 702rpx;
	// height: 572rpx;
	background: #FFFFFF;
	border-radius: 16rpx;
	box-sizing: border-box;
	padding-bottom: 24rpx;
	margin: 24rpx;

	.bommsd {
		margin-bottom: 32rpx;
	}


	.Order-commodity {
		margin-top: 34rpx;

		div {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 40rpx;
		}

		image {
			width: 24rpx;
			height: 24rpx;
			margin-left: 24rpx;
		}
	}


	.make-dem {
		image {
			width: 32rpx;
			height: 32rpx;
			margin: 0 28rpx 0 32rpx;
		}
	}

	.make-two {
		div {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 40rpx;
			margin-top: 22rpx;

			span {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;
				line-height: 40rpx;
				margin-left: 40rpx;
			}
		}
	}

	.xu {
		width: 638rpx;
		height: 2rpx;
		background: #F2F2F2;
		border-radius: 16rpx;
		margin-top: 24rpx;
		margin: 0 auto;
	}


}

.upload {
	width: 702rpx;
	// height: 602rpx;
	background: #FFFFFF;
	border-radius: 16rpx;
	margin: 0 24rpx;
	box-sizing: border-box;
	padding: 32rpx;
	margin-top: 24rpx;

	.Upload-pictures {
		border-radius: 16rpx;
		margin-top: 24rpx;
	}
}

.upload div:nth-child(1) {
	font-size: 30rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 500;
	color: #222222;
	line-height: 42rpx;
	margin-bottom: 24rpx;

	span {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 40rpx;
	}
}

.button-box {
	width: 750rpx;
	height: 100rpx;
	background: #FFFFFF;
	position: fixed;
	bottom: 74rpx;
}

.button-box div:nth-child(1) {
	margin-left: 24rpx;
	font-size: 30rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 500;
	color: #585858;
	line-height: 42rpx;
}

.button-box div:nth-child(2) {
	width: 192rpx;
	height: 72rpx;
	background: #21BBF3;
	border-radius: 40rpx;
	font-size: 28rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
	line-height: 40rpx;
	margin-right: 32rpx;
}
</style>
