<template>
	<view class="main">
		<!-- nav -->
		<navigation>{{ pageState === 'addBank' ? i18n.AddBankInformation : i18n.EditBankInformation }}</navigation>
		<!-- #ifdef APP-PLUS -->
		<view class="content">
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="contentH5">
				<!-- #endif -->

				<u--form class="form" :model="bankInfo" :rules="rules" ref="uForm" errorType="toast">
					<view class="inputBody">
						<view class="title">{{ i18n.FirstName }}</view>
						<view class="input-item">
							<u-form-item class="input-item" prop="acctName" ref="item1">
								<u-input class="input" v-model="bankInfo.acctName" color="#fff" fontSize="32rpx"
									border="none" :placeholder="i18n.enterName">
								</u-input>
							</u-form-item>
						</view>
						<view class="title">{{ i18n.Account }}</view>
						<view class="input-item">
							<u-form-item class="input-item" prop="acctId" ref="item1">
								<u-input class="input" v-model="bankInfo.acctId" color="#fff" fontSize="32rpx"
									border="none" :placeholder="i18n.enterAccount">
								</u-input>
							</u-form-item>
						</view>

						<!-- <view class="title">{{ i18n.IDcard }}</view>

						<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
							:maxCount="1">
							
								<image class="add" src="/static/home/id.png" mode="aspectFit" v-if="!bankInfo.certImg"></image>
							
								<image :src="baseURL+bankInfo.certImg" 
								mode="" class="add" v-if="bankInfo.certImg"></image>
							</u-upload> -->
							
					</view>

					<view class="inputBody">
						<view class="title">{{ i18n.BankName }}</view>
						<view class="input-item">
							<u-form-item class="input-item" prop="email" ref="item1">
								<u-input class="input" v-model="bankInfo.bankName" color="#fff" fontSize="32rpx"
									border="none" :placeholder="i18n.enterBankName">
								</u-input>
							</u-form-item>
						</view>
						<view class="title">{{ i18n.BankCode }}</view>
						<view class="input-item">
							<u-form-item class="input-item" prop="bankCode" ref="item1">
								<u-input class="input" v-model="bankInfo.bankCode" color="#fff" fontSize="32rpx"
									border="none" :placeholder="i18n.enterBankCode">
								</u-input>
							</u-form-item>
						</view>
					</view>
				</u--form>

				<u-button class="button" color="#00E8A2" :throttleTime="500" :disabled="btnIsCanClick" @click="bank">
					{{ i18n.Confirm }}
				</u-button>

			</view>




		</view>
</template>

