<template>
    <view class="home-page" style="background-image: url(https://business.coffunity.cn/upload/homebg.gif); width: 100%; background-size: cover;  background-position: center center;">
		
		<view class="tooltip tip1">Click here!</view>
		<view class="tooltip tip2">Let's go!</view>
	<view class="overlay" v-show="showMoreMenu" @tap="onOverlayTap"></view>
		<!-- 顶部用户信息导航 -->
		<view class="section-top">
			<view class="top-user-info">
				<view class="user-info">
					<view class="header-icon"  @tap.stop="onShowMoreMenu" >
						
						<image :src="userInfo.avatar" class="header"></image>
					
					</view>
					<view class="header-name">
						<view class="name">{{truncateString(userInfo.nickname, 6) }}</view>
						<view class="option" @click="onViewBind" v-if="userInfo.mobile">账户设置</view>                       
						<view class="option" @click="onViewBind" v-else>完善信息</view> 
					</view>
				</view>
				<view class="sub-menus" v-if="showMoreMenu" >
					<view class="mt10 menu" @click="onOpenWindows">
						<view class="icon"><image src="../../static/images/bike.png" class="img" mode="heightFix"/></view>
						<view class="name">出去兜兜</view>
					</view>
					<view class="menu" @click="onViewCalendar">
						<view class="icon"><image src="../../static/images/date.png" class="img" mode="heightFix"/></view>
						<view class="name">行程预约</view>
					</view>
					<view class="line"></view>
					<view class="menu">
						<view class="icon"><image src="../../static/images/bike.png" class="img" mode="heightFix"/></view>
						<view class="name">号外！号外！！！</view>
					</view>
					<view class='menu-content'>
						 <view class="menu-items">
							<block v-for="(it,index) in movieList">
							<view class="menu-item" @click="onViewZc(it)">
								<view class="item">
									<image :src="it.imageUrl" class="img" />
								</view>
								<view class="name">{{truncateString(it.name,4) }}</view> 
							</view>
							</block> 
						 </view>
					</view>
					<view class="line"></view>
					<view class="menu" @click="onViewEquity">
						<view class="icon"><image src="../../static/images/qy.png" class="img" mode="heightFix"/></view>
						<view class="name">我的卡券</view>
					</view>
		
					<view class="menu" @click="onOpenRenew">
						<view class="icon"><image src="../../static/images/fav.png" class="img" mode="heightFix"/></view>
						<view class="name">成为会员</view>
					</view>
					<view class="line"></view>
					<view class="menu">
						<view class="icon" ><image src="../../static/images/tel.png" class="img" mode="heightFix"/></view>
						<view class="name"><button hover-class="none" open-type="contact" style="background: none; color: white; font-size:13px;">在线客服</button></view>
					</view>
					<view class="menu">
						<view class="icon"><image src="../../static/images/share.png" class="img" mode="heightFix"/></view>
						<view class="name"><button  open-type= "share" style="background: none; color: white; font-size:13px;" hover-class="none">分享小程序</button></view>
					</view>
