<template>
	<view class="page" v-if="loadPageFlag" :style="{background:(BgConfig.BackgroundObj.type==1?BgConfig.BackgroundObj.bgColor:('url('+BgConfig.BackgroundObj.path+') no-repeat '+ BgConfig.BackgroundObj.pathColor))}">
		<status-bar :backgroundColor="BgConfig.BackgroundObj.bgColor" v-if="false"></status-bar>

		<diy :BgConfig="BgConfig"  :PageContent="PageContent" :pageId="pageId" :PageNav="PageNav" :loadPageFlag="loadPageFlag" :StoreInfo="StoreInfo"></diy>

		<!-- #ifdef APP-PLUS -->
		<share-box-app :shareDataDefault="shareData" ref="shareBoxApp"></share-box-app>
		<!-- #endif -->


		 <view
      class="diy_goods_carts"
	    @click="gopage(`/pages/index/cart?category_id=${shopInfo.category_id}&store_id=${shopInfo.store_id}`)"
    >
      <view class="box">
        <image class="icon" src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/icon/icon_shop.png" />
        <text class="icon_badge">{{ goodsNum }}</text>
      </view>
    </view>
	</view>
</template>

<script>
import statusBar from '../../components/status-bar.vue';

// #ifdef APP-PLUS
import shareBoxApp from '../../components/share-box-app.vue'
// #endif

import diy from '../../components/themes/diy.vue'
import wxParse from '@/components/u-parse/u-parse.vue'
import diyCountdown from '../../components/themes/diy-countdown'
import { mapState, mapMutations } from 'vuex';

