<template>
	<view v-if="isShow"> </view>
	<view v-else class="min-body">
		<u-gap height="20rpx"></u-gap>
		<view class="header-box">
			<view class="flex">
				<view class="logo">
					<image :src="logo"></image>
				</view>
				<view class="goods-name">
					{{ title }}
				</view>
			</view>
		</view>
		<view class="white-box">
			<view class="title-box flbtn">
				<view class="big-333 bold"> 充值账号 </view>
				<view class="lit-333" style="color: #ff2a30">
					*请确认账号信息，充值成功后不支持退换
				</view>
			</view>
			<view class="" style="padding-top: 20rpx">
				<u-input fontSize="46rpx" border="none" v-model="account" :placeholder="account_type"></u-input>
			</view>
		</view>

		<view class="white-box">
			<view class="title-box flbtn">
				<view class="big-333 bold"> 请选择充值类型 </view>
			</view>
			<view class="goods-type" style="padding-top: 20rpx">
				<view :class="'title ' + (v == activeName ? 'active' : '')" v-for="(v, index) in spce" :key="index"
					@click="activeType(index, v)">
					{{ v }}
				</view>
			</view>
		</view>
		<view class="white-box" v-if="goods_id == 112">
			<view class="title-box flbtn">
				<view class="big-333 bold"> 请选择充值地区 </view>
				<view class="lit-333" style="color: #ff2a30">
					*部分地区暂不支持，请选择支持的地区
				</view>
			</view>
			<view class="" style="padding-top: 20rpx" @click="showPicker = true">
				<u-input disabled disabledColor="#fff" v-model="checkAddress.name" fontSize="46rpx" border="none"
					placeholder="请选择充值地区"></u-input>
			</view>
		</view>
		<view class="white-box" v-if="goods_id == 112 && activeName == '南方电网'">
			<view class="title-box flbtn">
				<view class="big-333 bold"> 身份证尾号 </view>
				<view class="lit-333" style="color: #ff2a30">
					*身份证后六位(含X,例:123456或12345X)
				</view>
			</view>
			<view class="" style="padding-top: 20rpx">
				<u-input v-model="idcard" fontSize="46rpx" border="none" placeholder="请输入身份证号后六位"></u-input>
			</view>
		</view>
		<view class="white-box" v-if="activeArr['length'] > 0">
			<view class="title-box flbtn">
				<view class="big-333 bold"> 请选择面额 </view>
			</view>
			<view class="goods-type" style="padding-top: 20rpx">
				<view :class="'title ' + (goodsActive == i ? 'active' : '')" v-for="(v, i) in activeArr" :key="i"
					@click="checkGoods(i)">
					<view class="big-333 bold" style="color: #6c3d05">
						{{ v.b_sku_time }}
					</view>
					<view class="sjjg"> 售价：￥{{ v.price / 100 }} </view>
					<view class="big-333 bold" style="color: #6c3d05; text-decoration: line-through">
						原价：￥{{ v.original_price / 100 }}
					</view>
				</view>
			</view>
		</view>
		<view class="white-box" v-if="isUseTqk">
			<view class="title-box flbtn">
				<view class="big-333 bold"> 优惠 </view>
			</view>
			<!-- {{dikou}} -->
			<card-checked @GitData="GitData" @checked="checkedFunc" :price="dikou" ref="card-checked"></card-checked>
		</view>
		<view class="white-box">
			<view class="title-box flbtn">
				<view class="big-333 bold"> 温馨提示 </view>
			</view>
			<rich-text class="big-666" style="font-size: " :nodes="html"></rich-text>
		</view>
		<u-gap height="205rpx"></u-gap>
		<view class="bottom">
			<view class="bd-box flbtn">
				<view class="">
					<view class="big-666 bold">
						应付金额：<text style="color: #ff2a30">￥{{ __amount(needPay) }}</text>
					</view>
					<view class="lit-666"> 获得佣金：￥{{ _commission(yongjin)}} </view>
					<view class="lit-666">
						消费补贴卡抵扣：￥{{ checkYh ? backAmount : 0 }}
					</view>
				</view>

				<view class="right">
					<view class="service" @tap="location">
						<u-icon labelPos="bottom" labelSize="20rpx" name="kefu-ermai" label="客服"></u-icon>
					</view>
					<view class="rc-now" @click="rechargeNow"> 立即充值 </view>
				</view>
			</view>
		</view>
		<u-picker @confirm="confirmPicker" @cancel="showPicker = false" keyName="name" :show="showPicker"
			:columns="arrayChecked"></u-picker>
	</view>
