<template>
	<view class="content">
		<view class="top">
			<view class="top-cont">
				<view class="top-cont-name">上传打款凭证</view>
				<view class="top-cont-text">请仔细填写以下信息</view>
			</view>
			<image class="top-img" src="https://cdn.douhuofalv.com/images/2023/04/20/2ea5fc20ffc90e7feec7ba2650b81c99.png" mode="widthFix"></image>
		</view>
		
		<form @submit="issueForm" class="take">
		    <view class="take-label">
				<view class="remarkText" v-if="type == 'edit'">
					<view class="remarkText-name">驳回原因</view>
					<view class="remarkText-text">{{remark}}</view>
				</view>
		        <view class="item">
		            <view class="name">
		                <image src="@/static/icon/takeIcon_01.png" mode="widthFix"></image>收款银行
		            </view>
		            <view class="time">{{bankData.name}}</view>
		        </view>
		        <view class="item">
		            <view class="name">
		                <image src="@/static/icon/takeIcon_02.png" mode="widthFix"></image>收款银行帐号
		            </view>
		            <view class="time">{{bankData.no}}</view>
		        </view>
				<view class="item">
				    <view class="name">
				        <image src="@/static/icon/takeIcon_03.png" mode="widthFix"></image>支付金额
				    </view>
				    <view class="time">￥{{price}}</view>
				</view>
		        <!-- <view class="item">
		            <view class="name">
		                <image src="@/static/icon/takeIcon_03.png" mode="widthFix"></image>打款金额
		            </view>
					<view class="entry">
						<text>￥</text>
						<input type="digit" :value="price" name="price" placeholder-style="color: #000000" placeholder="请输入打款金额"  />
					</view>
		        </view>
		        <view class="item">
		            <view class="name">
		                <image src="@/static/icon/takeIcon_04.png" mode="widthFix"></image>转款账户
		            </view>
		            <input class="entry" type="text" :value="name" name="name" placeholder-style="color: #000000" placeholder="请输入转款人账户名" />
		        </view> -->
		        <view class="item">
		            <view class="name">
		                <image src="@/static/icon/takeIcon_05.png" mode="widthFix"></image>
						<view class="name-cont">
							<view class="name-cont-top">
								<view class="name-cont-title">上传打款凭证</view>
								<view class="name-cont-number">{{pathArr.length}}/9</view>
							</view>
							<view class="name-cont-tips">长按图片可删除已上传图片</view>
						</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="https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/06/06/0e777b11d995a02f698b47efd66e8838.png" mode="aspectFill"></image>
						</view>
					</view>
		        </view>
				
				<!-- <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/imgs/cover_img.png" mode="aspectFill"></image>
					</view>
				</view> -->
							
		    </view>
			<view class="idcardBtn">
				<button class="idcardBtn-go" form-type="submit" :disabled="disabled">{{disabled ? '数据正在提交中' : '确认提交'}}</button>
			</view>
		</form>
	</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   : '',    // 驳回原因
				disabled : false, // 按钮状态
			}
		},
		
		onShow() {
			console.log(this.$Route.query)
			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'
							})
						})
					},
				});
			},
			
			// 删除图片数据
			onRemove(index){
				uni.vibrateShort()
				this.pathArr.splice(index, 1)
			},
			
			// 表单提交
			issueForm(e) {
				let value    = e.detail.value;
				let data = {
					order_type : this.$Route.query.orderType,
					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.disabled = true
						uni.showToast({
							title: '提交成功，请等待审核',
							icon: "none"
						})
						
						setTimeout(()=>{
							
							uni.navigateBack()
						},2000)
					}).catch(err => {
						uni.showToast({
							title: err.message,
							icon : 'none'
						})
					})
					return
				}
				offlineOpen(data).then(res => {
					this.disabled = true
					uni.showToast({
						title: '提交成功，请等待审核',
						icon: "none"
					})
					
					setTimeout(()=>{
						uni.navigateBack()
					},2000)
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #111e4b;
		width: 100vw;
		height: 100%;
		overflow-y: scroll;
		position: fixed;
	}
	
	.top {
		position: relative;
		height: 180rpx;
		.top-img {
			position: absolute;
			right: 0;
			top: 0;
			width: 40%;
		}
		.top-cont {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			padding: 40rpx 30rpx;
			box-sizing: border-box;
			.top-cont-name {
				font-weight: 600;
				font-size: 54rpx;
				background-image: linear-gradient(to right,#f1c694, #fffbf6 42%);
				-webkit-background-clip:text; 
				-webkit-text-fill-color:transparent;
				margin-bottom: 10rpx;
			}
			.top-cont-text {
				font-size: 34rpx;
				color: #ffffff;
			}
		}
	}
	
	.take {
		padding: 30rpx;
		box-sizing: border-box;
		display: block;
	}
	
	.take-label {
		background-color: #ffffff;
		border-radius: $radius;
	    padding: 20rpx;
	    box-sizing: border-box;
	}
	
	.remarkText {
		padding: 20rpx;
		box-sizing: border-box;
		background-color: #ffefef;
		color: #dc3454;
		border-radius: 15rpx;
		margin: 20rpx;
		width: calc(100% - 40rpx);
		.remarkText-name {
			margin-bottom: 10rpx;
			font-weight: 600;
			font-size: 34rpx;
		}
	}
	
	.item {
	    padding:25rpx 20rpx 30rpx;
	    box-sizing: border-box;
	    font-size: 32rpx;
	}
	
	.name {
	    width: 100%;
	    display: flex;
	    line-height: 44rpx;
	    margin-bottom: 20rpx;
	}
	
	.name image {
	    width: 44rpx;
	    height: 44rpx;
	    margin-right: 15rpx;
	}
	
	.name-cont {
		width: calc(100% - 59rpx);
	}
	
	.name-cont-top {
		display: flex;
		.name-cont-title {
			flex: 1;
		}
		.name-cont-number {
			color: #da2b56;
			font-size: 28rpx;
		}
	}
	
	.name-cont-tips {
		font-size: 26rpx;
		color: #999;
	}
	
	.time {
	    width: 100%;
	    color: #9d9d99;
		background-color: #f4f4f4;
		padding: 0 16px;
		height: 46px;
		line-height: 46px;
		box-sizing: border-box;
		border-radius: 5px;
	}
	
	.entry {
	    width: 100%;
	    background-color: #f4f4f4;
	    font-size: 30rpx;
	    padding: 0 30rpx;
	    height: 84rpx;
	    line-height: 84rpx;
	    box-sizing: border-box;
	    border-radius: 10rpx;
		display: flex;
		input { 
			height: 84rpx;
			line-height: 84rpx;
			display: inline-block;
		}
		text {
			padding-right: 15rpx;
		}
	}
	
	.cover-flex{
		margin: -20rpx 20rpx 0 40rpx;
		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;
			}
		}
	}
	
	.issueNew-icon {
	    width: 200rpx;
	    height: 200rpx;
	}
	
	.issueNew-text {
	    font-size: 28rpx;
	    color: #9d9d9d;
	}
	
	/* 按钮 */
	// 按钮
	.idcardBtn {
		background-color: #111e4b;
		width: 100%;
		padding: 40rpx 0 120rpx;
		box-sizing: border-box;
		display: flex;
		.idcardBtn-go {
			width: 100%;
			background-image: linear-gradient(to bottom, #fff2d2, #f9cd9e);
			color: #582700;
			font-weight: 600;
			font-size: 36rpx;
			border-radius: $radius * 3;
			height: 94rpx;
			line-height: 94rpx;
			box-shadow: 0 6rpx 10rpx rgba(0, 0, 0, .5);
			text-align: center;
			&[disabled] {
				background-color: #f9f9f9;
				border-color: #e2e2e2;
				color: #959595;
			}
			&::after {
				display: none;
			}
		}
	}
</style>
