<template>
	<view class="container">
		<view class="goback-box" @click="toBack"><image class="goback" src="../../static/img/fanhui.png" mode=""></image></view>
		<view class="header">提币 </view>

		<view class="list-box">
			<view class="img"><image src="../../static/img/zhuanzhang-bg.png" mode=""></image></view>
			<view class="list flex">
				<view class="flex_item list-item">
					<image :src="logo"></image>
					<view>{{ name }}</view>
				</view>
				<view class="flex_item list-tpl">
					<view class="content" @click="useOutClickSide"><selectss ref="easySelect" :options="moneyTypeList" :value="name" @selectOne="selectOne"></selectss></view>
					<image src="../../static/img/jiantou.png"></image>
				</view>
			</view>
		</view>
		<view class="from-box">
			<view class="from-title">提币地址</view>
			<input class="input-box" type="text" v-model="addr" placeholder="请输入提币地址" />
			<view class="from-title">数量</view>
			<view class="flex input-tpl">
				<input class="input-box" type="number" v-model="num" :placeholder="'最低数量 ' + less + name" />
				<view class="all" @click="num = money">全部</view>
			</view>
			<view class="all-num">
				可用
				<text>{{ money * 1 }}</text>
				{{ name }}
			</view>
			<view class="submit" @click="cash">确定</view>
			
			<view class="tpl-box" v-show="showText == true">提币数量在{{ less }}-10000.0个之间，认真核对提币地址；手续费：{{ data.service }}{{ data.service_type }}</view>
		</view>
		<view class="curtain" :class="{ ishiden: isHiden }" @touchmove.stop.prevent="moveHandle">
			<view class="psw-wrapper">
				<view class="psw-title">请输入支付密码</view>
				<input type="password" v-model="password" class="psw-ipt" />
				<view class="psw-btn">
					<text @click="cancel">取消</text>
					<text class="psw-qd" @click="pswQd">确定</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import { cash, cashmoney_type, calculator } from '@/api/finance.js';
import selectss from '@/components/select.vue';
export default {
	components: {
		selectss
	},
	data() {
		return {
			moneyTypeList: [],
			name: '',
			code: '',
			logo: '',
			money: '',
			less: '',
			addr: '',
			num: '',
			isHiden: true,
			data: '',
			showText: false,
			password: ''
		};
	},
	onLoad(option) {
		console.log(option);
		if (option.name) {
			this.name = option.name;
			this.logo = option.logo;
			this.code = option.code;
			this.money = option.money;
			this.less = option.less;
		}
		this.moneyType();
	},
	onShow() {},
	watch: {
		num(newVal, oldVal) {
			this.calculator();
		}
	},
	methods: {
		// 所有币种
		async moneyType() {
			let obj = this;
			cashmoney_type({}).then(({ data }) => {
				obj.moneyTypeList = data;
				if (obj.logo == '') {
					obj.logo = obj.moneyTypeList[0].LOGO;
					obj.name = obj.moneyTypeList[0].name;
					obj.code = obj.moneyTypeList[0].code;
					obj.money = obj.moneyTypeList[0].wallet.money;
					obj.less = obj.moneyTypeList[0].less;
				}
			});
		},
		calculator() {
			let obj = this;
			calculator({
				money_type: obj.code,
				money: obj.num
			}).then(({ data }) => {
				console.log(data);
				obj.data = data;
				obj.showText = true;
			});
		},
		cash() {
			let obj = this;
			if (obj.code == '') {
				obj.$api.msg('请选择币种！');
				return;
			}
			if (obj.addr == '') {
				obj.$api.msg('请输入提币地址！');
				return;
			}
			if (obj.num == '') {
				obj.$api.msg('请输入提币数量！');
				return;
			}
			if (obj.num < obj.less) {
				obj.$api.msg('最低数量不能低于' + obj.less + '!');
				return;
			}
			this.isHiden = false;
		},
		pswQd() {
			const obj = this;
			if (this.password == '') {
				obj.$api.msg('请输入密码');
			}
			cash({
				money_type: obj.code,
				money: obj.num,
				address: obj.addr,
				password: obj.password
			}).then(data => {
				obj.money = '';
				obj.address = '';
				obj.password = '';
				obj.$api.msg(data.msg);
				this.isHiden = true;
			});
		},
		cancel() {
			this.password = '';
			this.isHiden = true;
		},
		selectOne(options) {
			this.logo = options.LOGO;
			this.name = options.name;
			this.code = options.code;
			this.money = options.wallet.money;
			this.less = options.less;
		},
		useOutClickSide() {
			this.$refs.easySelect.hideOptions && this.$refs.easySelect.hideOptions();
		},
		nav(url) {
			uni.navigateTo({
				url: url
			});
		},
		toBack(){
			uni.navigateBack({
			    delta: 1
			});
		}
	}
};
</script>

