<template>
	<view class="cash-form">
		<form @submit="formSubmit" @reset="formReset">
			<view class="bg-white cash-box f28">
				<!-- <picker class="ww100" :range="accountList" :value="account_index" @change="accountPickerChange"
					range-key="accountName">
					
				</picker> -->
				<!-- <view>{{ '奖金账户' }}</view> -->
				<view class="d-s-c ww100 border-b" @click="listShow = true">
					<text class="key-name">
						<text class="domation mr10">*</text>
						{{ $t('MY_WAL_14') }}
					</text>
					<view class="input-box ml20 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].accountName"
							disabled="true" /> -->
						<view class="ml20 f32 flex-1 cash-input">{{ account_index == '' ? $t('CK_KS_38') : account_index }}</view>
						<view class="icon iconfont fb icon-jiantou"></view>
					</view>
				</view>
				<u-picker
					:cancelText="$t('MN_F_31')"
					:confirmText="$t('MN_F_32')"
					@cancel="listShow = false"
					:show="listShow"
					ref="uPicker"
					:columns="[accountList]"
					@confirm="accountPickerChange"
					keyName="accountName"
				></u-picker>

				<view class="d-s-c border-b">
					<text class="key-name"></text>
					<view class="input-box ml20 flex-1 d-b-c">
						<view class="f28 gray9">
							{{ $t('MY_WAL_15') }}:
							<text class="domation">{{ money }}</text>
						</view>
					</view>
				</view>
				<view class="d-s-c border-b">
					<text class="key-name">
						<text class="domation mr10">*</text>
						{{ $t('MY_WAL_16') }}
					</text>
					<view class="disabled-input f32 gray3">{{ userInfo.memberCode }}</view>
				</view>
				<view class="d-s-c border-b">
					<text class="key-name">
						<text class="domation mr10">*</text>
						{{ $t('MY_WAL_17') }}
					</text>
					<view class="disabled-input f32 gray3">{{ userInfo.memberName }}</view>
				</view>
				<view class="d-s-c border-b">
					<text class="key-name">
						<text class="domation mr10">*</text>
						{{ $t('MY_WAL_18') }}
					</text>
					<input
						v-model="form.toMemberCode"
						class="ml20 f32 flex-1 cash-input"
						name="name"
						type="text"
						value=""
						placeholder-class="grary9"
						:placeholder="$t('S_C_70')"
						@blur="changeUser"
					/>
				</view>
				<view class="d-s-c border-b">
					<text class="key-name">
						<text class="domation mr10">*</text>
						{{ $t('MY_WAL_19') }}
					</text>
					<view class="disabled-input f32 gray3">{{ memberName }}</view>
				</view>
				<view class="d-s-c border-b">
					<text class="key-name">
						<text class="domation mr10">*</text>
						{{ $t('MY_WAL_20') }}({{ currencyIcon() }})
					</text>
					<input v-model="form.transferMoney" class="ml20 f32 flex-1 cash-input" name="name" type="digit" placeholder-class="grary9" :placeholder="$t('S_C_70')" />
				</view>
				<!-- <picker :range="accountList" :value="account_index_in" @change="accountInPickerChange"
					range-key="accountName">
					<view class="d-s-c border-b">
						<text class="key-name"><text class="domation mr10">*</text>转入账户</text>
						<view class="input-box ml20 flex-1 d-b-c">
							<input class="ml20 f32 flex-1 cash-input" type="text" placeholder-class="grary9"
								placeholder=""
								:value="account_index_in == -1 ? '请选择' : accountList[account_index_in].accountName"
								disabled="true" />
							<view class="icon iconfont fb icon-jiantou"></view>
						</view>
					</view>
				</picker> -->
				<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>
			<view class="addBtn">
				<button form-type="submit" class="f32 mt60 normal-sub-btn">{{ $t('w_0035') }}</button>
			</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">{{$t('w_0335')}}</view>
					<view class="f28 gray3">{{currencyIcon()}}3020</view>
					<button class="pop-btn">{{$t('w_0035')}}</button>
				</view>
			</view>
		</template> -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			form: {
				pkAccount: '',
				memberCode: '',
				toMemberCode: '',
				// pkToAccount: '',
				transferMoney: '',
				remarks: '',
				payPwd: ''
			},
			cardName: '',
			openPassword: true,
			money: '',
			password: '',
			remark: '',
			showPop: false,
			account_index: '',
			accountList: [],
			userInfo: {
				memberCode: '',
				memberName: ''
			},
			account_index_in: -1,
			memberName: '',
			listShow: false
		};
	},
	onLoad: function(options) {
		this.getData();
		this.getUserData();
	},
	methods: {
		/*提交*/
		formSubmit: function(e) {
			let self = this;
			var formdata = self.form;
			if (formdata.pkAccount == '') {
				uni.showToast({
					title: self.$t('CK_KS_38') + self.$t('MY_WAL_14'),
					duration: 1000,
					icon: 'none'
				});
				return false;
			}
			if (formdata.memberCode == '') {
				uni.showToast({
					title: self.$t('S_C_70') + self.$t('MY_WAL_16'),
					duration: 1000,
					icon: 'none'
				});
				return false;
			}
			if (formdata.toMemberCode == '') {
				uni.showToast({
					title: self.$t('S_C_70') + self.$t('MY_WAL_18'),
					duration: 1000,
					icon: 'none'
				});
				return false;
			}
			// if (formdata.pkToAccount == '') {
			// 	uni.showToast({
			// 		title: '请选择转入账户',
			// 		duration: 1000,
			// 		icon: 'none'
			// 	});
			// 	return false;
			// }
			if (formdata.transferMoney == '') {
				uni.showToast({
					title: self.$t('S_C_70') + self.$t('MY_WAL_20'),
					duration: 1000,
					icon: 'none'
				});
				return false;
			}
			if (formdata.payPwd == '') {
				uni.showToast({
					title: self.$t('S_C_70') + self.$t('MY_WAL_21'),
					duration: 1000,
					icon: 'none'
				});
				return false;
			}
			// if (formdata.remarks == '') {
			// 	uni.showToast({
			// 		title: '请输入备注',
			// 		duration: 1000,
			// 		icon: 'none'
			// 	});
			// 	return false;
			// }

			self._post('member/api/transfer/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
				});
			});
		},
		accountPickerChange: function(e) {
			this.account_index = e.value[0].accountName;
			this.form.pkAccount = e.value[0].pkId;
			this.listShow = false;
			// this.account_index = e.detail.value;
			// this.form.pkAccount = this.accountList[this.account_index].pkId;
			this.getBalanceData();
		},
		accountInPickerChange: function(e) {
			this.account_index_in = e.detail.value;
			this.form.pkToAccount = this.accountList[this.account_index_in].pkId;
		},
		changeUser(e) {
			if (e.detail.value == '') {
				uni.showToast({
					title: self.$t('S_C_70') + self.$t('MY_WAL_18'),
					duration: 1000,
					icon: 'none'
				});
				return false;
			}
			this.form.toMemberCode = e.detail.value;
			this.getUser();
		},
		showSubmit(e) {
			this.openPassword = true;
		},
		hideSubmit(e) {
			this.openPassword = false;
		},
		// 获取省市区
		getUser() {
			let self = this;
			self.loadding = true;
			self._get(
				'member/api/transfer/chinese-name',
				{
					memberCode: self.form.toMemberCode
				},
				function(res) {
					if (res.code == 200) {
						self.memberName = res.memberName;
					}
					self.loadding = false;
					uni.hideLoading();
				}
			);
		},
		// 获取用户信息
		getUserData() {
			let self = this;
			self.loadding = true;
			self._get('member/api/member/get-info', {}, function(res) {
				if (res.code == 200) {
					self.userInfo = res.data;
					self.form.memberCode = res.data.memberCode;
				}
				self.loadding = false;
				uni.hideLoading();
			});
		},
		// 获取省市区
		getData() {
			let self = this;
			self.loadding = true;
			self._get('member/api/transfer/transfer-account', {}, function(res) {
				self.accountList = res.data;
				self.loadding = false;
				uni.hideLoading();
			});
		},
		/*余额信息*/
		getBalanceData() {
			let self = this;
			self.loadding = true;
			self._get(
				'member/api/transfer/member-balance',
				{
					pkAccount: self.form.pkAccount
				},
				function(res) {
					if (res.code == 200) {
						self.money = res.data;
					}

					self.loadding = false;
					uni.hideLoading();
				}
			);
		}
	}
};
</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;
	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-jiantou {
	font-size: 28rpx;
	color: #999;
	font-weight: normal;
}

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

.disabled-input {
	width: 493rpx;
	height: 68rpx;
	padding: 0 21rpx;
	line-height: 68rpx;
	background: #f5f5f5;
	flex: 1;
}
</style>