<script>
	import api from '@/utils/api'
	import constant from '@/utils/constant.js';
	import {
		pathToBase64,
		base64ToPath
	} from 'image-tools'
	export default {
		name: "withdrawalRecord",
		data() {
			return {
				baseURL: '',
				fileList1: [],
				rules: {
					acctName: {
						type: 'string',
						required: true,
						message: this.$t('withdrawal').enterName,
						trigger: ['blur', 'change'],
					},
					bankName: {
						type: 'string',
						required: true,
						message: this.$t('withdrawal').enterBankName,
						trigger: ['blur', 'change']
					},
					acctId: {
						type: 'string',
						required: true,
						message: this.$t('withdrawal').enterAccount,
						trigger: ['blur', 'change']
					},
					bankCode: {
						type: 'string',
						required: true,
						message: this.$t('withdrawal').enterBankCode,
						trigger: ['blur', 'change']
					},
				},
				bankInfo: {
					bankCode: null,
					bankName: null,
					acctName: null,
					acctId: null,
				},
				pageState: 'addBank', // 页面状态,是添加还是编辑银行卡

				objData: {},
			};
		},
		computed: {
			i18n() {
				return this.$t("withdrawal");
			},
			btnIsCanClick() {
				if (this.bankInfo.bankCode && this.bankInfo.bankName && this.bankInfo.acctName && this.bankInfo.acctId) {
					return false
				} else {
					return true
				}
			}
		},
		onLoad(option) {
			this.getBank()
			this.baseURL = constant.BASE_URL
		},
		onShow() {},
		methods: {


			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},

			// 新增图片
			async afterRead(event) {
				uni.showLoading({
					title: this.$t("withdrawal").shang,
					mask: true,
				})
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				console.log(event)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						// status: 'uploading',
						// message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			
			uploadFilePromise(url) {
				// #ifdef APP-PLUS
				console.log(url)
				pathToBase64(url)
					.then(path => {
						console.log(path)
						let res=path
						res = res.split(',')[1]
						console.log(res,'res')
						return new Promise((resolve, reject) => {
							api.uploadImg({
								img: res
							}).then(res => {
								uni.hideLoading()
								this.bankInfo.certImg=res
							})
						})
					})
					.catch(error => {
						uni.hideLoading()
						console.error(error)
					})

				// #endif
				// #ifdef H5
				const image = new Image() // 新建一个img标签（还没嵌入DOM节点)
				//blob:http://localhost:8080/b878edea-e649-4f8d-b723-c3f25454141b
				image.src = url;
				image.onload = () => {
					const canvas = document.createElement('canvas')
					canvas.width = image.width
					canvas.height = image.height
					const context = canvas.getContext('2d')
					context.drawImage(image, 0, 0, image.width, image.height);
					let imgUrl = canvas.toDataURL() //图片的base64地址
					imgUrl = imgUrl.split(',')[1]
					return new Promise((resolve, reject) => {
						api.uploadImg({
							img: imgUrl
						}).then(res => {
						this.bankInfo.certImg=res
						console.log(res)
						console.log(this.bankInfo.certImg)
						})
					})

				}
				// #endif
			},




			getBase64(file) {
				return new Promise((resolve, reject) => {
					const reader = new FileReader()
					reader.readAsDataURL(file)
					reader.onload = () => resolve(reader.result)
					reader.onerror = (error) => reject(error)
				})
			},

		
	

			// 获取银行卡信息
			getBank() {
				api.bankCardInfo().then(res => {
					this.bankInfo = res;
					if (this.bankInfo.id) {
						this.pageState = 'editBank' || 'addBank';
					}
				})
			},
			// 修改或添加银行卡
			bank() {
				this.$refs.uForm.validate().then(res => {
					let bankInfo = {
						bankCode: this.bankInfo.bankCode,
						bankName: this.bankInfo.bankName,
						acctName: this.bankInfo.acctName,
						acctId: this.bankInfo.acctId,
						certImg: this.bankInfo.certImg
					}
					if (this.bankInfo.id) {
						bankInfo.id = this.bankInfo.id
					}
					api.bindBank(bankInfo).then(res => {
						if (this.bankInfo.id) {
							uni.$u.toast(this.$t("me").ModifiedSuccessfully)
						} else {
							uni.$u.toast(this.$t("me").addSuccessfully)
						}
						setTimeout(() => {
							uni.navigateBack({})
						}, 600)
					})
				}).catch(errors => {
					console.log('err')
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	
	/deep/ .uicon-camera-fill{
		display:none !important;
	}
	/deep/ .u-upload{
		position:relative;
		.add{
		width: 620rpx !important;
		height: 360rpx !important;
		}
	}

	/deep/ .u-upload__wrap__preview__image {
	width: 620rpx !important;
		height: 360rpx !important;
	}

	/deep/ .u-icon__icon {
		font-size: 32rpx !important;
	}

	/deep/ .u-upload__button {
		width: 620rpx !important;
		height: 360rpx !important;
		background-color: #323045 !important;
	}

	/deep/ .u-form-item__body {
		padding: 0 0;
	}

	.main {

		.content {
			margin-top: 200rpx;
			padding: 32rpx;

			.inputBody {
				overflow: hidden;
				background: #211F32;
				border-radius: 32rpx;
				padding: 32rpx;
				margin-bottom: 32rpx;

				.title {
					font-size: 32rpx;
					color: #A1A0A8;
					margin-bottom: 20rpx;
				}

				.input-item {
					height: 112rpx;
					background: #323045;
					border-radius: 32rpx;
					padding-left: 40rpx;
					margin-bottom: 20rpx;

					.input {
						height: 112rpx;
					}
				}



			}


			.button {
				position: fixed;
				bottom: 40rpx;
				width: 686rpx;
				box-sizing: border-box;
				height: 112rpx;
				background: #00E8A2;
				border-radius: 32rpx;
				font-weight: 700;
				font-size: 32rpx;
				color: #15141F !important;

			}
		}

		.contentH5 {
			margin-top: 100rpx;
			padding: 32rpx;

			.inputBody {
				overflow: hidden;
				background: #211F32;
				border-radius: 32rpx;
				padding: 32rpx;
				margin-bottom: 32rpx;

				.title {
					font-size: 32rpx;
					color: #A1A0A8;
					margin-bottom: 20rpx;
				}

				.input-item {
					height: 112rpx;
					background: #323045;
					border-radius: 32rpx;
					padding-left: 40rpx;
					margin-bottom: 20rpx;

					.input {
						height: 112rpx;
					}
				}



			}


			.button {
				position: fixed;
				bottom: 40rpx;
				width: 686rpx;
				box-sizing: border-box;
				height: 112rpx;
				background: #00E8A2;
				border-radius: 32rpx;
				font-weight: 700;
				font-size: 32rpx;
				color: #15141F !important;

			}
		}


	}
</style>
