<template>
	<div class="module-item-tuwen" :style="!module.base.m ? 'margin-top:0' : ''">
		<div class="item-tuwen-con">
			<moduleBg :base="module.base" />
			<!--开通会员样式一-->
			<block v-if="module.link.type==3&&module.link.n=='openMenber'">
				<!-- 已经开通会员 -->
				<!-- #ifdef MP-WEIXIN -->
				<block v-if="userInfo.mobile">
					<div class="item-tuwen-style1" :style="!module.base.m ? 'padding:0':''" @click="onGetphone" v-if="module.base.s == 0">
						<p class="tit" v-if="module.title.s">
							<moduleText :text="module.title" />
						</p>
						<div class="item" :style="!module.base.m ? 'margin:0' : ''">
							<p v-if="module.img">
								<image :style="style" :src="module.img" />
							</p>
							<p v-else><img :src="$util.icon('img.jpg')" alt=""></p>
							<div class="note" v-if="module.note.s">
								<moduleText :text="module.note" />
							</div>
						</div>
					</div>
					<!--样式二-->
					<div @click="onGetphone" class="item-tuwen-style2" :style="!module.base.m ? 'padding:0':''" v-if="module.base.s == 1">
						<div class="item" :style="!module.base.m ? 'margin:0' : ''">
							<p v-if="module.img">
								<image :style="style" :src="module.img" />
							</p>
							<p v-else>
								<image :style="style" :src="$util.icon('img.jpg')" alt="">
							</p>
							<p class="tit" v-if="module.title.s">
								<moduleText :text="module.title" />
							</p>
							<div class="note" v-if="module.note.s">
								<moduleText :text="module.note" />
							</div>
						</div>
					</div>
				</block>

				<block v-else>
					<!-- 样式一 -->
					<button class="item-tuwen-style1" hover-class="none" :style="!module.base.m ? 'padding:0':''" open-type="getPhoneNumber" @getphonenumber="onGetphoneNumber"
						v-if="module.base.s == 0">
						<p class="tit" v-if="module.title.s">
							<moduleText :text="module.title" />
						</p>
						<div class="item" :style="!module.base.m ? 'margin:0' : ''">
							<p v-if="module.img">
								<image :style="style" :src="module.img" />
							</p>
							<p v-else><img :src="$util.icon('img.jpg')" alt=""></p>
							<div class="note" v-if="module.note.s">
								<moduleText :text="module.note" />
							</div>
						</div>
					</button>
					<!--样式二-->
					<button open-type="getPhoneNumber" hover-class="none" @getphonenumber="onGetphoneNumber" class="item-tuwen-style2" :style="!module.base.m ? 'padding:0':''"
						v-if="module.base.s == 1">
						<div class="item" :style="!module.base.m ? 'margin:0' : ''">
							<p v-if="module.img">
								<image :style="style" :src="module.img" />
							</p>
							<p v-else>
								<image :style="style" :src="$util.icon('img.jpg')" alt="">
							</p>
							<p class="tit" v-if="module.title.s">
								<moduleText :text="module.title" />
							</p>
							<div class="note" v-if="module.note.s">
								<moduleText :text="module.note" />
							</div>
						</div>
					</button>
				</block>
				<!-- #endif -->

				<!-- #ifdef MP-ALIPAY -->
				<div class="item-tuwen-style1" :style="!module.base.m ? 'padding:0':''" @click="onGetphone" v-if="module.base.s == 0">
					<p class="tit" v-if="module.title.s">
						<moduleText :text="module.title" />
					</p>
					<div class="item" :style="!module.base.m ? 'margin:0' : ''">
						<p v-if="module.img">
							<image :style="style" :src="module.img" />
						</p>
						<p v-else><img :src="$util.icon('img.jpg')" alt=""></p>
						<div class="note" v-if="module.note.s">
							<moduleText :text="module.note" />
						</div>
					</div>
				</div>
				<!--样式二-->
				<div @click="onGetphone" class="item-tuwen-style2" :style="!module.base.m ? 'padding:0':''" v-if="module.base.s == 1">
					<div class="item" :style="!module.base.m ? 'margin:0' : ''">
						<p v-if="module.img">
							<image :style="style" :src="module.img" />
						</p>
						<p v-else>
							<image :style="style" :src="$util.icon('img.jpg')" alt="">
						</p>
						<p class="tit" v-if="module.title.s">
							<moduleText :text="module.title" />
						</p>
						<div class="note" v-if="module.note.s">
							<moduleText :text="module.note" />
						</div>
					</div>
				</div>
				<!-- #endif -->
			</block>

			<!-- 默认样式 -->
			<block v-else>
				
				<view @click="$util.openOnly(module.link)" :style="!module.base.m ? 'padding:0':''"  
				:url="module.link.n" class="item-tuwen-style1"  v-if="module.base.s == 0">
					<p class="tit" v-if="module.title.s">
						<moduleText :text="module.title" />
					</p>
					<div class="item"  :style="!module.base.m ? 'margin:0' : ''">
						<p v-if="module.img">
							<image :style="style"  :src="module.img" />
						</p>
						<p v-else><img  :style="style"  :src="$util.icon('img.jpg')" alt=""></p>
						<div class="note" v-if="module.note.s">
							<moduleText :text="module.note" />
						</div>
					</div>
				</view>
				
				<!--样式二-->
				<view  @click="$util.openOnly(module.link)" class="item-tuwen-style2" :style="!module.base.m ? 'padding:0':''" :url="module.link.n" v-if="module.base.s == 1">
					<div class="item"  :style="!module.base.m ? 'margin:0' : ''">
						<p v-if="module.img">
							<image :style="style"  :src="module.img" />
						</p>
						<p v-else>
							<image :style="style" :src="$util.icon('img.jpg')" alt="">
						</p>
						<p class="tit" v-if="module.title.s">
							<moduleText :text="module.title" />
						</p>
						<div class="note" v-if="module.note.s">
							<moduleText :text="module.note" />
						</div>
					</div>
				</view>
				
				
				
			</block>
		</div>
		<Vphone :getPhonePop="getPhonePop" @close="setClose"></Vphone>
	</div>