export default {
	/**
	 * 页面的初始数据
	 */
	data: function() {
		return {
			goodsNum: 0,
			options: {},
			PageData: {},
			PageContent: [],
			BgConfig: {BackgroundObj:{type:1, bgColor:'#ffffff' ,"pathColor":"#f8f8f8","path":""}},
			PageNav:{window:{"navigationBarBackgroundColor":"#ffffff","navigationBarTextStyle":"black","navigationBarTitleText":"","backgroundColor":"#f8f8f8","backgroundTextStyle":"dark"}},
			loadPageFlag: false,
			shareImg: '',
			shareTitle: '',
			indexArray: [],
			page_id: 0,
			pageId: '',
			PageNav: {},
			StoreInfo: {},
			formdate: '',
			refresh: true,
			w: 0, //windowWidth
			chatUrl : '',
		
			shareData:{}
		};
	},

	components: {
		statusBar,
		diy,
		wxParse,
		diyCountdown,
		// #ifdef APP-PLUS
		shareBoxApp
		// #endif
	},
	computed: mapState([
		'Config',
		'StateCode',
		'notice',
		'plantformInfo',
		'shopInfo',
		'userInfo',
		'hasLogin',
		"cartNum",
	]),
	 watch: {
    cartNum: {
      handler(newVal) {
        this.goodsNum = newVal;
      },
      immediate: true,
    },
  },
	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad: function(options) {
		uni.setNavigationBarTitle({
			title:this.__('专题页面')
		});

		var that = this;

		var w = that.$.getSystemInfoSync().windowWidth;

		that.setData({
			w: w,
			options: options
		});

		this.getUserInfo(
			function(user) {
				that.setData({
					page_id: options.id
				});

				that.getPageInfo(false);
			}
		);
	},

	/**
	 * 生命周期函数--监听页面初次渲染完成
	 */
	onReady: function() {
		//
	},

	/**
	 * 生命周期函数--监听页面显示
	 */
	onShow: function() {
		this.refresh ||
			this.setData({
				refresh: true
			});
	},

	/**
	 * 生命周期函数--监听页面隐藏
	 */
	onHide: function() {},

	/**
	 * 生命周期函数--监听页面卸载
	 */
	onUnload: function() {
		// 离开页面，注销事件
		var that = this;
		this.notice.removeNotification('RefreshProduct', that);

		// #ifdef APP-PLUS
		if (this.$refs.shareBoxApp.showBoxView) {
			this.$refs.shareBoxApp.cancel();
		}
		// #endif
	},

	onBackPress() {
		// #ifdef APP-PLUS
		if (this.$refs.shareBoxApp.showBoxView) {
			this.$refs.shareBoxApp.cancel();
			return true;
		}
		// #endif
	},
	onNavigationBarButtonTap(e) {
		var that = this;

		if (e.index === 0) {
			that.onShareBox(e);
		} else {
			uni.showToast({
				title: "你点了收藏按钮",
				icon: "none"
			})
		}
	},
	/**
	 * 页面相关事件处理函数--监听用户下拉动作
	 */
	onPullDownRefresh: function() {
		this.setData({
			indexArray: []
		});
		this.getPageInfo(true);
	},

	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom: function() {},

	/**
	 * 用户点击右上角分享
	 */
	onShareAppMessage: function() {
		// #ifdef MP-WEIXIN
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		// #endif

		return {
			title: this.shareTitle,
			imageUrl: this.shareImg,
			path: '/pagesub/diy-page/diy-page?id=' + this.page_id + '&uid=' + this.userInfo.user_id
		};
	},

	/**
	 * 用户点击右上角分享朋友圈
	 */
	onShareTimeline: function () {
		return {
			title: this.shareTitle,
			query: {
				uid: this.userInfo.user_id,
				id: this.page_id
			},
			imageUrl: this.shareImg,
		}
	},

	/**
	 * 页面滚动触发事件的处理函数
	 */
	onPageScroll: function() {},

	methods: {
		...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),

		gopage(url){
			 this.$.navigateTo({
          url
        });
		},

		getPageInfo: function(force_refresh) {
			var that = this,
				params = {
					page_id: that.page_id
				};

			that.$.request({
				url: this.Config.URL.minipage,
				data: params,
				ajaxCache: {
					timeout: this.Config.CACHE_EXPIRE,
                    forceRefresh: force_refresh
				},
				success: function(data, status, msg, code) {
					that.$.stopPullDownRefresh();

					if (200 == status)
					{

						that.setData({
							loadPageFlag: true,
							pageId: data.page_id + '',
							PageContent: that.$.parseJSON(data.page_code),
							BgConfig: that.$.parseJSON(data.page_config),
							PageNav: that.$.parseJSON(data.page_nav),
							shareImg: data.page_share_image,
							shareTitle: data.page_share_title || data.page_name
						});

						if (that.PageNav.window.navigationBarTextStyle == 'black')
						{
							that.PageNav.window.navigationBarTextStyle = '#000000'
						}

						if (that.PageNav.window.navigationBarTextStyle == 'white')
						{
							that.PageNav.window.navigationBarTextStyle = '#ffffff'
						}

						that.$.setNavigationBarColor({
							frontColor: that.PageNav.window.navigationBarTextStyle,
							backgroundColor: that.PageNav.window.navigationBarBackgroundColor
						})

						that.$.setNavigationBarTitle({
							title: data.page_name
						});
						for (var n in that.PageContent) {
							//that.PageContent[n].eltmType == 2 && WxParse.wxParse("word" + n, "html", that.PageContent[n].eltm2.words, that)
						}

						if (that.hasLogin && data.im_enable)
						{
							
                            var perm_id = that.$.getStorageSync('uid');
                            var perm_key = that.$.getStorageSync('ukey');

                            let chat_url = that.$.sprintf("/im/chat/chat?uid=%s", that.StoreInfo.im_user_id);

                            that.setData({
                            	StoreInfo: {
                            		im_enable:data.im_enable,
                            		im_user_id:data.im_user_id,
                            		puid:data.puid
                            	},
                            });
                           
						}



						//初始化微信分享
						let $title = that.shareTitle;
						let $desc = that.shareTitle || that.plantformInfo.site_meta_description;
						let $link = '';
						let $img_url = that.shareImg || that.plantformInfo.logo;

						//初始化微信分享
						that.$.wxShare($title, $desc, $link, $img_url)
					}
				}
			});
		},
		onShareBox: function(e) {
			let that = this;
			var $href = that.$.sprintf('%s/tmpl/product_detail.html?item_id=%d&FX=%d', this.Config.WapSiteUrl, this.skuid, this.userInfo.user_id);

			$href = that.$.sprintf('%s/h5/pagesub/diy-page/diy-page?id=%d&uid=%d', that.Config.SiteUrl, this.page_id, this.userInfo.user_id);
			// 如允许点击超链接跳转，则应该打开一个新页面，并传入href，由新页面内嵌webview组件负责显示该链接内容
			// #ifdef APP-PLUS
			// #endif

			// #ifdef MP-WEIXIN
			$href = '/pagesub/diy-page/diy-page?id=' + this.page_id + '&uid=' + this.userInfo.user_id
			// #endif

			
			this.setData({
				shareData: {
					shareTitle: this.shareTitle,
					shareText: this.shareTitle,
					href: $href,
					image: this.shareImg
				}
			});

			// 如允许点击超链接跳转，则应该打开一个新页面，并传入href，由新页面内嵌webview组件负责显示该链接内容
			// #ifdef APP-PLUS
			this.$refs.shareBoxApp.show();
			// #endif

			//海报
			if (e == 3)
			{
				// #ifndef APP-PLUS
				this.$refs.shareBoxMp.show();
				// #endif
			}
			else
			{
				// #ifdef H5
				if (that.$.ifUniApp())
				{
					this.$refs.shareBoxH5.show();
				}
				else
				{
					this.$refs.shareBoxMp.show();
				}
				// #endif
			}
		}
	}
};
</script>


<style lang="scss">
@import '../../styles/_variables.scss';

@import '../../styles/layout.scss';

.page {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	min-height: 100%;
	/* background-size: cover !important; */
	background-position: top center !important;
}

 .diy_goods_carts {
	position: fixed;
	right: 24rpx;
	bottom: 400rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex: 1;
    color: #666;
    text-align: center;
	background: #fff;
	border-radius: 100%;
	padding: 12rpx;
	box-shadow: 2rpx 4rpx 20rpx rgba(0,0,0,0.3);

    .icon {
      width: 64rpx;
      height: 64rpx;
      display: block;
    }

    .desc {
      font-size: 24rpx;
      line-height: 14rpx;
    }

    .icon_badge {
      display: block;
      position: absolute;
      right: -5px;
      top: -5px;
      text-align: center;
      line-height: 24rpx;
      font-size: 24rpx;
      padding: 4rpx 10rpx;
      border-radius: 20rpx;
      color: #fff;
      background: #dd524d;
    }

    .box {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 10rpx;
    }

    &.current {
       color: #dd524d;
       font-weight: 900;
    }
  }
</style>
