<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="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>
		            <view class="issueNew" @click="albumClick">
		                <image class="issueNew-icon" :src="showpath || '/static/imgs/cover_img.png'" mode="aspectFill"></image>
		                <view class="issueNew-text">请上传转款电子回单</view>
		            </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     : '',    // 打卡账户
				showpath : '',	  // 凭证图片
				type     : '',    // 是否为编辑
				remark   : '',    // 驳回原因
				disabled : false, // 按钮状态
			}
		},
		
		created() {
			this.type = this.$Route.query.type
			
			// 查看打款凭证-查看提交信息
			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.showpath = 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: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'],  // way是点击时传入的打开方式相机或相册
					success: path=> {
						uploads([{
							uri : path.tempFilePaths[0]
						}]).then(res => {
						    this.showpath = res.url[0]
						}).catch(err => {
							uni.showToast({
								title: err.message,
								icon : 'none'
							})
						})
					},
				});
			},
			
			// 表单提交
			issueForm(e) {
				let value    = e.detail.value;
				let data = {
					order_type : this.$Route.query.orderType,
					order_id   : this.$Route.query.orderId,
					name       : value.name,
					price      : value.price,
					cover      : this.showpath
				}
				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;
	}
	
	.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;
		}
	}
	
	.issueNew {
		background-color: #f4f4f4;
	    text-align: center;
	    margin: 30rpx auto 0;
		width: 400rpx;
		height: 400rpx;
		padding-top: 80rpx;
		box-sizing: border-box;
		border-radius: 15rpx;
	}
	
	.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>
