<template>
	<view class="xkl-com-bg">
		<view style="height: 20rpx"></view>
		<view style="font-size: 30rpx; color: #232323">可提现 ￥{{ money }}</view>
		<view style="height: 20rpx"></view>
		<view style="background-color: #ffffff; border-radius: 12rpx; padding: 30rpx">
			<u--form labelPosition="top" :model="form" :rules="rules" ref="uForm" errorType="border-bottom" labelWidth="300rpx">
				<u-form-item label="提现金额" prop="money" borderBottom>
					<u--input v-model="form.money" type="number" placeholder="请输入提现金额" border="none"></u--input>
				</u-form-item>
				<u-form-item label="手机号">
					<u-input v-model="shopinfo.mobile" disabled placeholder="" />
				</u-form-item>
				<u-form-item label="验证码" prop="code" borderBottom>
					<u-code-input v-model="form.code" :maxlength="4" mode="line"></u-code-input>
					<view slot="right">
						<u-toast ref="uToast"></u-toast>
						<u-code :seconds="code.seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
						<u-button type="primary" @tap="getCode">{{ code.tips }}</u-button>
					</view>
				</u-form-item>
			</u--form>
			<view style="height: 30rpx"></view>
			<view style="color: #f29100">提现须知</view>
			<view style="height: 10rpx"></view>
			<view style="font-size: 28rpx; color: #909399">
				<view>1.最低提现{{ w.min_money }}元，100的倍数，单人单月限额9万；</view>
				<view style="height: 10rpx"></view>
				<view>2.根据国家税务标准，提现申请发起规则如下：</view>
				<view style="height: 30rpx"></view>
				<view class="listTable">
					<scroll-view class="scroll-view_H" scroll-x="true">
						<view class="listTable_header">
							<view v-for="(item,inde) in list_table" :key="index">{{item.title}}</view>
						</view>
						<view class="listTable_header" v-for="(item,inde) in list_data" :key="index">
							<view>{{item.arrive_day}}号{{item.arrive_day == 30 || item.arrive_day == 31 ? '(月底)' : ''}}到账</view>
							<view>{{item.apply_min}}号-{{item.apply_max}}号{{item.end_hour}}:00</view>
							<view>{{item.fee}}%</view>
						</view>
						<view class="listTable_header" style="width: 632rpx;border: 1rpx solid #ccc;padding: 10rpx 10rpx;">
							每个自然日的9号、10号、19号、20号以及月底（当月最后两天）发起的提现申请都将会被驳回，此类发起提现用户需在下一个提现申请窗口期内，再次提交提现申请，才会被受理处理。
						</view>
					</scroll-view>
				</view>
				<view style="height: 30rpx"></view>
				<view>3.若提现申请发起日和财务付款日系节假日等非工作日的，则处理日期将顺延至下一个工作日进行。</view>
				
				<!-- <view>2.根据国家税务标准，提现征收{{w.fee}}%的手续费；</view>
				<view style="height: 10rpx;"></view>
				<view>3.到账时间T+1，到账金额(提现金额 - 手续费)。</view> -->
			</view>
		</view>
		<view>
			<u-divider text="选择银行卡"></u-divider>
			<u-button @click="tochard">添加银行卡</u-button>
			<view style="height: 20rpx"></view>
			<view
				@click="check(item)"
				v-for="(item, index) in items"
				:key="index"
				:class="item.id == form.acc_id ? 'xkl_cur' : 'xkl_no'"
				style="background-color: #ffffff; border-radius: 12rpx; padding: 20rpx; margin-bottom: 20rpx"
			>
				<view class="u-flex u-flex-y-center" style="font-size: 28rpx">
					<view>
						<u-tag :text="config.role[item.role]" size="mini" type="success" plain plainFill></u-tag>
					</view>
					<view style="width: 30rpx"></view>
					<view style="font-size: 26rpx">{{ item.realname }}</view>
					<view style="width: 30rpx"></view>
					<view style="font-size: 26rpx">{{ item.mobile }}</view>
				</view>
				<view style="height: 20rpx"></view>
				<view style="color: #232323">
					<view style="font-size: 28rpx">{{ item.subname }}</view>
					<view style="font-size: 28rpx">{{ item.num }}</view>
					<view style="height: 10rpx"></view>
					<view style="font-size: 28rpx">{{ item.idcard }}</view>
				</view>
			</view>
		</view>
		<view style="height: 30rpx"></view>
		<u-button @click="withdraw()" type="primary">提交申请</u-button>
		<view style="height: 100rpx"></view>
	</view>
