<template>
	<view>
		<view class="width100 height100p backcorf06">
			<view class="block">
				<view class="content height60">
					<input type="number" class="my flleft font18 fcorfff" maxlength="11"
						placeholder-style="color:#ffffff;" placeholder="请输入充值号码" v-model="inputPhone" />
				</view>
				<view class="line1 width100 backcorfff"></view>
			</view>
		</view>
		<view class="mart5">
			<QSTabs ref="tabs" :tabs="tabs" animationMode="line2" :current="current" @change="change"
				activeColor="#089bf5" lineColor="#089bf5" minWidth="374">
			</QSTabs>
		</view>
		<view class="width90 font16 fcor333 fontwig6 mart20">
			选择金额
		</view>
		<view class="list">
			<view class="box" :class="{'on':item.id == inputAmountId}" v-for="(item,index) in amountList" :key="index"
				@click="select(item)">
				<view class="heTitle">{{item.rechargePrice}}元</view>
				<view class="font13 fcoreb5 fontwig6" v-if="item.status != 2">{{item.payPrice}}元</view>
				<view class="font13 fcor999" v-if="item.status == 2">已售空</view>
			</view>
		</view>
		<view class="mart5 width90 font18 fcor333 fontwig6">
			充值说明：
		</view>
		<view class="width90 mart20" v-if="current == 0">
			<image class="width100" mode="widthFix" :src="imagewxUrl+image2"></image>
		</view>
		<view class="width90 mart20" v-if="current == 1">
			<image class="width100" mode="widthFix" :src="imagewxUrl+image1"></image>
		</view>
		<view class="height100p"></view>
		<view class="bombtn width94 font16">
			<view class="width50 flleft payem">应付: {{inputAmount}}元</view>
			<view class="width50 flright paybtn" @click="addOrderPay">立即购买</view>
		</view>
	</view>
</template>

