<template>
	<view class="content">
		<view class="box padding-b-30">
			<view class="titlebox">
				<view class="titlename padding-l-30">
					兑换文票
				</view>
			</view>
			<view class="row-box">
				<view class="title">兑入云票</view>
				<view class="row flex">
					<view class="flex name-box">
						<image class="nametip" src="../../static/icon/quick2.png" mode="scaleToFill"></image>
						<text class="padding-l-10 name">文票</text>
					</view>
					<input class="input margin-l-10" type="number" v-model="ticketnum" placeholder="请输入整数"
						placeholder-class="placeholder" />
				</view>
			</view>
			<view class="flex-center">
				<image class="tabquick" src="../../static/icon/quick0.png" mode="scaleToFill"></image>
			</view>
			<view class="row-box">
				<view class="title">兑出趣豆<text class="font-size-sm">（余额：{{userInfo.integral}}）</text></view>
				<view class="row flex">
					<view class="flex name-box">
						<image class="nametip" src="../../static/icon/quick1.png" mode="scaleToFill"></image>
						<text class="padding-l-10 name">趣豆</text>
					</view>
					<view class="input margin-l-10" type="number" placeholder="0.00" placeholder-class="placeholder">
						{{ticketnum*ratio}}
					</view>
				</view>
			</view>
			<view class="row-box">
				<view class="title">输入账号</view>
				<view class="row flex">
					<view class="flex name-box">
						<image class="nametip" src="../../static/icon/quick3.png" mode="scaleToFill"></image>
						<text class="padding-l-10 name">文交所账号</text>
					</view>
					<input class="input margin-l-10" type="number" v-model="card" placeholder="请输入文交所账号"
						placeholder-class="placeholder" />
				</view>
			</view>
			<button class="add-btn up" :class="{ action: loding }" @click="!loding ? confirm() : ''">确认兑换</button>
		</view>
		<navigator url="./quickList">
			<view class="box margin-t-30">
				<view class="titlebox flex">
					<view class="flex-start">
						<image class="nametip" src="../../static/icon/quick4.png" mode="scaleToFill"></image>
						<text class="padding-l-10">兑换记录</text>
					</view>
					<image class="nextTip" src="../../static/img/back.png" mode="scaleToFill"></image>
				</view>
			</view>
		</navigator>

		<view class="echart-box"><l-echart ref="chart" @finished="init"></l-echart></view>
	</view>
</template>

<script>
	import {
		getUserInfo,
		admintrade,
		trade
	} from '@/api/user.js';
	import {
		getTicket,
		getExchange
	} from '@/api/quick.js';
	import {
		mapMutations,
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				ticketnum: '', //兑换文票数
				integral: '', //兑换所需要的积分数
				card: '', //转账卡号
				ratio: 1, //兑换比例
				loding: false,
				type: '1'
			};
		},
		onLoad(options) {
			// this.dataUp();
			// 加载文票比例
			this.getTicket();
		},
		computed: {
			...mapState('user', ['userInfo'])
		},
		methods: {
			...mapMutations('user', ['setUserInfo', 'login']),
			// 更新数据
			dataUp() {
				let obj = this;
				getUserInfo({})
					.then(e => {
						obj.login();
						// 保存返回用户数据
						obj.setUserInfo(e.data);
					})
					.catch(e => {
						console.log(e);
					});
			},
			getTicket() {
				getTicket().then(
					(res) => {
						console.log(res);
						if (res.data.v.CurPrice != 0 && res.data.integral_price != 0) {
							this.ratio = +(res.data.v.CurPrice / res.data.integral_price).toFixed(2);
						} else {
							this.loding = true;
							uni.showModal({
								title: '提示',
								content: '当前兑换暂未开放',
								showCancel: false,
							});
						}
					}
				).catch(
					(res) => {
						console.log(res);
					}
				)
			},
			// 提交
			confirm() {
				let obj = this;
				obj.loding = true;

				if (!this.ticketnum) {
					uni.showToast({
						title: '请输入兑换数量',
						icon: 'error'
					});
					return
				}
				if (this.ticketnum.indexOf('.') > -1) {
					uni.showToast({
						title: '请输入整数',
						icon: 'error'
					});
					return
				}
				// if(this.ticketnum*this.ratio>this.userInfo.integral){
				// 	uni.showToast({
				// 		title: '趣豆不足无法兑换',
				// 		icon:'error'
				// 	});
				// 	return
				// }
				if (!this.card) {
					uni.showToast({
						title: '请输入社交账号',
						icon: 'error'
					});
					return
				}
				let data = {
					account: obj.card, //账号
					extract_ticket: obj.ticketnum, //数量
				};
				uni.showModal({
					title: '提示',
					content: `本人委托王伟将本人所持有的 53年18K一分券送至中藏仓储有限公司进行鉴定托管，在整个鉴定托管过程中，该委托人的一切行为，均代表我本人，与本人的行为具有同等法律效力，我本人将承担该委托人行为的全部法律后果和责任。`,
					cancelText: '不同意',
					confirmText: '我同意',
					success: res => {
						if (res.confirm) {
							getExchange(data)
								.then(e => {
									// 允许按钮点击
									obj.loding = false;
									// 初始化提现金额
									obj.ticketnum = '';
									uni.showToast({
										title: e.msg,
										duration: 2000,
										position: 'top'
									});
									obj.dataUp();
								})
								.catch(e => {
									obj.$api.msg(e.msg);
									obj.loding = false;
								});
						}
					},
					fail: (err) => {
						console.log(err);
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.content {
		padding-top: 30rpx;

		.box {
			background-color: #FFF;
			line-height: 1;

			.titlebox {
				padding: 30rpx;
				font-weight: bold;
				font-size: $font-lg;
				border-bottom: 1px solid $border-color-base;

				.titlename {
					border-left: 2px solid $color-red ;
				}

				.nextTip {
					width: 20rpx;
					height: 40rpx;
				}
			}

			.tabquick {
				width: 70rpx;
				height: 70rpx;
			}

			.nametip {
				width: 40rpx;
				height: 40rpx;
			}

			.row-box {
				padding: 30rpx;

				.title {
					font-size: $font-sm;
					color: $font-color-light;
					padding-bottom: 20rpx;
				}

				.row {
					position: relative;

					.name-box {
						font-weight: bold;
						font-size: $font-base;
						width: 220rpx;

						.name {
							flex-grow: 1;
							border-right: 2px solid $font-color-disabled;
							margin-right: 10rpx;
						}
					}

					.input {
						flex: 1;
						font-size: 30rpx;
						height: 60rpx;
						line-height: 60rpx;
						color: $font-color-dark;
						border-bottom: 1px solid $border-color-light;
					}
				}
			}
		}
	}

	.add-btn {
		height: 80rpx;
		border-radius: 10rpx;
		margin: 0 50rpx;
		margin-top: 30rpx;
		color: #FFF;
		background-color: $uni-color-error ;

		&.action {
			background-color: $border-color-light ;
		}
	}
</style>