<!-- 					<view class="menu">
						<view class="icon"><image src="../../static/images/about.png" class="img" mode="heightFix"/></view>
						<view class="name">关于Coffunity</view>
					</view> -->
				</view>
			</view>
			<view class="menu-top">
				<view class="menu menu-share">
					<image src="../../static/images/vip.png" @click="onOpenRenew" class="icon"></image>
				</view>
				<view class="menu menu-date">
					<image src="../../static/images/date.png" @click="onViewCalendar" class="icon"></image>
				</view>
				<view class="menu menu-share" >
					<button  class="menu menu-share"  open-type= "share" style="background: none; " hover-class="none"><image src="../../static/images/shareto.png" class="icon"  ></image></button>
				</view> 
			</view> 
		</view>
		
		<!-- 书柜 -->
		<view class="section2">
			<view class="icon">
				 <view class="icon-lay1 lay-margin0">
					 <view class="lay-icon" @click="onViewLibary">
						 <image src="../../static/images/book.png" class="icon"></image>
					 </view>
					 <view class="lay-icon" @click="onViewSchool">
						 <image src="../../static/images/start.png" class="icon"></image>
					 </view>
					 <view class="lay-icon" @click="onViewFitness">
						 <image src="../../static/images/yl.png" class="icon"></image>
					 </view>
				 </view>
				 <view class="icon-lay1 lay-margin"  >
					 <view class="lay-icon" @click="onViewCoffee">
						 <image src="../../static/images/cf.png" class="icon"></image>
					 </view>
					 <view class="lay-icon" @click="onViewTheater">
						 <image src="../../static/images/face.png" class="icon"></image>
					 </view>
					 <view class="lay-icon">
						 <image src="../../static/images/ear.png" class="icon"></image>
					 </view>
				 </view>
			</view> 
			<view class="windows" @click="onOpenWindows" >
			
			</view>
		</view>
		
		<view class="section3">
			<view class="tel" >
				<image src="https://business.coffunity.cn/upload/syj.png" class="img" @click="onOpenHw"></image>
			</view>
			<view class="comp">
				<image src="https://business.coffunity.cn/upload/comp.png" class="img"></image> 
			</view> 
		</view>
		
		<view class="section4">
			<view class="char">  
			</view>
			<view class="user">
				<image v-if="userInfo.gender!=2" src="https://business.coffunity.cn/upload/mancat.webp"  style="width:245px;height:320px; z-index: 5;" ></image>
				<image v-else src="https://business.coffunity.cn/upload/womancat.webp"  style="width:245px;height:320px; z-index: 5;">
			</view>
			
		</view>
		<!-- 续费 -->
		<uni-popup ref="showRenewForm">
			<RenewForm :leveList="leveList"  @onCloseRenew="onCloseRenew"/>
		</uni-popup>
			
		<!-- vip表单 -->
		<uni-popup ref="vipForm">
			<VipForm :userInfo="userInfo"   @onOpenRenew="onOpenRenew"/>
		</uni-popup>
		
		<!-- 号外号外 -->
		<uni-popup ref="hwPopForm" type="center" style="z-index: 60;">
			 <SoundForm :dataList="movieList"></SoundForm>
		</uni-popup>
	<page-btm-bar :active="5" />
  
    </view>