<style lang="scss">
page {
	min-height: 100%;
	background-color: #ffffff;
	.container {
		width: 100%;
	}
}

.list-box {
	padding: 104rpx 30rpx 60rpx;
	height: 350rpx;
	.img {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 440rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.list {
		position: relative;
		z-index: 10;
		background-color: #ffffff;
		border-radius: 15rpx;
		padding: 15rpx 23rpx;
		.list-item {
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;
			image {
				width: 43rpx;
				height: 43rpx;
				margin-right: 15rpx;
			}
		}
		.list-tpl {
			image {
				width: 15rpx;
				height: 25rpx;
				margin-left: 20rpx;
			}
		}
	}
}
.from-box {
	margin: 74rpx 30rpx;
	padding: 44rpx 25rpx;
	background-color: #ffffff;
	border-radius: 15rpx;
	position: relative;
	top: -180rpx;
	.from-title {
		font-size: 24rpx;
		font-weight: bold;
		color: #333333;
	}
	.input-box {
		font-size: 26rpx;
		font-weight: 500;
		color: #666666;
		margin: 35rpx 0rpx;
	}
	.all {
		font-size: 30rpx;
		font-weight: 500;
		color: #44969D;
	}
	.all-num {
		font-size: 24rpx;
		font-weight: bold;
		color: #333333;
	}
	.submit {
		background: linear-gradient(90deg, #60BAB0, #60BAB0, #45969B);
		margin-top: 165rpx;
		color: #ffffff;
		text-align: center;
		padding: 26rpx 0rpx;
		border-radius: 15rpx;
	}

	.tpl-box {
		text-align: left;
		font-size: 28rpx;
		font-weight: 500;
		color: #fb3a2f;
		margin-top: 26rpx;
	}
}
.jilv {
	margin-top: 30rpx;
	text-align: center;
	color: #999999;
	font-size: 30rpx;
}
.curtain {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	background-color: rgba($color: #000000, $alpha: 0.2);
	.psw-wrapper {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -100%);
		width: 548.6rpx;
		height: 344.4rpx;
		background-color: #ffffff;
		border-radius: 15rpx 15rpx;
		.psw-title {
			width: 100%;
			font-size: 35rpx;
			padding: 43rpx 0 49rpx;
			text-align: center;
			font-weight: 800;
		}
		.psw-ipt {
			display: block;
			background-color: #dce3ed;
			height: 90rpx;
			width: 464rpx;
			padding-left: 30rpx;
			margin: 0 auto;
			font-size: 80rpx;
		}
		.psw-btn text {
			display: inline-block;
			text-align: center;
			width: 50%;
			padding-top: 29rpx;
			font-size: 35rpx;
		}
		.psw-qd {
			color: #5771df;
		}
	}
}
.ishiden {
	display: none;
}
.goback-box {
		position: absolute;
		left: 18rpx;
		top: 0;
		height: 80rpx;
		display: flex;
		align-items: center;
	}
	.goback {
		z-index: 100;
		width: 34rpx;
		height: 34rpx;
	}
	.header {
		color: #FFFFFF;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 80rpx;
		font-size: 32rpx;
		font-weight: 700;
		z-index: 99;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>