</template>

<script>
let self;
export default {
	data() {
		return {
			items: [],
			config: null,
			form: {
				money: '',
				acc_id: '',
				code: ''
			},
			shopinfo: {
				mobile: ''
			},
			w: {
				day: '',
				min_money: ''
			},
			money: 0,
			rules: {
				money: [
					{
						required: true,
						message: '请输入提现金额',
						trigger: ['blur', 'change']
					}
				],
				code: [
					{
						required: true,
						message: '请输入验证码',
						trigger: ['blur', 'change']
					}
				]
			},
			code: {
				tips: '获取验证码',
				// refCode: null,
				seconds: 60
			},
			list_table: [
				{ title: '计划到账时间', name: 'arrive_day' },
				{ title: '提现-申请时间', name: 'apply_min' },
				// { title: '最晚申请', name: 'apply_max' },
				{ title: '提现-手续费', name: 'fee' }
			],
			list_data:[]
		};
	},
	onLoad(option) {
		self = this;
		if (option && option.id) {
			self.form.acc_id = option.id;
		}
		self.shopinfo = self.$store.state.auth.user;
		this.tableList()
	},
	onShow() {
		self.getAccountItems();
	},
	onReady() {
		//onReady 为uni-app支持的生命周期之一
		self.$refs.uForm.setRules(self.rules);
	},
	methods: {
		tableList(){
			self.$http.get('/shop/v10/withdraw_config/items', self.form).then(({ data, success, msg }) => {
				if (success) {
					this.list_data = data
				} else {
					uni.showToast({
						title: msg,
						icon: 'none'
					});
				}
			});
		},
		codeChange(text) {
			self.code.tips = text;
		},
		getCode() {
			if (self.shopinfo.mobile.length != 11) {
				uni.$u.toast('请输入手机号');
				return;
			}
			if (self.$refs.uCode.canGetCode) {
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码'
				});
				self.$http
					.get('/com/sms/sendcode', {
						mobile: self.shopinfo.mobile
					})
					.then((res) => {
						if (res.success) {
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							uni.$u.toast('验证码已发送，有效期5分钟');
							// 通知验证码组件内部开始倒计时
							self.$refs.uCode.start();
						}
					});
			} else {
				uni.$u.toast('倒计时结束后再发送');
			}
		},
		end() {
			//uni.$u.toast('倒计时结束');
		},
		start() {
			//uni.$u.toast('倒计时开始');
		},
		tochard() {
			uni.navigateTo({
				url: '/pages/wallet/account/index?show=1'
			});
		},
		check(item) {
			self.form.acc_id = item.id;
		},
		withdraw() {
			this.$refs.uForm
				.validate()
				.then((res) => {
					self.$http.get('/shop/v10/wallet/withdraw', self.form).then(({ data, success, msg }) => {
						if (success) {
							uni.navigateBack();
						} else {
							uni.showToast({
								title: msg,
								icon: 'none'
							});
						}
					});
				})
				.catch((errors) => {
					uni.$u.toast(errors[0].message);
				});
		},
		getAccountItems() {
			self.$http.get('/shop/v10/account/items').then(({ data, success }) => {
				self.items = data.items;
				self.config = data.config;
				self.w = data.shop_withdraw;
				self.money = data.money;

				if (data.items.length) {
					self.form.acc_id = data.items[0].id;
				}
			});
		}
	}
};
</script>

<style lang="scss">
.xkl_cur {
	border: 1px solid #71d5a1;
}

.xkl_no {
	border: 1px solid #ffffff;
}

.scroll-view_H {
	white-space: normal;
	width: 100%;
}
.scroll-view-item_H {
	display: inline-block;
	width: 100%;
	height: 300rpx;
	line-height: 300rpx;
	text-align: center;
	font-size: 36rpx;
}

.listTable {
	width: 100%;
	&_header {
		width: 631rpx;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		font-size: 26rpx;
		view{
			// min-width: 220rpx;
			flex: 1;
			padding: 10rpx 0rpx;
			text-align: center;
			border: 1rpx solid #ccc;
			box-sizing: border-box;
		}
	}
}
</style>
