<template>
	<view>
		<!-- <view class="width100 line10 "></view> -->
		<view class="width100 height100p" style="background-color: #eb6a53;"
			v-if="ledgerReceiverApply != null && ledgerReceiverApply != '' && ledgerReceiverApply.auditStatus != 2">

			<view class="font18 fcorfff paddtop35 fotct" v-if="ledgerReceiverApply.auditStatus == 1">
				绑定分账审核中
			</view>
			<view class="font18 fcorfff paddtop35 fotct" v-if="ledgerReceiverApply.auditStatus == 4">
				解除分账审核中
			</view>
			<view class="font18 fcorfff paading10 aliitem"
				v-if="ledgerReceiverApply.auditStatus == 3 || ledgerReceiverApply.auditStatus == 5">
				<image src="../../../static/img/error.png" mode="widthFix" class="iconw25 marglerig"></image>审核失败
			</view>
			<view class="font14 fcorfff paading10"
				v-if="ledgerReceiverApply.auditStatus == 3 || ledgerReceiverApply.auditStatus == 5">
				{{ledgerReceiverApply.rejectReason}}</view>
		</view>

		<view class="username">
			<view class="namecont">接收方名称</view>
			<input placeholder="请选择接收方名称" v-model="receiverName" style="width: 70%;"
				placeholder-style="color: #bfbfbf;font-size:14px;padding-top:2px;" />
			<image src="../../../static/img/jtg.png" mode="widthFix" class="iconw" @click="jumpMerchantlist()"></image>
		</view>

		<view class="username">
			<view class="namecont">接收方编号</view>
			<input placeholder="请输入接收方编号" v-model="receiverNo" style="width: 70%;"
				placeholder-style="color: #bfbfbf;font-size:14px;padding-top:2px;" />
		</view>

		<view class="notes font16" style="border-bottom: 0px;">
			<view class="width70 aliitem fcor666"
				v-if="typeId == 1 || (typeId == 2 && (ledgerReceiverApply.auditStatus == 1 || ledgerReceiverApply.auditStatus == 2|| ledgerReceiverApply.auditStatus == 3))">
				合作协议
			</view>
			<view class="width70 aliitem fcor666"
				v-if="typeId == 3 || (typeId == 2 && (ledgerReceiverApply.auditStatus == 4 || ledgerReceiverApply.auditStatus == 5))">
				解除分账说明
			</view>
			<!-- <view class="fcor666 alijusend width30 font14" @click="perImage('../../../static/img/businesslic13.png')">
				查看示例
				<image mode="widthFix" style="width: 12px;" src="../../../static/img/jtg.png"></image>
			</view> -->
		</view>
		<view class="width94 displ mart5">
			<image mode="widthFix" class="width100" :src="imgUrls+entrustFilePath" v-if="entrustFilePath"
				@click="upload()">
			</image>
			<image src="../../../static/img/businesslic15.png" mode="widthFix" class="width100"
				v-if="!entrustFilePath &&  typeId == 1" @click="upload()"></image>
			<image src="../../../static/img/businesslic16.png" mode="widthFix" class="width100"
				v-if="!entrustFilePath && typeId == 3" @click="upload()"></image>
		</view>

		<view class="btn" @click="submitbtn()"
			v-if="typeId == 1 && ledgerReceiverApply.auditStatus !=1 && ledgerReceiverApply.auditStatus != 4">提交审核
		</view>
		<view class="btn" @click="submitbtn()"
			v-if="typeId == 3 && ledgerReceiverApply.auditStatus !=1 && ledgerReceiverApply.auditStatus != 4">解除合作
		</view>
		<view class="height60"></view>
	</view>
</template>

