<template>
	<view class="cash-form">
		<form @submit="formSubmit" @reset="formReset">
			<view class="bg-white cash-box f28">
				<picker :range="bankList" disabled :value="bank_index" @change="bindPickerChange" range-key="cardNumber">
					<view class="d-s-c border-b">
						<text class="key-name">
							<text class="domation mr10">*</text>
							{{ $t('MY_WAL_24') }}
						</text>
						<view class="input-box flex-1 d-b-c">
							<input
								class="ml20 f32 flex-1 cash-input"
								type="text"
								placeholder-class="grary9"
								placeholder=""
								:value="bank_index == -1 ? $t('CK_KS_38') : bankList[bank_index].cardNumber"
								disabled="true"
							/>
							<!-- <view class="icon iconfont fb icon-icon1"></view> -->
						</view>
					</view>
				</picker>
				<view class="d-s-c border-b">
					<text class="key-name">
						<text class="domation mr10">*</text>
						{{ $t('MY_WAL_26') }}({{ currencyIcon() }})
					</text>
					<input
						@input="upDatainfo"
						class="ml20 f32 flex-1 cash-input"
						name="name"
						type="digit"
						v-model="form.cashAmount"
						placeholder-class="grary9"
						:placeholder="$t('S_C_70')"
					/>
				</view>
				<view class="d-s-c border-b">
					<text class="key-name">
						<text class="domation mr10">*</text>
						{{ $t('MY_WAL_21') }}
					</text>
					<view class="input-box flex-1 d-b-c">
						<input
							class="ml20 f32 flex-1 cash-input"
							name="phone"
							type="text"
							:password="openPassword"
							v-model="form.payPwd"
							placeholder-class="grary9"
							:placeholder="$t('S_C_70')"
						/>
						<image @click="showSubmit" v-if="!openPassword" class="eyes-icon" src="/static/icon/eyes-open.png" mode=""></image>
						<image @click="hideSubmit" v-else class="eyes-icon" src="/static/icon/eyes-close.png" mode=""></image>
					</view>
				</view>
				<view class="d-s-s border-b">
					<text class="key-name">
						<text class="white mr10">*</text>
						{{ $t('MY_WAL_22') }}
					</text>
					<textarea
						class="ml20 flex-1 f32  lh150 addtextarea"
						name="detail"
						placeholder-class="grary9"
						:auto-height="true"
						v-model="form.remarks"
						:placeholder="$t('S_C_70')"
					></textarea>
				</view>
				<view class="mb20">
					<view class="d-s-c border-b" @click="storeShow= true">
						<text class="key-name">
							<text class="domation mr10">*</text>
							{{ $t('MY_WAL_28') }}
						</text>
						<view class="input-box flex-1 d-b-c">
							<view class="ml20 f32 flex-1 cash-input">{{ account_index == '' ? $t('CK_KS_38') : account_index }}</view>
							<!-- <input
								class="ml20 f32 flex-1 cash-input"
								type="text"
								placeholder-class="grary9"
								placeholder=""
								:value="account_index == -1 ? $t('CK_KS_38') : accountList[account_index].pkAccountVal"
								disabled="true"
							/> -->
							<view class="icon iconfont fb icon-icon1"></view>
						</view>
					</view>
					<u-picker
						:cancelText="$t('MN_F_31')"
						:confirmText="$t('MN_F_32')"
						@cancel="storeShow = false"
						:show="storeShow"
						ref="accountList"
						:columns="[accountList]"
						@confirm="accountPickerChange"
						keyName="pkAccountVal"
					></u-picker>
					<!-- <picker :range="accountList" :value="account_index" @change="accountPickerChange" range-key="pkAccountVal">
						<view class="d-s-c border-b">
							<text class="key-name">
								<text class="domation mr10">*</text>
								{{ $t('MY_WAL_28') }}
							</text>
							<view class="input-box flex-1 d-b-c">
								<input
									class="ml20 f32 flex-1 cash-input"
									type="text"
									placeholder-class="grary9"
									placeholder=""
									:value="account_index == -1 ? $t('CK_KS_38') : accountList[account_index].pkAccountVal"
									disabled="true"
								/>
								<view class="icon iconfont fb icon-icon1"></view>
							</view>
						</view>
					</picker> -->
				</view>
				<view class="f24 gray3 account-box">
					<!-- 可提现金额 -->
					<view class="d-b-c">
						<view>{{ $t('MY_WAL_13') }}({{ currencyIcon() }}):</view>
						<view>{{ formatNum(cashAccount.amount) || 0.0 }}</view>
					</view>
					<!-- 账户余额 -->
					<view class="d-b-c">
						<view>{{ $t('MY_WAL_29') }}({{ currencyIcon() }}):</view>
						<view>{{ formatNum(cashAccount.balance) || 0.0 }}</view>
					</view>
					<!-- 提现手续费 -->
					<!-- <view class="d-b-c">
						<view>{{ $t('MY_WAL_30') }}:</view>
						<view>{{ formatNum(cashAccount.srviceCharge) || 0.0 }}</view>
					</view> -->
					<!-- 最低提现额度 -->
					<view class="d-b-c">
						<view>{{ $t('MY_WAL_31') }}({{ currencyIcon() }}):</view>
						<view>{{ formatNum(cashAccount.minAmount) || 0.0 }}</view>
					</view>
					<!-- 最高提现额度 -->
					<!-- <view class="d-b-c">
						<view>{{$t('MN_F_T_90')}}({{ currencyIcon() }}):</view>
						<view>{{ cashAccount.maxAmount || 0.0 }}</view>
					</view> -->
				</view>
			</view>
			<view class="addBtn d-c">
				<button form-type="submit" style="margin-bottom:20rpx" class="f32 normal-sub-btn">{{ $t('ENU_TRADE_T_200') }}</button>
				<view class="f26 tc gray6" @click="gotoPage('/pages/user/my-wallet/cash-detail')">{{ $t('MN_F_T_90') }}</view>
			</view>
		</form>
		<!-- <template v-if="showPop">
			<view class="pop-bg"></view>
			<view class="pop-success" v-if="showPop">
				<view class="d-c d-b-c hh100">
					<view class="d-e-c ww100"><u-icon name="close" size="34rpx" color="#999"></u-icon></view>
					<view><u-icon size="77rpx" name="/static/icon/success.png"></u-icon></view>
					<view class="f30 gray3 fb">提现成功</view>
					<view class="f28 gray3">请等待审核结果</view>
					<button class="pop-btn">{{$t('w_0035')}}</button>
				</view>
			</view>
		</template> -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			form: {
				pkBank: '',
				cashAmount: '',
				remarks: '',
				payPwd: '',
				pkAccount: ''
			},
			showPop: false,
			bank_index: -1,
			account_index: '',
			accountList: [],
			bankList: [],
			openPassword: true,
			cashAccount: {
				amount: '',
				balance: '',
				minAmount: '',
				maxAmount: '',
				srviceCharge: ''
			},
			storeShow:false
		};
	},
	onLoad: function(options) {
		this.getBankData();
		this.getAccountData();
	},
	methods: {
		/*提交*/
		formSubmit: function(e) {
			let self = this;
			var formdata = self.form;
			formdata.pkBank = self.bankList[0].pkId;
			if (formdata.pkBank == '') {
				uni.showToast({
					title: self.$t('w_0302'),
					duration: 1000,
					icon: 'none'
				});
				return false;
			}
			if (formdata.cashAmount == '') {
				uni.showToast({
					title: self.$t('S_C_70') + self.$t('MY_WAL_26'),
					duration: 1000,
					icon: 'none'
				});
				return false;
			}
			if (formdata.payPwd == '') {
				uni.showToast({
					title: self.$t('PER_DA_50'),
					duration: 1000,
					icon: 'none'
				});
				return false;
			}
			if (formdata.remarks == '') {
				uni.showToast({
					title: self.$t('w_0072'),
					duration: 1000,
					icon: 'none'
				});
				return false;
			}
			if (formdata.pkAccount == '') {
				uni.showToast({
					title: self.$t('CK_KS_38') + self.$t('MY_WAL_28'),
					duration: 1000,
					icon: 'none'
				});
				return false;
			}
			self._post('member/api/withdraw/add', formdata, function(res) {
				self.showSuccess(res.msg, function() {
					// #ifndef H5
					uni.navigateBack({
						delta: parseInt(self.delta)
					});
					// #endif
					// #ifdef H5
					history.go(-self.delta);
					// #endif
				});
			});
		},
		showSubmit(e) {
			this.openPassword = true;
		},
		hideSubmit(e) {
			this.openPassword = false;
		},
		bindPickerChange: function(e) {
			this.bank_index = e.detail.value;
			// console.log(this.bank_index);
			this.account_info = this.accountList[this.bank_index];
			this.form.pkBank = this.account_info.pkId;
		},
		upDatainfo() {
			if (!this.form.pkAccount) {
				return;
			}
			this.getBalanceData();
		},
		accountPickerChange: function(e) {
			this.account_index = e.value[0].pkAccountVal;
			this.account_info = e.value[0];
			this.form.pkAccount = this.account_info.pkAccountId;
			// console.log(this.bank_index);
			// console.log(this.form.pkAccountId);
			this.getBalanceData();
		},
		/*余额信息*/
		getBalanceData() {
			let self = this;
			self.loadding = true;
			self._get(
				'member/api/withdraw/show/add',
				{
					pkAccount: self.form.pkAccount,
					cashAmount: self.form.cashAmount
				},
				function(res) {
					if (res.code == 200) {
						self.cashAccount = res.data;
					}
					self.storeShow = false;
					self.loadding = false;
					uni.hideLoading();
				}
			);
		},
		/*获取银行卡号*/
		getBankData() {
			let self = this;
			self.loadding = true;
			self._get('member/api/bank/list', {}, function(res) {
				self.bankList = res.data;
				if (self.bankList.length <= 0) {
					self.gotoPage('/pages/user/card/list', 'redirect');
					return;
				}
				self.bank_index = 0;
				self.loadding = false;
				uni.hideLoading();
			});
		},
		getAccountData() {
			let self = this;
			if (self.loading) {
				return;
			}
			self.loading = true;
			self._get(
				'member/api/wallet/balance',
				{},
				function(res) {
					let list = [];
					if (res.data.memberWalletBalanceVOList.length > 0) {
						res.data.memberWalletBalanceVOList.forEach(item => {
							if (item.isWithdrawal == 0) {
								list.push(item);
							}
						});
					}

					self.accountList = list;

					// self.codeimg = res.img;
				},
				{},
				() => {
					self.loading = false;
				}
			);
		}
	}
};
</script>