</template>

<script>
	import moduleBg from './bg.vue';
	import moduleText from './text.vue';
	import Vphone from '@/components/v-phone/v-phone.vue';
	let hideLoading = true;
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		props: ['module'],
		components: {
			moduleBg,
			moduleText,
			Vphone
		},
		data() {
			return {
				getPhonePop: false,
	
			};
		},
		computed: {
			...mapState(['systemInfo', 'setColor', 'store_id', 'userInfo', 'teen_index', 'address']),
			style() {
				if (this.module.note.h) {
					let style = `height:${this.module.note.h}px;`
					return style;
				}
			}
		},
		mounted() {

		},
		methods: {
			// 子组件传参
			setClose(e) {
				this.getPhonePop = e;
			},
			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,
					}, "", "", hideLoading).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: "../my/my"
										})
									}
								})
							},
							fail: () => {},
							complete: () => {}
						});
					})
				} else {
					uni.showToast({
						title: "授权失败,请重新授权",
						icon: 'none'
					})
				}
				// #endif
			},

			// 开启会员弹窗
			onGetphone(e) {
				if (this.userInfo.mobile) {
					uni.showToast({
						title: "您已经完善过会员信息了，无需重复操作！",
						icon: 'none'
					})
					return
				}
				this.getPhonePop = true;
			},

		}
	};
</script>

<style lang="less" scoped>
	/***图文模块***/
	.module-item-tuwen{ margin-top:10px; position: relative; .mg0{ margin-top:0;}
		  .item-tuwen-con{ position: relative; overflow: hidden;}
				.item-tuwen-style1{ position: relative; z-index: 1;  padding:10px 0;  overflow: hidden;	
							.tit{ white-space: nowrap; font-size:14px; padding:10px; text-align:center; overflow: hidden; text-overflow: ellipsis;}		
							.item{ margin:0 10px; position: relative; overflow: hidden;width:auto;
									image{  display:block; height:150px; width:100%;} 										
								.note{ line-height:18px; color:#fff; background:rgba(0,0,0,0.5); position: absolute; bottom:0; 
								padding:6px 10px; width:100%;}
							}
				} 
				.item-tuwen-style2{ position: relative; display:flex; flex-wrap: wrap; z-index: 1; padding:10px 0; overflow: hidden;
							.item{  margin:0 10px;width:100%;
									image{  display:block; height:150px; width:100%;} 
									.tit{ white-space: nowrap; font-size:14px; padding-top:10px; text-align:center; overflow: hidden; text-overflow: ellipsis;}
									.note{ line-height:20px; color:#999; padding:6px 10px;}
							}
				}
		}

	/* 去除button默认样式 */
	button::after {
		border: none;
	}

	button {
		background-color: transparent;
		padding-left: 0;
		padding-right: 0;
		line-height: inherit;
	}

	button {
		border-radius: 0;
	}
</style>