<script>
	import {
		merLedgerReceiverApply,
		getLedgerReceiverById,
		merLedgerReceiverDelApply
	} from '../../../Utils/Api.js'
	let app = getApp();
	export default {
		data() {
			return {
				receiverName: '', //接收方名称
				reqUrl: app.globalData.url, //请求地址
				imgUrls: app.globalData.imgUrl, //图片查看
				receiverNo: '', //接收方编号
				entrustFilePath: '', //接收方合作协议
				merLedgerId: '', //商户id
				typeId: '', //进入id  1 新建 2 查看
				ledgerReceiverId: '', //接收方id
				ledgerReceiverApply: '', //详情数据
			}
		},
		onLoad(options) {
			this.merLedgerId = options.id;
			this.typeId = options.typeid;

			if (this.typeId == 2 || this.typeId == 3) {
				this.ledgerReceiverId = options.ledgerReceiverId;
				this.getLedgerReceiverById();
			}

		},
		onShow() {
			if (app.globalData.receiverNo) {
				this.receiverNo = app.globalData.receiverNo;
			}
			if (app.globalData.receiverName) {
				this.receiverName = app.globalData.receiverName;
			}

		},
		onUnload() {
			app.globalData.receiverNo = '';
			app.globalData.receiverName = '';
		},
		methods: {
			//查看所以商户
			jumpMerchantlist() {
				if (this.typeId == 1) {
					uni.navigateTo({
						url: '/pages/index/ledgerReceiverList/ledgerReceiverList'
					})
				}
			},
			// 放大图片
			perImage(item) {
				uni.previewImage({
					current: 0, //预览图片的下标
					urls: [item] //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			//上传图片
			upload() {
				if (this.ledgerReceiverApply.auditStatus == 1 || this.ledgerReceiverApply.auditStatus == 4 || this
					.typeId == 2) {
					return;
				}
				let that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'],
					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						that.uploadFile(tempFilePaths[0]);
					},
					error: function(e) {
						console.log(e);
					}
				});
			},
			//上传
			uploadFile(item) {
				let that = this
				that.translate(item, 0.2, imgURL => {
					const uploadTask = uni.uploadFile({
						url: that.reqUrl + '/fileUpload/uploadBase64File',
						filePath: imgURL,
						header: {
							"Authorization": app.globalData.token
						},
						name: 'file',
						formData: {
							'merId': that.merId,
							'base64File': imgURL
						},
						success: function(uploadFileRes) {
							that.entrustFilePath = JSON.parse(uploadFileRes.data).return_data[0];
						}
					});
				})
			},
			/**
			 * H5端图片压缩
			 *  参数说明：
			 *  imgSrc 图片url
			 *  scale缩放比例 0-1
			 *  返回base64
			 *  callback 回调设置返回值 
			 */
			translate(imgSrc, scale, callback) {
				var img = new Image();
				img.src = imgSrc;
				img.onload = function() {
					var that = this;
					var h = that.height; // 默认按比例压缩
					var w = that.width;
					var canvas = document.createElement('canvas');
					var ctx = canvas.getContext('2d');
					var width = document.createAttribute("width");
					width.nodeValue = w;
					var height = document.createAttribute("height");
					height.nodeValue = h;
					canvas.setAttributeNode(width);
					canvas.setAttributeNode(height);
					ctx.drawImage(that, 0, 0, w, h);
					var base64 = canvas.toDataURL('image/jpeg', scale); //压缩比例
					canvas = null;
					callback(base64);
				}
			},
			//查询详情
			getLedgerReceiverById() {
				uni.showLoading({
					title: '加载中'
				})
				let datas = {
					"ledgerReceiverId": this.ledgerReceiverId
				}
				getLedgerReceiverById(datas).then(res => {
					uni.hideLoading();
					if (res.return_code == '000000') {
						this.ledgerReceiverApply = res.return_data;
						this.receiverNo = res.return_data.receiverNo;
						this.receiverName = res.return_data.receiverName;
						if (this.typeId == 2 && (res.return_data.auditStatus == 3 || res.return_data.auditStatus ==
								2 || res.return_data.auditStatus == 1)) {
							this.entrustFilePath = res.return_data.entrustFilePath;
						}

						if (this.typeId == 2 && res.return_data.auditStatus == 4) {
							this.entrustFilePath = res.return_data.relieveEntrustFilePath;
						}

						if (this.typeId == 2 && res.return_data.auditStatus == 5) {
							this.entrustFilePath = res.return_data.relieveEntrustFilePath;
						}
						if (this.typeId == 3 && res.return_data.status == 2 && res.return_data.auditStatus == 3) {
							this.entrustFilePath = res.return_data.relieveEntrustFilePath;
						}
					} else {
						uni.showToast({
							title: res.return_msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			//提交审核
			submitbtn() {
				if (!this.receiverNo) {
					uni.showToast({
						title: '请输入或选择接收方名称',
						icon: "none",
						duration: 2000
					});
					return;
				}
				if (!this.receiverName) {
					uni.showToast({
						title: '请输入接收方编号',
						icon: "none",
						duration: 2000
					});
					return;
				}
				if (!this.entrustFilePath) {
					uni.showToast({
						title: '请上传合作协议',
						icon: "none",
						duration: 2000
					});
					return;
				}
				uni.showModal({
					title: '提交审核',
					content: '确认信息是否正确。',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '提交审核中...'
							})

							if (this.typeId == 1) {
								let datas = {
									"merLedgerId": this.merLedgerId,
									"receiverNo": this.receiverNo,
									"receiverName": this.receiverName,
									"entrustFilePath": this.entrustFilePath
								}
								merLedgerReceiverApply(datas).then(res => {
									uni.hideLoading();
									if (res.return_code == '000000') {
										uni.showToast({
											title: '提交成功',
											icon: 'none',
											duration: 2000,
											success() {
												setTimeout(() => {
													uni.navigateBack({})
												}, 2000);
											}
										})
									} else {
										uni.showToast({
											title: res.return_msg,
											icon: 'none',
											duration: 2000
										})
									}
								})
							}

							if (this.typeId == 3) {
								let datas = {
									"merLedgerId": this.merLedgerId,
									"receiverNo": this.receiverNo,
									"receiverName": this.receiverName,
									"relieveEntrustFilePath": this.entrustFilePath
								}
								merLedgerReceiverDelApply(datas).then(res => {
									uni.hideLoading();
									if (res.return_code == '000000') {
										uni.showToast({
											title: '提交成功',
											icon: 'none',
											duration: 2000,
											success() {
												setTimeout(() => {
													uni.navigateBack({})
												}, 2000);
											}
										})
									} else {
										uni.showToast({
											title: res.return_msg,
											icon: 'none',
											duration: 2000
										})
									}
								})
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.username {
		width: calc(100% - 90upx);
		height: 100upx;
		display: flex;
		align-items: center;
		background-color: rgba($color: #ffffff, $alpha: 0.1);
		border-bottom: 1px solid #f6f6f6;
		padding: 8upx 45upx;

		input {
			width: 50%;
			height: 50upx;
			font-size: 16px;
			color: #333333;
			font-weight: blod;
		}

		.namecont {
			color: #666666;
			width: 28%;
		}
	}

	.btn {
		color: #FFFFFF;
		background-color: #0083f5;
		width: 90%;
		margin-left: 5%;
		margin-top: 80rpx;
		height: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10rpx;
		font-size: 40rpx;
	}

	.notes {
		width: calc(100% - 90upx);
		display: flex;
		align-items: center;
		background-color: rgba($color: #ffffff, $alpha: 0.1);
		border-bottom: 1px solid #f6f6f6;
		padding: 20rpx 45rpx;
		color: #bfbfbf;

	}
</style>