<style lang="scss">
.cash-form {
	padding: 0;
	border-radius: 0;
}

.cash-box {
	padding: 0 31rpx 43rpx 27rpx;
}

.cash-form .key-name {
	width: 220rpx;
	min-height: 116rpx;
	line-height: 1.5;
	font-size: 28rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.cash-form .btn-red {
	height: 88rpx;
	line-height: 88rpx;
	border-radius: 44rpx;
	box-shadow: 0 8rpx 16rpx 0 rgba(226, 35, 26, 0.6);
}

.addBtn {
	// position: fixed;
	// bottom: 60rpx;
	// left: 0rpx;
	// margin: 0 auto;
	margin-top: 40rpx;
	width: 750rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.cash-input {
	line-height: 116rpx;
	height: 116rpx;
	box-sizing: border-box;
	font-size: 28rpx;
}

.addtextarea {
	font-size: 28rpx;
	line-height: 1.5;
	padding: 25rpx 0;
}

.icon.icon-icon1 {
	font-size: 28rpx;
	color: #999;
}

.eyes-icon {
	width: 38rpx;
	height: 38rpx;
	margin-left: 20rpx;
}

.account-box {
	width: 705rpx;
	// height: 264px;
	background: #f5f5f5;
	border-radius: 20rpx;
	padding: 38rpx 20rpx;
	line-height: 2;
	box-sizing: border-box;
}
</style>
