<template>
	<view class="containear bg-w">
		<u-tabs v-if="type == 2" class="bg-w" :list="tabsList" @click="handlerTabClick"></u-tabs>
		<u--form
			:model="model1"
			:rules="rules"
			ref="uForm"
			labelPosition="left"
			labelWidth="90">
			<u-form-item
				label="转账类型"
				prop="form.transferType"
				borderBottom
				@click="showTransferType = true; hideKeyboard()"
				ref="item1"
				v-if="type == 2 && tabsIndex == 1"
			>
				<u--input
					:value="transferType != null ? actions[transferType]['name']:''"
					disabled
					disabledColor="#ffffff"
					placeholder="请选择转账类型"
					border="none"
				></u--input>
					<u-icon
						slot="right"
						name="arrow-right"
					></u-icon>
			</u-form-item>
			<u-form-item
				label="转入账号"
				prop="form.proceedUsername"
				borderBottom
			>
				<u--input
					v-model="model1.form.proceedUsername"
					disabledColor="#ffffff"
					placeholder="请输入转入账号"
					border="none"
				></u--input>
				<u-button
					slot="right"
					@tap="handlerCheck"
					text="校验"
					type="success"
					size="mini"
					:disabled="disabled1"
				></u-button>
			</u-form-item>
			<u-form-item
				label="账号昵称"
				prop="nickname"
				borderBottom
			>
				<u--input
					v-model="nickname"
					disabledColor="#ffffff"
					disabled
					placeholder="账号昵称"
					border="none"
				></u--input>
			</u-form-item>
			<u-form-item
				label="转账数量"
				prop="form.transferAccount"
				borderBottom
			>
				<u--input
					type="number"
					v-model="model1.form.transferAccount"
					disabledColor="#ffffff"
					placeholder="请输入转账数量"
					border="none"
				></u--input>
			</u-form-item>
			<u-form-item
				label="备注"
				prop="form.remar"
				borderBottom
			>
				<u--input
					v-model="model1.form.remark"
					disabledColor="#ffffff"
					placeholder="请输入备注"
					border="none"
				></u--input>
			</u-form-item>
			<u-form-item
				label="验证码"
				prop="form.code"
				borderBottom
				class="flex"
			>
				<u--input
					v-model="model1.form.code"
					disabledColor="#ffffff"
					placeholder="请输入验证码"
					border="none"
				></u--input>
				<sms :phone="userInfo.mobile" :username="userInfo.username" typeCode="5"></sms>
				<!-- <u-button
					slot="right"
					@tap="getCode"
					:text="tips"
					type="success"
					size="mini"
					:disabled="disabled1"
				></u-button> -->
			</u-form-item>
			<u-form-item
				label="支付密码"
				prop="form.payPassword"
				borderBottom
			>
				<u--input
					type="password"
					v-model="model1.form.payPassword"
					disabledColor="#ffffff"
					placeholder="请输入支付密码"
					border="none"
				></u--input>
			</u-form-item>
		</u--form>
		<u-button
			type="primary"
			text="提交"
			customStyle="margin-top: 50px"
			@click="handlerSubmit"
		></u-button>
		<u-action-sheet
			:show="showTransferType"
			:actions="actions"
			title="请选择转账类型"
			@close="showTransferType = false"
			@select="handlerTransferType"
		>
		</u-action-sheet>
		<u-code
			ref="uCode"
			@change="codeChange"
			seconds="60"
			@start="disabled1 = true"
			@end="disabled1 = false"
		></u-code>
	</view>
</template>

<script>
	import url from '@/common/http/url.js';
	import sms from "@/components/sms.vue";
	import { mapState } from 'vuex'
	export default {
		components: {
			sms
		},
		data() {
			return {
				disabled1: false,
				tips: '获取验证码',
				tabsList: [
					{ name: '转绿色积分'},
					{ name: '转管理钱包'}
				],
				tabsIndex: 0,
				transferType: 0,
				nickname: null,
				model1: {
					form: {
						proceedUsername: null,
						transferAccount: null,
						code: null,
						payPassword: null
					}
				},
				showTransferType: false,
				actions: [
					{
						name: '转账给自己',
						index: 0
					},
					{
						name: '转账给他人',
						index: 1
					}
				],
				rules: {
					'form.proceedUsername': {
						type: 'string',
						required: true,
						message: '请输入转入账号',
						trigger: ['blur', 'change']
					},
					'form.transferAccount': {
						type: 'string',
						required: true,
						message: '请输入转账数量',
						trigger: ['blur', 'change']
					},
					'form.code': {
						type: 'string',
						required: true,
						message: '请输入验证码',
						trigger: ['blur', 'change']
					},
					'form.payPassword': {
						type: 'string',
						required: true,
						message: '请输入支付密码',
						trigger: ['blur', 'change']
					},
				},
				type: null
			};
		},
		onReady() {
				//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			console.log('this.$refs.uForm', this.$refs.uForm)
		    this.$refs.uForm.setRules(this.rules)
		},
		onLoad(e) {
			this.type = e.type || null;
			let title = ''
			// if (e.type == 1) {
			// 	title = '转账'
			// }
			// uni.setNavigationBarTitle({
			// 	title: title
			// })
		},
		computed: {
			...mapState(["userInfo"])
		},
		methods: {
			handlerCheck () {
				let userName = this.model1.form.proceedUsername
				if (!userName) return this.$msg('请输入转入账号')
				this.$http("GET", url.user.getUserInfo, {
					username: userName
				}).then(({ code, data }) => {
					if (code == 200) {
						if (data == null) this.$msg('用户不存在');
						else this.nickname = data.nickname;
					}
				})
			},
			handlerTransferType (e) {
				console.log(e)
				let { index } = e;
				this.transferType = index;
				if (index == 0) {
					this.model1.form.proceedUsername = this.userInfo.username;
					this.model1.form.nickname = this.userInfo.nickname;
					
				} else {
					this.model1.form.proceedUsername = '';
					this.model1.form.nickname = '';
				}
			},
			handlerTransfer () {
				if (!this.nickname) return this.$msg('请校验用户是否存在');
				if (this.model1.form.transferAccount <=0) return this.$msg('转账数量必须大于0')
				let _type  = null;
				if( this.type == 2) {
					_type = this.transferType == 0 ? 4 : 6
				} else {
					_type = 2
				}
				this.$httpJson('POST', url.asset.transferAccount, {
					type:2,
					memberUsername: this.userInfo.username,
					mobile: this.userInfo.mobile,
					...this.model1.form
				}).then(({ code, msg }) => {
					this.$msg(msg);
					if (code == 200) {
						setTimeout(() => {
							uni.navigateBack()
						},2000)
					}
				})
			},
			handlerSubmit () {
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				if (this.tabsIndex == 1) {
					if (this.transferType == null)return this.$msg('请选择转账类型');
				}
				
				
				this.$refs.uForm.validate().then(res => {
					this.handlerTransfer()
				}).catch(errors => {
					// uni.$u.toast('校验失败')
				})
			},
			handlerTabClick (e) {
				console.log(e);
				let { index } = e;
				this.tabsIndex = index;
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
								// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
									// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
									// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			hideKeyboard () {
				uni.hideKeyboard()
			}
		}
	}
</script>

<style lang="scss">
	/deep/.u-tabs__wrapper__nav__item {
		flex: 1;
	}
	.containear {
		height: 100%;
		padding: 0 20rpx;
	}
</style>