</template>
<script>
	import audio from '../../diy/audio.vue';
	import swiper from '../../diy/swiper.vue';
	import coupon from '../../diy/coupon';
	import module from '../../diy/Module';
	import home from '../../diy/home'
	import VipForm from '@/components/VipForm/VipForm.vue'
	import RenewForm from '@/components/RenewForm/RenewForm.vue'
	import SoundForm from '@/components/SoundForm/SoundForm.vue'
 	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		components: {
			module,
			home,
			coupon,
			swiper,
			audio,
			VipForm,
			RenewForm,
			SoundForm
		},
		data() {
			return {
				List: {},
				loading: true,
				windowHeight: 0,
				is_template: false,
				is_popup: 1, 
				params:[],
				paramsList:[],
				movieList:[],
				dialogBtnType: 2,
				dialogBtnStyle: {
				    color: '#fff',
				    backgroundColor: 'red',
				},
				is_coupon:true,			
			    cityCode: '', 
				showMoreMenu:false,
				
				leveList:[],
			}
		},
       
		 onLoad() { 
			
			    
			     
			// #ifdef MP-ALIPAY
			this.$scope.onBeforeGetCoupon = this.onBeforeGetCoupon.bind(this)
			this.$scope.onGetCouponSuccess = this.onGetCouponSuccess.bind(this)
			this.$scope.onGetCouponFail = this.onGetCouponFail.bind(this)
			this.$scope.onUseImmediately = this.onUseImmediately.bind(this)
			this.$scope.onClose = this.onClose.bind(this)	
			// #endif
			uni.hideTabBar();
			if (this.$store.state.store_id) {
				 this.http();
				// #ifdef MP-ALIPAY
				this.getCouponList();
				// #endif
			}
			if (this.$store.state.systemInfo.set) {
				if (this.$store.state.systemInfo.set.is_pop != 0) {
					let is_pop = this.$store.state.systemInfo.set.is_pop;
					this.can_popup(is_pop);
					    // is_pop == 2 ? this.Coupons() :
						// is_pop == 1 ? this.homePop(1) :
						// is_pop == 3 ? this.homePop(3) : '';
				}
			}
			uni.getSystemInfo({
				success: (e) => {
					this.windowHeight = e.windowHeight;
				}
			})
			
			
		},

		
			//分享小程序
			onShareAppMessage() {
			    const promise = new Promise(resolve => {
			      setTimeout(() => {
			        resolve({
			          title: this.systemInfo.title,
					  imageUrl:this.detail.image[0],
					  path: '/pages/home/home',
			        })
			      }, 2000)
			    })
			    return {
			      title: this.systemInfo.title,
				  imageUrl:this.detail.image[0],
			      path: '/pages/home/home',
			      promise 
			    }
			},

		
		onReady() {
			this.$store.commit('SET_MERCHANT_ID', null) //清空分账号授权
			// #ifdef MP-ALIPAY
			my.getLocation({
				type: 1,
				success: (res) => {
					// console.log('getLocation', res.cityAdcode);
					this.cityCode = res.cityAdcode;
					 // '410100';
				},
				fail: (err) => {
					console.log(err, "err")
				}
			});
			// #endif
			
			let protocal=uni.getStorageSync("protocal"); 
			if(protocal!=true){
				uni.navigateTo({
					url:'/pages/protocal/protocal'
				})
			} 
		},
 
		onShow() {
			if (getApp().globalData.runMethod) {
			    this.onOpenRenew();
			    // 清除全局数据，以便下次不会再执行
			    getApp().globalData.runMethod = false;
			  }
			uni.hideTabBar(); 
			this.$store.dispatch('getOpenid', this.store_id);
			this.getOnLineList();
			this.initVipPackage();
		},

		created() {
			this.bus.$on('send', (data) => {
				this.$refs.popup.close();
			})
		},

		computed: {
			...mapState(['systemInfo', 'store_id', 'userInfo']),
			dateRange() {
				const {
					store_id,
					userInfo,
					systemInfo
				} = this;
				return {
					store_id,
					userInfo,
					systemInfo
				}
			}
		},

		watch: {
			store_id(nVal) {
				if (nVal) {
					this.http();
				}
			},
			systemInfo(nVal) {
				uni.setNavigationBarTitle({
					title: ' '
				})
			},
			// 弹窗校检
			dateRange: {
				handler(val) {
					if (val.store_id && val.userInfo) {
						// #ifdef MP-ALIPAY
						this.getCouponList();
						// #endif
					}
					if (this.is_popup == 2) {
						return
					}
					if (val.systemInfo.set) {
						this.is_popup = 2;
						// 是否开启弹窗
						if (val.systemInfo.set.is_pop == 0) {
							return
						}
						// 优惠劵弹窗
						if (val.systemInfo.set.is_pop == 2) {
							if (val.store_id && val.userInfo) {
								this.can_popup(2)
							}
						}
						// 语音弹窗
						if (val.systemInfo.set.is_pop == 1) {
							if (val.store_id && val.userInfo) {
								this.can_popup(1)
							}
						}
						// 轮播图弹窗
						if (val.systemInfo.set.is_pop == 3) {
							if (val.store_id && val.userInfo) {
								this.can_popup(3)
							}
						}
					}
				},
				deep: true,
			},
		},

		onPullDownRefresh() {
			this.$store.dispatch('getSystemStup', this.$store.state.store_id);
			this.http();
			this.$store.commit('SET_REFRESH', false)
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1500)
		},

		onShareAppMessage(e) {
			return {}
		},
		
		

		onHide() {
			this.$store.commit('SET_REFRESH', true)
		},

		onShareAppMessage(e) {
			return {}
		},

		onShareTimeline() {
			return{
				title:this.systemInfo.title,
				imageUrl:this.URL+this.systemInfo.thumb,
			}
		},

		methods: {
			...mapMutations(['SET_COUPON', 'SET_AUDIO', 'SET_SWIPER']),
			 onBeforeGetCoupon(resultList) {
			  return this.params
			},
			
			initInfo(){
    let _this=this;
    _this.$http.request('account/getInfo', {  
        id:_this.userInfo.id,                     
    }, "", "", true).then(res => { 
        // Set default values for userInfo.nickname and userInfo.avatar
        this.userInfo = {
            nickname: '微信用户',
            avatar: 'https://business.coffunity.cn/upload/default-avatar.jpg'
        };
        // Only update userInfo.nickname if nickname from server is not empty
        if (res.data.nickname && res.data.nickname.trim() !== '') {
            this.userInfo.nickname = res.data.nickname;
        }
        // Only update userInfo.avatar if avatar from server is not 'https://business.coffunity.cn'
        if (res.data.avatar && res.data.avatar.trim() !== 'https://business.coffunity.cn') {
            this.userInfo.avatar = res.data.avatar;
        }
        // other code...
    }).catch(err => {})
},
			onMyFav(){
				console.log("myfav");
			},
			
			
			onCloseRenew(e){
				this.$refs.showRenewForm.close();
			},
			
			
			onViewZc(e){
				uni.navigateTo({
					url:'/pages/theater/movie/movie?id='+e.id,
				})
			},
			
			onViewBind(e){
				uni.navigateTo({
					url:'/pages/user-detail/user-detail'
				})
			},
			 truncateString(str, maxLength) {
			      return str.length > maxLength ? str.substring(0, maxLength)+'...' : str;
			    },
			initVipPackage(){
				let _this=this; 
				_this.$http.request('account/getLevelList', { 
				}, "", "", true).then(res => {
					 
					_this.leveList=res.data; 
					 
				}).catch(err => {})
			},
			
			//获取线上影片
			getOnLineList(){
				let _this=this; 
				_this.$http.request('zc/home', { 
				}, "", "", true).then(res => { 
					_this.movieList=res.data; 
				}).catch(err => {})
			},
			
			
			
			onOpenWindows(){
				uni.navigateTo({
					url:'/pages/Center/Center'
				})
			},
			
			onOpenVip(e){
				this.$refs.vipForm.open('center'); 
			},
			
			//打开收音机
			onOpenHw(e){ 
				this.$refs.hwPopForm.open('center');
			},
			
			onOpenRenew(e){
				this.$refs.vipForm.close(); 
				this.$refs.showRenewForm.open("bottom");
			}, 
			
			onShowMoreMenu(){
			    this.showMoreMenu = !this.showMoreMenu;
			  },
			  onOverlayTap() {
			    this.showMoreMenu = false;
			  },
			
			onViewCalendar(e){
				uni.navigateTo({
					url:'/pages/my-calendar/my-calendar',
				})
			},
			onViewTheater(e){
				uni.switchTab({
					url:'/pages/theater/index/index'
				})
			},
			
			onViewCoffee(e){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			
			onViewFitness(e){
				uni.switchTab({
					url:'/pages/fitness/index/index'
				})
			},
			onViewSchool(e){
				uni.switchTab({
					url:'/pages/school/index/index',
				})
			},
			onViewLibary(e){
				uni.navigateTo({
					url:'/pages/school/library/library',
				})
			},
			
			onViewEquity(e){
				uni.navigateTo({
					url:'/pages/equity/equity',
				})
			},
			
		 
          // 领券请求 成功调用的事件，领券结果可能成功也可能失败。
			onGetCouponSuccess(resultList) { 
			  this.getResultList(resultList);
		      this.is_coupon = false;
			},
			onGetCouponFail(result) {

			},
			// 点击 立即使用 按钮触发的事件，前提是设置了 dialogBtnType 值为 2。
			onUseImmediately() {
			  this.paramsList=[];
			  uni.switchTab({
			    url: '/pages/index/index',
			  })
			},
			
			onClose() {
			  this.paramsList=[];
			},
			
			getResultList(resultList){
				let arr=[];
				for(let i of resultList){
					 arr.push({
						activityId:i.activityId,
						voucherCode:i.voucherCode
					 })  
				}
				// console.log(JSON.stringify(arr),"arr")
				this.$http.request('oil/successcode', {
					activityArr:JSON.stringify(arr),
					user_id:this.userInfo.id,
					store_id: this.store_id,
				  }, "", true, true).then(res => {
				})
			},
			
			getCouponList(){
				this.$http.request('oil/couponlist', {
					store_id: this.store_id,
					user_id:this.userInfo.id,
					page:1,
					limit:100,
				}, "", true, true).then(res => {
					  this.paramsList = res.data;
					  if(res.data.length>0){
						 for(let i of res.data){
							  // MERCHANT_UPLOAD 非劵码
							  // MERCHANT_API  导码
							  this.params.push({
								  activityId:i.activity_id,
								  outBizNo:i.content.out_biz_no,
								  customizeSendTime:i.content.publish_end_time,
								  voucherCode:i.voucherCode
							  })  
						 }
					  }
					  // console.log(this.params,"this.params")
				})
			},
			
			// 是否弹窗	
			can_popup(type) {
				let couponList = [];
				this.$http.request('xcx/can_popup', {
					store_id: this.store_id,
					user_id: this.userInfo.id
				}, "", true, true).then(res => {
					if (res.code === '200') {
						type == 1 ? this.homePop(1) : type == 2 ? this.Coupons() : type == 3 ? this
							.homePop(3) :
							'';
					}
				})
			},
	
			Coupons() {
				let couponList = [];
				this.$http.request('xcx/home_pop_up', {
					store_id: this.store_id,
					user_id: this.userInfo.id
				}, "", true, true).then(res => {
					for (let s of res.data) {
						s.checked = false;
						s.state = 1;
						if (s.is_index == 1) {
							couponList.push(s);
							this.SET_COUPON(couponList);
							if (couponList.length > 0) {
								this.$refs.popup.open();
								this.popup_log();
							} 
						}
					};
				})
			},
			
			// 获取语音||轮播图
			homePop(type) {
				this.$http.request('xcx/home_pop_up', {
					store_id: this.store_id,
					user_id: this.userInfo.id,
				}, "", true, true).then(res => {
					if (res.code === '200') {
						let arr = res.data;
						// console.log(arr, type, "arr")
						if (type == 1) {
							for (let s of arr) {
								s.is_check = 1;
								s.pic = getApp().globalData.URL + this.systemInfo.thumb;
								s.content = getApp().globalData.URL + s.src;
							}
							this.SET_AUDIO(arr);
						}
						if (type == 3) {
							this.SET_SWIPER(arr);
						}
						if (arr.length > 0) {
							this.$refs.popup.open();
							this.popup_log();
						}
					}
				})
			},
			
			popup_log() {
				this.$http.request('xcx/popup_log', {
					store_id: this.store_id,
					user_id: this.userInfo.id,
				}, "", true, true).then(res => {
					if (res.code === 200) {}
				})
			},

			// 关闭弹窗
			removeFn() {
				this.$refs.popup.colse();
			},

			http() {
				this.$http.request('template/detail', {
					id: this.$store.state.store_id,
					controller: 'admin'
				}, "", "", true).then(res => {
					this.loading = false;
					if (res.code === 200) {
						if (res.data.detail.template) {
							var template = JSON.parse(res.data.detail.template);
							// console.log(template, "template")
							let game_index = template.findIndex(item => item.isdefault);
							// console.log(game_index, "game_index")
							this.List = template[game_index];
							// console.log(this.List.moduleList[3], "template")
							this.is_template = false;
						} else {
							this.is_template = true;
						}
					}
				})
			},
			
		}
	}
</script>

<style lang="scss">
	@import "./home.scss"
</style>