<template>
	<view class="content">
		<view class="header">
			<view class="header-icon">
				<u-icon name="tags-fill" color="white" size="32"></u-icon>
			</view>
			<view class="header-title">收款方银行信息</view>
			<view class="header-content">
				<view class="header-flex">
					<label>开户银行</label>
					<view>{{bankData.name}}</view>
				</view>
				<view class="header-flex">
					<label>银行卡号</label>
					<view>{{bankData.no}}</view>
				</view>
				<view class="header-flex">
					<label>支付金额</label>
					<view>{{price}}</view>
				</view>
			</view>
		</view>
		<view class="remarkText" v-if="type == 'edit'">
			<text class="name">驳回原因：</text>{{remark}}
		</view>
		<view class="form">
			<view class="cover-header">
				<view>
					<view class="cover-title">上传打款凭证</view>
					<view class="cover-subtitle">长按图片可删除已上传图片</view>
				</view>
				<view class="cover-num">{{pathArr.length}}/9</view>
			</view>
			<view class="cover-flex">
				<view class="cover-item" v-for="(item, index) in pathArr" :key="index" @longpress="onRemove(index)">
					<image class="cover-item-src" :src="item" mode="aspectFill"></image>
				</view>
				<view class="cover-item border" @click="albumClick" v-if="pathArr.length < 9">
					<image class="cover-item-add" src="@/static/icons/img_add.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="idcardBtn">
				<button class="idcardBtn-go" @click="issueForm">确认提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	import { uploads } from '@/apis/interfaces/uploading'
	import { bankInfo, offlineOpen, bankSee, bankEdit } from '@/apis/interfaces/synthesis'
	export default {
		data() {
			return {
				orderType: '',    // 订单类型
				bankData : '',    // 账户信息
				price	 : '',    // 打款金额
				name     : '',    // 打卡账户
				pathArr  : [],	  // 凭证图片
				type     : '',    // 是否为编辑
				remark   : '',    // 驳回原因
			}
		},
		
		created() {
			this.type 	= this.$Route.query.type
			this.price	= this.$Route.query.price
			// 查看打款凭证-查看提交信息
			this.yearServe();
			// 查看提交信息
			if(this.$Route.query.type == 'edit') {
				bankSee(this.$Route.query.payId,{
					order_type : this.$Route.query.orderType,
					order_id   : this.$Route.query.orderId
				}).then(res => {
					// 这里需要重新处理打款信息
					this.price    = res.price
					this.name     = res.name
					this.pathArr  = res.cover
					this.remark   = res.remark
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			}
		},

		methods: {
			// 查看打款凭证
			yearServe(page){
				bankInfo().then(res => {
					this.bankData  = res
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			
			// 请上传转款电子回单
			albumClick() {
				var _this = this
				uni.chooseImage({
					count		: 9 - this.pathArr.length,
					sizeType	: ['original', 'compressed'],
					sourceType	: ['album','camera'],
					success: path=> {
						let { tempFilePaths } = path
						let paths = tempFilePaths.map((val, index) => {
							return { 
								name: 'file' + index,
								uri : val
							}
						})
						uploads(paths).then(res => {
							
							
							
							this.pathArr = this.pathArr.concat(res.url)
						}).catch(err => {
							uni.showToast({
								title: err.message,
								icon : 'none'
							})
						})
					},
				});
			},
			
			// 表单提交
			issueForm(e) {
				let data = {
					order_type : this.$Route.query.orderType.replace(/\-/g, '\\'),
					order_id   : this.$Route.query.orderId,
					price      : this.price,
					cover      : this.pathArr
				}
				if(this.$Route.query.type == 'edit') {
					bankEdit(this.$Route.query.payId, data).then(res => {
						this.onBack()
					}).catch(err => {
						uni.showToast({
							title: err.message,
							icon : 'none'
						})
					})
					return
				}
				offlineOpen(data).then(res => {
					this.onBack()
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			
			// 删除图片数据
			onRemove(index){
				uni.vibrateShort()
				this.pathArr.splice(index, 1)
			},
			
			// 返回上一页
			onBack(){
				uni.showModal({
					title		: '提示',
					content		: '打款凭证已提交，请耐心等待审核，通过后请前往工作台综法订单管理中进行签约',
					showCancel	: false,
					success		: modalRes => {
						if(modalRes.confirm){
							uni.navigateBack()
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: $window-color;
		width: 100vw;
		min-height: 100vh;
		padding: 80rpx 30rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	// 驳回原因
	.remarkText{
		background: white;
		margin-top: 30rpx;
		text-align: center;
		font-size: 32rpx;
		line-height: 50rpx;
		width: 100%;
		border-radius: 20rpx;
		padding: 30rpx;
		box-sizing: border-box;
		color: gray;
		.name{
			color: $text-price;
			font-weight: bold;
		}
	}
	// form
	.form{ 
		background: white;
		width: 100%;
		border-radius: 20rpx;
		padding: 30rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
		// 上传图片数组
		.cover-header{
			display: flex;
			justify-content: space-between;
			padding-bottom: 30rpx;
			.cover-title{ line-height: 50rpx; font-size: 32rpx; color: #333; font-weight: bold; }
			.cover-subtitle{ line-height: 40rpx; font-size: 28rpx; color: gray; }
			.cover-num{ font-weight: bold; color: $main-color; line-height: 50rpx; font-size: 30rpx; }
		}
		.cover-flex{
			margin: -10rpx -20rpx;
			display: flex;
			flex-wrap: wrap;
			.cover-item{
				position: relative;
				width: calc(33.33% - 40rpx);
				margin: 20rpx;
				padding-top: calc(33.33% - 40rpx);
				background: #f8f8f8;
				.cover-item-src{
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}
				.cover-item-add{
					width: 68rpx;
					height: 68rpx;
					position: absolute;
					top: 50%;
					left: 50%;
					margin-top: -34rpx;
					margin-left: -34rpx;
				}
			}
		}
		// 表单
		.form-input{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0;
			@extend .border-solid;
			label{
				color: gray;
				font-size: 32rpx;
				width: 200rpx;
			}
			input{
				flex: 1;
				height: 90rpx;
				text-align: right;
				font-size: 32rpx;
			}
			// 上传
			.form-upd-img{
				width: 90rpx;
				height: 90rpx;
			}
		}
		.idcardBtn{
			padding-top: 30rpx;
			.idcardBtn-go{
				background: $main-color;
				color: white;
				font-size: 34rpx;
				line-height: 100rpx;
				height: 100rpx;
				padding: 0;
				font-weight: bold;
				border-radius: 20rpx;
				&::after{ display: none; }
			}
		}
	}
	// header
	.header{
		background: white;
		width: 100%;
		border-radius: 20rpx;
		padding: 80rpx 30rpx 30rpx;
		box-sizing: border-box;
		position: relative;
		.header-icon{
			position: absolute;
			left: 50%;
			top: -49rpx;
			margin-left: -49rpx;
			background: $main-color;
			color: white;
			height: 98rpx;
			width: 98rpx;
			line-height: 98rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.header-title{ 
			font-size: 34rpx;
			font-weight: bold;
			color: #333;
			text-align: center;
			padding-bottom: 30rpx;
		}
		.header-content{
			background: $window-color;
			border-radius: 20rpx;
			padding: 30rpx;
			text-align: center;
			line-height: 60rpx;
			font-size: 32rpx;
			.header-flex{
				display: flex;
				justify-content: space-between;
				align-items: center;
				label{
					color: gray;
				}
			}
		}
	}
</style>