</template>

<script>
	import {
		goodsSkuListAPI,
		CreateOrderComAPI
	} from "@/request/pay/index.js";
	import mixin from "@/static/js/mixin/mixin.js";
	export default {
		mixins: [mixin],
		data() {
			return {
				isShow: true,
				account: "",
				activeName: "",
				title: "",
				logo: "",
				goods_id: 0,
				account_type: "",
				baseList: [],
				isUseTqk: false,
				idcard: "",
				checkAddress: {
					name: "",
					val: "",
				},
				array: [
					[{
							name: "北京市",
							val: "北京",
						},

						{
							name: "天津市",
							val: "天津",
						},
						{
							name: "辽宁省",
							val: "辽宁",
						},
						{
							name: "江苏省",
							val: "江苏",
						},

						{
							name: "浙江省",
							val: "浙江",
						},
						{
							name: "山东省",
							val: "山东",
						},
						{
							name: "湖南省",
							val: "湖南",
						},
						{
							name: "陕西省",
							val: "陕西",
						},
						{
							name: "新疆",
							val: "新疆",
						},
						{
							name: "宁夏",
							val: "宁夏",
						},
						{
							name: "安徽省",
							val: "安徽",
						},
						{
							name: "重庆市",
							val: "重庆",
						},
						{
							name: "福建省",
							val: "福建",
						},
						{
							name: "河南省",
							val: "河南",
						},
						{
							name: "青海省",
							val: "青海",
						},
						{
							name: "湖北省",
							val: "湖北",
						},
						{
							name: "黑龙江省",
							val: "黑龙江",
						},
						{
							name: "吉林省",
							val: "吉林",
						},
						{
							name: "上海市",
							val: "上海",
						},
						{
							name: "甘肃省",
							val: "甘肃",
						},
						{
							name: "山西省",
							val: "山西",
						},
						{
							name: "四川省",
							val: "四川",
						},
						{
							name: "江西省",
							val: "江西",
						},
						{
							name: "内蒙古",
							val: "蒙东",
						},
						{
							name: "张家口市",
							val: "冀北",
						},
						{
							name: "秦皇岛市",
							val: "冀北",
						},
						{
							name: "廊坊市",
							val: "冀北",
						},
						{
							name: "承德市",
							val: "冀北",
						},
						{
							name: "唐山市",
							val: "冀北",
						},
						{
							name: "河北省",
							val: "河北",
						},
					],
				],
				array2: [{
						name: "广东省",
						val: "广东",
					},
					{
						name: "广西省",
						val: "广西",
					},
					{
						name: "云南省",
						val: "云南",
					},
					{
						name: "贵州省",
						val: "贵州",
					},
					{
						name: "海南省",
						val: "海南",
					},
				],
				html: "",
				checked: false,
				spce: [],
				goodsActive: 0,
				activeArr: [],
				specMenu: [],
				arrayChecked: [],
				checkYh: false,
				price: 0,
				backAmount: 0,
				showPicker: false,
			};
		},
		computed: {
			dikou() {
				// get(){
				console.log(this.activeArr);
				if (this.activeArr.length == 0) {
					return 0;
				}
				let data = this.activeArr[this.goodsActive];
				console.log(
					(data.price - data.buying_price) * (data.deduction_prop / 100),
					"data "
				);
				return (data.price - data.buying_price) * (data.deduction_prop / 100);
				// }
			},
			needPay: {
				get() {
					if (this.activeArr.length == 0) {
						return 0;
					}
					if (!this.checkYh) {
						return this.activeArr[this.goodsActive].price / 100;
					}
					return this.activeArr.length > 0 ?
						(this.activeArr[this.goodsActive].price - this.backAmount * 100) /
						100 :
						0;
				},
			},
			yongjin: {
				get() {
					return this.activeArr.length > 0 ?
						this.activeArr[this.goodsActive].self_commission :
						0;
				},
			},
		},
		methods: {
			rechargeNow() {
				let _this = this;
				uni.showLoading({
					title: "加载中",
				});
				if (!this.activeName) {
					uni.showToast({
						title: "请选择您手机号对应的运营商",
						icon: "none",
					});
					return;
				}
				if (this.account == "") {
					return this.$u.toast("请输入充值帐号");
				}
				if (this.activeArr.length == 0) {
					return this.$u.toast("请等待页面加载...");
				}
				let param = {
					account: this.account,
					g_id: this.goods_id,
					spec_id: this.activeArr[this.goodsActive].b_sku_id,
					is_deduction: 0,
					deduction_amount: 0,
				};
				if (this.checkYh) {
					param.is_deduction = 1;
					param.deduction_amount = this.backAmount;
				}
				//
				if (this.goods_id == 112) {
					if (this.checkAddress.name == "") {
						uni.showToast({
							title: "请选择充值省份",
							icon: "none",
						});
						return;
					}
					param.account += this.checkAddress.val;
					if (this.activeName == "南方电网") {
						if (this.idcard == "") {
							uni.showToast({
								title: "请输入身份证后六位",
								icon: "none",
							});
							return;
						}
						if (this.idcard.length != "6") {
							uni.showToast({
								title: "请输入身份证后六位",
								icon: "none",
							});
							return;
						}
						param.idcard = this.idcard;
					}
				}
				CreateOrderComAPI(param).then(res => {
					uni.hideLoading();
					const { pay_price, order_sn, type, openid} = res['data'];
					this.$Payment.H5_Payment({
						pay_price,
						order_sn,
						type,
						openid,
						return_url:`/pages/pages-recharge/order/index`
					});
					// this.payment({
					// 	order_sn: res['data']['order_sn'],
					// 	type: res['data']['type'],
					// 	redirect_url: '/pages/pages-recharge/order/index'
					// });
				})
			},
			confirmPicker(e) {
				// console.log(e, 'confirmPicker')
				this.showPicker = false;
				this.checkAddress = e.value[0];
			},
			GitData(d) {
				// console.log('git data', d)
				this["backAmount"] = d;
				if (d <= 0) {
					this.checkYh = 0;
				}
			},
			checkedFunc(e) {
				console.log(e);
				this.checkYh = e;
			},
			async getData() {
				await this.getGoodsInfo();
			},
			getBackAmount() {
				this.$nextTick((e) => {
					// console.log(this['$refs'],'ref')
					this.backAmount = this["$refs"]["card-checked"].GetP();
				});
			},
			activeType(index, activeName) {
				this.activeName = activeName;
				this.goodsActive = 0;
				if (activeName == "国家电网" || activeName == "南方电网") {
					if (activeName == "国家电网") {
						this.arrayChecked = this.array;
					} else {
						this.arrayChecked = this.array2;
					}
				}
				this.activeArr = this.specMenu[this.activeName];
				this.isUseTqk = true;
				// if(this.activeArr.length > this.goodsActive){
				// 	this.setPrice(this.activeArr[this.goodsActive])
				// }
			},
			checkGoods(i) {
				this.goodsActive = i;
				// this.getBackAmount()
			},
			getGoodsInfo() {
				goodsSkuListAPI({
					b_goods_id: this.goods_id,
				}).then((res) => {
					console.log(JSON.stringify(res['data'],null,5),'data');
					uni.hideLoading();
					this["isShow"] = false;
					this["html"] = res['data']["xuzhi"];
					this["title"] = res['data']["g_name"];
					if (res["data"]["spec"]["length"] > 0) {
						this.logo = res["data"]["spec"][0]["b_goods_img"];
					}
					console.log(res["data"]["spec"], "-------");
					this["account_type"] = `请输入${res["data"]["account_type"]}`;
					let arr = [];
					let specMenu = [];
					res["data"]["spec"].forEach((v, i) => {
						if (res['data']["g_name"].indexOf("话费") == -1) {
							if (i == 0) {
								this.activeName = v.b_sku_name;
							}
						}
						if (!arr.includes(v.b_sku_name)) {
							arr.push(v.b_sku_name);
						}
						if (specMenu[v.b_sku_name]) {
							specMenu[v.b_sku_name].push(v);
						} else {
							specMenu[v.b_sku_name] = [v];
						}
					});
					this.spce = arr;
					this.specMenu = specMenu;
					try {
						this.activeArr = specMenu[this.activeName];
						if (this.activeArr.length > 0) {
							if (this.activeArr[0].deduction_prop > 0) {
								this.isUseTqk = true;
								this.checkYh = true;
								//this.getBackAmount()
							}
						}
					} catch (e) {
						this.activeArr = [];
						// this.isUseTqk = true;
						this.checkYh = true;
						//TODO handle the exception
					}
				});
			},

			// 跳转客服
			// service() {
			// 	location.href = 'https://work.weixin.qq.com/kfid/kfc2f4d0cb26562ffe1?corpId='
			// 	uni.openCustomerServiceChat({
			// 		extInfo: {
			// 			url: "",
			// 		},
			// 		corpId: "ww4f46b491a045158c",

			// 		success(e) {
			// 			console.log(e);
			// 		},
			// 		fail(e) {
			// 			console.log(e);
			// 		},
			// 	});
			// },
		},
		onLoad(op) {
			this.arrayChecked = this.array;
			this.goods_id = op.goods_id || getApp()['globalData']['parameters']['goods_id'];
			uni.showLoading({
				title: "正在加载中...",
			});
			console.log("showLoading");
			this.getData();
			setTimeout((e) => {
				if (this.isShow == true) {
					this.$u.toast("稍后重试");
				}
			}, 30000);
		},
		onBackPress(e) {
			console.log(e,'返回');
			return true;
		},
	};
