<template>
	<view class="user-stored-list">
		<!-- #ifdef H5 -->
		<view @tap="$util.goUrl({url:`/pages/service`,openType:`reLaunch`})" class="abs"
			:class="[{'back-user-ios none': configInfo.isIos},{'back-user-android none': !configInfo.isIos}]"
			style="z-index: 1;" v-if="options.pid">
			<view class="iconshouye iconfont"></view>
			<view class="back-user_text">回到首页</view>
		</view>
		<!-- #endif -->
		<view class="stored-bg c-base abs" :style="{background:primaryColor}">
		</view>
		<view class="space-lg"></view>
		<view class="record-info fill-base ml-md mr-md radius-32 rel">
			<view class="flex-center flex-column pd-lg">
				<view class="money">{{mineInfo.balance || 0}}</view>
				<view class="f-caption c-caption mt-sm mb-sm">当前余额(元)</view>
			</view>
			<view class="record-list flex-x-center pb-lg f-paragraph c-title">
				<view @tap.stop="$util.goUrl({url:`/user/pages/stored/commission`})" class="list-item flex-center">佣金流水
				</view>
				<view @tap.stop="$util.goUrl({url:`/user/pages/stored/record`})" class="list-item flex-center">
					充值记录</view>
				<view @tap.stop="$util.goUrl({url:`/user/pages/stored/consume`})" class="list-item flex-center">
					消费明细</view>
			</view>
		</view>

		<view class="fill-base mt-md ml-md mr-md pd-lg radius-24">
			<view class="store-list flex-warp">
				<view @tap.stop="toChangeItem('chooseInd',index)" class="list-item mb-md pd-lg fill-base radius-16"
					:class="[{'mr-md':index%2==0}]" :style="{background:index==chooseInd?primaryColor:'#F7F8FA'}"
					v-for="(item,index) in list.data" :key="index">
					<view class="ellipsis" :class="[{'c-title':index!=chooseInd},{'c-base':index==chooseInd}]"
						style="font-size: 50rpx;">
						¥{{item.price}}</view>
					<view class="f-caption ellipsis"
						:style="{color:index==chooseInd?'rgba(255,255,255,0.5)':'#8D9092'}">
						{{item.title}}
					</view>
					<!-- <view @tap.stop="toShare(index)" class="f-caption mt-sm"
						:style="{color:index==chooseInd?'#FAFF5B':primaryColor}" v-if="mineInfo.coach_status === 2">邀请充值
					</view> -->
				</view>
			</view>

			<view @tap.stop="options.coach_id?'':$util.goUrl({url:`/user/pages/stored/choose-technician`})"
				class="flex-between mt-md mb-md">
				<view class="f-title text-bold">选择为{{$t('action.attendantName')}}充值</view>
				<view class="flex-y-center f-title">
					<view class="max-200 ellipsis" :style="{color:!coach_info.id ? '#4A4A4A':''}">
						{{coach_info.id ? coach_info.coach_name : '去选择'}}
					</view>
					<i class="iconfont icon-right" v-if="!options.coach_id"></i>
				</view>
			</view>
			<view @tap.stop="toChangeItem('payInd',index)" class="flex-between mt-lg" v-for="(item,index) in payList"
				:key="index">
				<view class="pay-item flex-y-center">
					<view class="item-icon flex-center mr-md" :class="[{'wechat':item.id==1},{'alipay':item.id==3}]">
						<i class="iconfont icon-font-color" :class="[item.icon]"></i>
					</view>
					<view class="flex-y-baseline item-title">{{item.title}}
					</view>
				</view>
				<i class="pay-icon iconfont c-caption"
					:class="[{'icon-xuanze':payInd != index},{'icon-radio-fill':payInd == index}]"
					:style="{color:payInd==index?primaryColor:'#BEC3CE'}"></i>
			</view>
			<view class="mt-md pt-lg f-caption c-caption">
				<view>1.充值的本金和赠送金额均不可提现、转移、转赠</view>
				<view class="mt-sm">2.使用范围：本平台所有项目皆可购买，以及交通费支付</view>
			</view>
		</view>
		<view class="space-max-footer"></view>
		<fixed position="bottom" v-if="chooseInd!=-1">
			<view class="pd-lg fill-base">
				<view class="flex-between">
					<view class="flex-y-center f-paragraph c-caption">充值金额：<view class="c-warning">
							{{list.data[chooseInd].price}}元
						</view>
					</view>
					<view @tap.stop="toPay" class="pay-btn flex-center f-title c-base radius"
						:style="{background:primaryColor}">充值</view>
				</view>
				<view class="space-safe"></view>
			</view>
		</fixed>

		<uni-popup ref="show_share_item" type="bottom" zIndex="1000">
			<view class="popup-share pd-lg f-desc c-desc fill-base">
				<view class="flex-center">
					<!-- #ifdef MP-WEIXIN -->
					<button open-type="share" class="clear-btn list-item flex-center flex-column">
						<image mode="aspectFill" class="item-image"
							src="https://lbqny.migugu.com/admin/anmo/coupon/wechat.png"></image>
						<view style="font-size: 26rpx;color:#666;">分享给好友</view>
					</button>
					<view @tap.stop="toPoster" class="list-item flex-center flex-column">
						<image mode="aspectFill" class="item-image"
							src="https://lbqny.migugu.com/admin/anmo/coupon/picture.png"></image>
						<view>生成海报码</view>
					</view>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<view @tap.stop="toAppShare" class="list-item flex-center flex-column">
						<image mode="aspectFill" class="item-image"
							src="https://lbqny.migugu.com/admin/anmo/coupon/wechat.png"></image>
						<view style="font-size: 26rpx;color:#666;">分享给好友</view>
					</view>
					<view @tap.stop="toPoster" class="list-item flex-center flex-column">
						<image mode="aspectFill" class="item-image"
							src="https://lbqny.migugu.com/admin/anmo/coupon/picture.png"></image>
						<view>生成海报码</view>
					</view>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<view @tap.stop="toAppShare(1)" class="list-item flex-center flex-column">
						<image mode="aspectFill" class="item-image"
							src="https://lbqny.migugu.com/admin/anmo/coupon/wechat.png"></image>
						<view style="font-size: 26rpx;color:#666;">分享给好友</view>
					</view>
					<view @tap.stop="toAppShare(2)" class="list-item flex-center flex-column">
						<image mode="aspectFill" class="item-image"
							src="https://lbqny.migugu.com/admin/anmo/coupon/wechat-moments.png"></image>
						<view>分享到朋友圈</view>
					</view>
					<view @tap.stop="toPoster" class="list-item flex-center flex-column">
						<image mode="aspectFill" class="item-image"
							src="https://lbqny.migugu.com/admin/anmo/coupon/picture.png"></image>
						<view>生成海报码</view>
					</view>
					<!-- #endif -->
				</view>
				<view class="space-footer"></view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import siteInfo from '@/siteinfo.js';
	export default {
		components: {},
		data() {
			return {
				options: {},
				color: '#ffffff',
				payList: [{
					id: 1,
					icon: 'icon-weixin',
					title: '微信支付'
				}],
				payInd: 0,
				chooseInd: 0,
				qr_code: '',
				imageUrl: 'https://lbqny.migugu.com/admin/anmo/mine/balance-wechat-share.png',
				coach_info: {},
				param: {
					page: 1,
					limit: 10
				},
				list: {
					data: []
				},
				loading: true,
				lockTap: false,
				shareInd: 0
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			commonOptions: state => state.user.commonOptions,
			userInfo: state => state.user.userInfo,
			mineInfo: state => state.user.mineInfo,
			isGzhLogin: state => state.user.isGzhLogin,
		}),
		async onLoad(options) {
			this.$util.showLoading()
			options = await this.updateCommonOptions(options)
			this.options = options
			// #ifdef MP-WEIXIN
			uni.hideShareMenu()
			// #endif
			await this.initIndex()
		},
		onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh();
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.list.current_page >= this.list.last_page || this.loading) return;
			this.param.page = this.param.page + 1;
			this.loading = true;
			this.getList();
		},
		onShareAppMessage(e) {
			if (e.from === 'button') {
				let {
					imageUrl
				} = this
				let {
					id,
					title,
				} = this.list.data[0]
				let {
					id: pid = 0
				} = this.userInfo
				let {
					coach_id
				} = this.mineInfo
				let path = `/user/pages/stored/list?id=${id}&pid=${pid}&coach_id=${coach_id}`
				this.$util.log(path)
				this.$refs.show_share_item.close()
				return {
					title,
					imageUrl,
					path,
				}
			}
		},
		methods: {
			...mapActions(['getConfigInfo', 'getUserInfo', 'getMineInfo', 'updateCommonOptions']),
			...mapMutations(['updateOrderItem']),
			async initIndex(refresh = false) {
				let {
					isGzhLogin
				} = this
				let {
					id: uid = 0
				} = this.userInfo
				if (!uid) {
					// #ifdef H5
					if (isGzhLogin) {
						setTimeout(() => {
							this.getUserInfo()
						}, 1000)
					} else {
						this.getUserInfo()
					}
					// #endif
					// #ifndef H5
					await this.getUserInfo()
					// #endif 
				}
				await Promise.all([this.getConfigInfo(), this.getMineInfo(), this.getList()])
				// #ifdef H5
				if (!refresh && this.$jweixin.isWechat()) {
					await this.$jweixin.initJssdk();
					setTimeout(() => {
						this.toAppShare()
					}, 1200)
				}
				// #endif

				let {
					alipay_status = 0
				} = this.configInfo
				if (alipay_status && this.payList.length == 1) {
					// #ifndef MP-WEIXIN
					this.payList.push({
						id: 3,
						icon: 'icon-alipay-fill',
						title: '支付宝支付'
					})
					// #endif
				}
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
			},
			initRefresh() {
				this.param.page = 1
				this.initIndex(true)
			},
			async getList() {
				let {
					list: oldList,
					param,
				} = this
				let {
					coach_id = 0
				} = this.commonOptions
				param.coach_id = coach_id
				let newList = await this.$api.mine.cardList(param);
				if (coach_id) {
					let {
						coach_name = ''
					} = newList
					this.coach_info = {
						id: coach_id,
						coach_name
					}
				}
				if (this.param.page == 1) {
					this.list = newList
				} else {
					newList.data = oldList.data.concat(newList.data)
					this.list = newList
				}
				this.loading = false
				this.$util.hideAll()
				if (this.list.data.length == 0) {
					this.chooseInd = -1
				}
			},
			toChangeItem(key, val) {
				this[key] = val
				this.lockTap = false
			},
			// 去支付
			async toPay() {
				let {
					chooseInd,
					payInd
				} = this
				let {
					id: card_id,
					true_price
				} = this.list.data[chooseInd]
				let {
					id: coach_id = 0
				} = this.coach_info
				let {
					id: pay_model
				} = this.payList[payInd]
				let param = {
					card_id,
					coach_id,
					pay_model
				}

				// #ifdef H5
				if (pay_model == 3) {
					this.updateOrderItem({
						key: 'alipayOrderParams',
						val: {
							order_id: '',
							card_id,
							coach_id,
							orderInfo: ''
						}
					})
					this.$util.goUrl({
						url: `/user/pages/alipay-result`
					})
					setTimeout(() => {
						this.getMineInfo()
						this.$util.back()
					}, 3000)
					return
				}

				// #endif

				if (this.lockTap) return;
				this.lockTap = true;
				this.$util.showLoading()
				try {
					let {
						pay_list
					} = await this.$api.mine.payBalanceOrder(param)
					this.$util.hideAll()
					if (pay_list) {
						if (pay_model == 3) {
							pay_list = {
								orderInfo: pay_list,
								provider: 'alipay'
							}
						}
						try {
							await this.$util.pay(pay_list)
							this.$util.showToast({
								title: `支付成功`
							})
							await this.getMineInfo()
							setTimeout(() => {
								this.lockTap = false;
								this.$util.back()
							}, 1000)
						} catch (e) {
							this.lockTap = false;
							return;
						}
					}
				} catch (e) {
					this.$util.showToast({
						title: `支付失败`
					})
					setTimeout(() => {
						this.lockTap = false
						this.$util.hideAll()
					}, 1000)
				}
			},
			async toShare(index) {
				this.shareInd = index
				if (!this.qr_code) {
					this.$util.showLoading()
					let qr_code = await this.$api.mine.coachBalanceQr()
					this.$util.hideAll()
					this.qr_code = qr_code
				}
				// #ifndef H5
				this.$refs.show_share_item.open()
				// #endif
				// #ifdef H5
				this.$util.goUrl({
					url: `/user/pages/stored/poster`
				})
				// #endif
			},
			toPoster() {
				this.$refs.show_share_item.close()
				this.$util.goUrl({
					url: `/user/pages/stored/poster`
				})
			},
			toAppShare(type = 1) {
				let {
					shareInd = 0,
						imageUrl
				} = this

				let {
					id: pid = 0
				} = this.userInfo
				let {
					coach_id = 0
				} = this.mineInfo

				let {
					id,
					title,
				} = this.list.data[shareInd]
				let summary = '邀请您充值有优惠～'

				let {
					siteroot
				} = siteInfo
				let url = siteroot.split('/index.php')[0]
				let href = `${url}/h5/#/user/pages/stored/list?id=${id}&coach_id=${coach_id}&pid=${pid}`

				// #ifdef H5
				this.$jweixin.wxReady(() => {
					this.$jweixin.showOptionMenu()
					this.$jweixin.shareAppMessage(title, summary, href, imageUrl)
					this.$jweixin.shareTimelineMessage(title, href, imageUrl)
				})
				// #endif
				// #ifdef APP-PLUS
				this.$refs.show_share_item.close()
				let scene = type == 1 ? 'WXSceneSession' : 'WXSceneTimeline'
				uni.share({
					provider: "weixin",
					scene,
					type: 0,
					href,
					title,
					summary,
					imageUrl,
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
				// #endif
			},
		}
	}
</script>


<style lang="scss">
	.user-stored-list {

		.stored-bg {
			width: 100%;
			height: 163rpx;
			border-radius: 0 0 20rpx 20rpx;
			top: 0;
		}

		.record-info {
			.money {
				font-size: 44rpx;
			}

			.record-list {
				.list-item {
					width: 33.33%;
				}
			}

		}

		.store-list {
			.list-item {
				width: 305rpx;
			}
		}

		.pay-item {
			.item-icon {

				width: 70rpx;
				height: 70rpx;
				border-radius: 35rpx;

				.iconfont {
					font-size: 44rpx;
				}
			}

			.item-icon.wechat {
				background: #E7F9EE;

				.iconfont {
					background-image: linear-gradient(180deg, #90EE90 0%, #32CD32 100%, #19c865 100%);
				}
			}

			.item-icon.alipay {
				background: #E9F5FE;

				.iconfont {
					background-image: linear-gradient(180deg, #46BCFF 0%, #2587FF 100%, #1976FF 100%);
				}
			}

			.item-title {
				color: #2E3541;
			}

		}

		.pay-btn {
			width: 283rpx;
			height: 90rpx;
		}

		.popup-share {
			.list-item {
				width: 50%;

				.item-image {
					width: 66rpx;
					height: 66rpx;
				}
			}
		}


	}
</style>
