<template>
	<view class="swiper">
		<swiper class="swiper" circular indicator-dots="true" autoplay indicator-active-color="#fff"
			indicator-color="rgba(255,255,255,0.5)">
			<block v-for="(item,index) of swiperList" :key='index'>
				<swiper-item>
					<!-- #ifdef MP-ALIPAY -->
				  	<image v-if="item.type==4"  @click="bindPath(index)" :src="URL+item.thumb" class="img"></image>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<button v-if="item.type==4" hover-class="none" class="img" open-type="getPhoneNumber"
						@getphonenumber="onGetphoneNumber">
						<image :src="URL+item.thumb" class="img"></image>
					</button>
					<!-- #endif -->
					<image v-if="item.type!=4"  @click="bindPath(index)" :src="URL+item.thumb" class="img"></image>
				</swiper-item>
			</block>
		</swiper>
		<gbClose />
		<Vphone :getPhonePop="getPhonePop" @close="setClose"></Vphone>
	</view>
</template>
<script>
	import Vphone from '@/components/v-phone/v-phone.vue';
	import gbClose from './close.vue';
	import {
		mapState,
	} from 'vuex'
	export default {
		components: {
			gbClose,
			Vphone
		},
		computed: {
			...mapState(['systemInfo', 'store_id', 'userInfo', 'swiperList', 'setColor']),
		},
		data() {
			return {
				URL: getApp().globalData.URL,
				getPhonePop: false,
			}
		},
		onLoad() {

		},
		methods: {

			bindPath(index) {
				let {
					type,
					url
				} = this.swiperList[index];
				if (type == 0) {
					return
				}
				if (type == 2) {
					if ("/pages/index/index" == url) {
						console.log(url, "url")
						uni.switchTab({
							url: url
						})
						return
					}
					uni.navigateTo({
						url: url
					})
				}

				if (type == 1) {
					uni.navigateToMiniProgram({
						appId: url,
						success(res) {
							// 打开成功
						}
					})
				}

				if (type == 3) {
					uni.setStorageSync("web", url)
					uni.navigateTo({
						url: "/pages/web/web"
					})
				}
				if (type == 4) {
					if (this.userInfo.mobile) {
						uni.showToast({
							title: "您已经完善过会员信息了，无需重复操作！",
							icon: 'none'
						})
						return
					}
					this.getPhonePop = true;
					
				}
			},

			onGetphoneNumber(e) {
				if (this.userInfo.mobile) {
					uni.showToast({
						title: "您已经完善过会员信息了，无需重复操作！",
						icon: 'none'
					})
					return
				}
				// #ifdef MP-WEIXIN
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					this.$http.request('xcx/Jiemi', {
						id: this.userInfo.id,
						data: e.detail.encryptedData,
						iv: e.detail.iv,
						sessionKey: uni.getStorageSync('user_xcx_info').session_key,
						store_id: this.store_id,
					}, "", "", true).then(res => {
						this.phoneNumber = res.data.phoneNumber;
						uni.setStorageSync('phone', res.data.phoneNumber);
						uni.showModal({
							title: '授权成功',
							content: '享受更多优惠！',
							showCancel: false,
							cancelText: '',
							confirmText: '确定',
							success: res => {
								let subscribe = uni.getStorageSync('balance_subscribe');

								uni.requestSubscribeMessage({
									tmplIds: [subscribe.member_tid],
									success: (r) => {
										// console.log(r, "success")
									},
									complete: (r) => {
										// console.log(r, "complete")
										uni.switchTab({
											url: "../../pages/my/my"
										})
									}
								})

							},
							fail: () => {},
							complete: () => {}
						});
					})
				} else {
					uni.showToast({
						title: "授权失败,请重新授权",
						icon: 'none'
					})
				}
				// #endif
			},
			// 子组件传参
			setClose(e) {
				this.getPhonePop = e;
			},
			// 开启会员弹窗
			onGetphone(e) {
				// console.log("gggggggggggg",this.userInfo.mobile)
				if (this.userInfo.mobile) {
					uni.showToast({
						title: "您已经完善过会员信息了，无需重复操作！",
						icon: 'none'
					})
					return
				}
				this.getPhonePop = true;
				// this.$emit("getPhonePop",true)
			},

		}
	}
</script>

<style lang="scss" scoped>
	.swiper {
		width: 550rpx;
		height: 550rpx;
		margin: 0 auto;
		border-radius: 10rpx;
		background-color: #FFFFFF;
		margin-top: -200rpx;

		.img {
			display: block;
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}
		
		button::after {
				border: none;

			}

			 button {
				background-color: transparent;

				padding-left: 0;

				padding-right: 0;

				line-height: inherit;

			}

		   button {
				border-radius: 0;

			}

	}
	
</style>