</script>

<style lang="scss">
	.header-box {
		background: linear-gradient(90deg, #fffdf8, #f9eecc);
		height: 200rpx;
		padding: 0 20rpx;
	}

	.goods-type {
		display: grid;
		grid-template-columns: auto auto;
		grid-gap: 20rpx;
	}

	.bottom {
		background-color: #ededed;
		height: 185rpx;
		position: fixed;
		bottom: 0;
		width: 100vw;

		border-radius: 20rpx 20rpx 0 0;

		.bd-box {
			padding: 20rpx;
			background-color: #fff;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			height: 145rpx;
		}

		.right {
			display: flex;
			align-items: center;

			.service {
				margin-right: 20rpx;
			}

			.rc-now {
				background-color: #e7c86d;
				border-radius: 20rpx;
				color: #fff;
				height: 85rpx;
				line-height: 85rpx;
				padding: 0 40rpx;
				font-size: 28rpx;
			}
		}
	}

	.sjjg {
		color: #d3a219;
		font-size: 36rpx;
		margin: 10rpx 0;
	}

	.logo {
		padding-top: 50rpx;

		image {
			width: 100rpx;
			height: 100rpx;
		}
	}

	.goods-name {
		padding-top: 70rpx;
		margin-left: 20rpx;
		font-size: 40rpx;
		font-weight: bold;
	}

	.white-box {
		background-color: #fff;
		padding: 20rpx;
		margin-top: 20rpx;

		.title-box {
			padding-bottom: 20rpx;
			border-bottom: 2rpx solid #ededed;
		}
	}

	.title {
		font-size: 32rpx;
		color: #6b3d05;
		border-radius: 20rpx;
		font-weight: bold;
		background-color: #f7f5ef;
		// width: 90%;
		text-align: center;
		// margin: 0 5%;
		padding: 40rpx 0;
	}

	.active {
		background-color: #f7e7ba;
	}
</style>