<script>
	// #ifdef H5
	var jweixin = require('jweixin-module');
	// #endif
	let app = getApp();
	import QSTabs from '../../components/QS-tabs/QS-tabs.vue';
	import {
		getListOutRechargePrice,
		addOrderPay
	} from '../../Utils/Api.js';
	export default {
		components: {
			QSTabs
		},
		data() {
			return {
				typeId: '',
				inputAmountId: '',
				inputAmount: '',
				inputPhone: '',
				amoutType: '',
				amountList: [],
				price: '',
				amoutstatus: '',
				tabs: ["5个工作日", "6小时到账"], //切换操作
				current: 0, //默认
				swiperCurrent: 2,
				imagewxUrl: app.globalData.imageWxImg,
				image1:'telephone1.png',
				image2:'telephone2.png'
			}
		},
		onLoad(options) {
			this.typeId = options.id;
			if (!app.globalData.userInfo) {
				if (this.typeId == 1) {
					uni.setNavigationBarTitle({
						title: '中国移动'
					})
					this.amoutType = 2;
					this.getListOutRechargePrice(2);
					return;
				}
				if (this.typeId == 2) {
					uni.setNavigationBarTitle({
						title: '中国电信'
					})
					this.amoutType = 1;
					this.getListOutRechargePrice(1);
					return;
				}
				if (this.typeId == 3) {
					uni.setNavigationBarTitle({
						title: '中国联通'
					})
					this.amoutType = 3;
					this.getListOutRechargePrice(3);
					return;
				}
			}
		},
		onShow() {
			this.amountList = [];
			if (app.globalData.userInfo) {
				if (this.typeId == 1) {
					uni.setNavigationBarTitle({
						title: '中国移动'
					})
					this.amoutType = 2;
					this.getListOutRechargePrice(2);
					return;
				}
				if (this.typeId == 2) {
					uni.setNavigationBarTitle({
						title: '中国电信'
					})
					this.amoutType = 1;
					this.getListOutRechargePrice(1);
					return;
				}
				if (this.typeId == 3) {
					uni.setNavigationBarTitle({
						title: '中国联通'
					})
					this.amoutType = 3;
					this.getListOutRechargePrice(3);
					return;
				}
			}
		},
		methods: {
			select(amoutinfos) {
				this.inputAmount = amoutinfos.payPrice;
				this.price = amoutinfos.rechargePrice;
				this.inputAmountId = amoutinfos.id;
				this.amoutstatus = amoutinfos.status;
			},
			//筛选
			change(index) {
				this.$refs.tabs.setFinishCurrent(index);
				this.current = index;
				this.inputAmount = '';
				this.inputAmountId = '';
				this.amoutstatus = '';
				if (index == 0) {
					this.swiperCurrent = 2;
					this.getListOutRechargePrice(this.amoutType);
				} else {
					this.swiperCurrent = 1;
					this.getListOutRechargePrice(this.amoutType);
				}
			},
			/**
			 * 查询价格
			 */
			getListOutRechargePrice(item) {
				uni.showLoading({
					title: '加载中...'
				})
				let showType;
				// #ifdef H5
				showType = 2;
				// #endif
				// #ifdef MP
				showType = 1;
				// #endif
				let params = {
					operatorType: item,
					regionId: app.globalData.cityId,
					platformId: showType,
					rechargeType: this.swiperCurrent
				}
				getListOutRechargePrice(params).then(res => {
					uni.hideLoading()
					if (res.return_code == '000000' && res.return_data) {
						this.amountList = res.return_data;
					} else {
						this.amountList = [];
					}
				})
			},

			/**
			 * 提交订单
			 */
			addOrderPay() {
				let that = this;
				if (that.amoutstatus == 2) {
					uni.showToast({
						title: '当前面值已售空',
						duration: 2000,
						icon: "none"
					});
					return;
				}
				if (that.inputPhone == '') {
					uni.showToast({
						title: '请输入充值号码',
						duration: 2000,
						icon: "none"
					});
					return;
				}
				if (that.inputPhone.length != 11) {
					uni.showToast({
						title: '请输入正确充值号码',
						duration: 2000,
						icon: "none"
					});
					return;
				}
				if (that.inputAmount == '') {
					uni.showToast({
						title: '请选择价格',
						duration: 2000,
						icon: "none"
					});
					return false;
				}
				uni.showToast({
					title: '提交订单...',
					icon: 'none',
					duration: 2000,
					success() {
						uni.navigateTo({
							url: '../unionComfirmation/unionComfirmation?orderPrice=' + that.price +
								'&payPrice=' + that.inputAmount + '&rechargeContent=' + that.inputPhone +
								'&rechargeModel=' + that.amoutType +
								'&objectId=' + that.inputAmountId + '&rechargeType=' + that.swiperCurrent
						})
					}
				})

			}
		}
	}
</script>

<style lang="scss">
	.block {
		width: 94%;
		padding: 60upx 3%;

		.my {
			width: 80%;
			height: 120upx;
			display: flex;
			align-items: center;
		}

		.uni-input-placeholder {
			color: #FFFFFF;
		}
	}

	.list {
		width: 94%;
		margin-left: 3%;
		display: flow-root;
		justify-content: space-between;
		align-items: center;
		padding: 20upx 0;

		.box {
			width: 30%;
			margin-left: 1%;
			margin-right: 2%;
			margin-top: 20upx;
			float: left;
			height: 120upx;
			// line-height: 120upx;
			display: inline-grid;
			justify-content: center;
			align-items: center;
			text-align: center;
			box-shadow: 0upx 0upx 4upx #666666;
			font-size: 36upx;
			color: #089bf5;

			&.on {
				background-color: #089bf5;
				color: #ffffff;
			}
		}

		.heTitle {
			width: 100%;
			font-size: 15px;
		}
	}

	.bombtn {
		position: fixed;
		height: 45px;
		bottom: 20px;
		border-radius: 6px;

		.payem {
			height: 45px;
			line-height: 45px;
			text-align: center;
			background-color: #007AFF;
			color: #FFFFFF;
			border-radius: 6px 0 0 6px;
		}

		.paybtn {
			height: 45px;
			line-height: 45px;
			text-align: center;
			background-color: #F8A628;
			border-radius: 0 6px 6px 0;
			color: #FFFFFF;
		}
	}
</style>
