<template>
	<page-meta :page-style="themeColor"></page-meta>


	<view :style="{ backgroundColor: bgColor, minHeight: 'calc(100vh )' }" class="page-img">

		<!-- 自定义组件 -->
		<diy-index-page ref="indexPage" :value="topIndexValue" :scrollHeight="scrollHeight"
			:scrollTopHeight="scrollTopHeight" :bgUrl="bgUrl" v-if="topIndexValue">
			<diy-group ref="diyGroup" :diyData="diyData" :storeId="storeId" v-if="diyData.value"
				:height="scrollTopHeight"></diy-group>
			<!-- 版权信息 -->
			<view class="padding-bottom">
				<ns-copyright></ns-copyright>
			</view>
		</diy-index-page>


		<view class="bg-index" :style="{
			// backgroundImage: backgroundUrl,
			paddingTop: paddingTop,
			marginTop: marginTop
		}">

			<diy-group ref="diyGroup" :diyData="diyData" v-if="diyData.value" :storeId="storeId"></diy-group>

			<view class="padding-bottom"><ns-copyright></ns-copyright></view>
		</view>

		<!-- </scroll-view> -->
		<!-- 首页弹窗 -->
		<!-- diyData.global &&
		diyData.global.popWindow &&
		diyData.global.popWindow.count != -1 &&
		diyData.global.popWindow.imageUrl -->

		<template>
			<view @touchmove.prevent.stop>
				<uni-popup ref="uniPopupWindow" type="center" class="wap-floating" :maskClick="false">
					<view class="advCard" @click="uniPopupWindowFn()">
						<!-- <view class="advName">{{ diyData.global.popWindow.link.title }}</view> -->
						<view class="image-wrap">
							<image :src="$util.img(diyData.global.popWindow.imageUrl)" :style="popWindowStyle"
								mode="widthFix"></image>
						</view>
						<!-- <view class="advBtn" type="primary" @click="uniPopupWindowFn()">去看看</view> -->
					</view>

					<text class="iconfont icon-round-close" @click="closePopupWindow"></text>
				</uni-popup>
			</view>
		</template>

		<!-- 底部tabBar -->
		<view class="page-bottom" v-if="openBottomNav">
			<diy-bottom-nav @callback="callback" :name="name"></diy-bottom-nav>
		</view>


		<!-- 收藏 -->
		<uni-popup ref="collectPopupWindow" type="top" class="wap-floating wap-floating-collect">
			<view v-if="showTip" class="collectPopupWindow"
				:style="{ marginTop: (collectTop + statusBarHeight) * 2 + 'rpx' }">
				<image :src="$util.img('public/uniapp/index/collect2.png')" mode="aspectFit"></image>
				<text @click="closeCollectPopupWindow">我知道了</text>
			</view>
			--
		</uni-popup>



		<!-- loading -->
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
	<movable-area class="movableArea">
		<movable-view :x="x" :y="y" direction="all" @change="onChange" class="movableView">

			<view class="iconBox">
				<!-- <img class="kefu_Icon" @click="goChat()" :src="$util.img('/upload/weapp/user/kefu.png')" /> -->
				<img class="kefu_Icon" @click="goChat()" :src="floatData.list[0].imageUrl" />
				<!-- 	<view class="title">
					客服
				</view> -->
			</view>

		</movable-view>
	</movable-area>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import diyJs from '@/common/js/diy.js';
	import indexJs from './public/js/index.js';
	import APPUpdate from '@/config/appUpdate.js';
	import {
		getCurrentNo
	} from '@/config/appUpdate.js'
	export default {
		components: {
			uniPopup
		},
		mixins: [diyJs, indexJs],
		data() {
			return {
				divTrue: true,
				token: uni.getStorageSync('token'),
				x: 300,
				y: 600,
				old: {
					x: 0,
					y: 0
				},
				site_tel: '',
				diyGlobalData: {},
				floatData: {},

			};
		},
		onLoad() {
			// this.site_tel = uni.getStorageSync('siteInfo').site_tel
			// uni.startPullDownRefresh();
			// uni.$on('refresh', data => {
			// 	if (data) {
			// 		this.$refs.diyGroup.$refs.ManyGoodsList[0].$refs.diyGoodsList.getGoodsList();
			// 	}
			// });
			// #ifdef APP-PLUS
			// true 没有新版本的时候有提示，默认：false
			APPUpdate(true, true);
			// #endif

		},
		onHide() {
			uni.$emit('videoStop')
		},
		onShow() {
			// uni.$emit('videoStart')
			this.getSystem()
		},
		methods: {
			getSystem() {
				//#ifdef APP-PLUS
				getCurrentNo(({
					versionCode,
					versionName
				}) => {
					console.log('========versionCode', versionName);
					console.log('========versionCode', versionCode);

				})
				//#endif
			},
			goRouter(data) {
				uni.navigateTo({
					url: data.link.wap_url
				});
				this.$refs.uniPopupWindow.close();
			},
			// async goChat() {
			// let result = await this.$store.dispatch("requestPermissions", 'CALL_PHONE')
			// if (result !== 1) {
			// 	uni.showToast({
			// 		title: '手机未开启该权限，无法使用此功能',
			// 		icon: 'none'
			// 	})
			// 	return
			// }

			// uni.navigateTo({
			// 	url: '/pages_tool/news/chat'
			// });

			// return uni.makePhoneCall({
			// 	phoneNumber: this.site_tel, //仅为示例
			// })

			// },
			goChat() {
				this.$util.diyRedirectTo(this.floatData.list[0].link)
			},
			onChange(e) {
				let windowWidth, windowHeight;
				uni.getSystemInfo({
					success: function(res) {

						windowWidth = (res.windowWidth);
						windowHeight = (res.windowHeight);
					}
				});

				// if (e.detail.x < 0) {
				// 	e.detail.x = 0
				// };
				// let Width = windowWidth - 60;
				// if (e.detail.x > Width) {
				// 	e.detail.x = Width
				// };
				// if (e.detail.y < 0) {
				// 	e.detail.y = 0
				// };
				// if (e.detail.y > (windowHeight - 120)) {
				// 	e.detail.y = (windowHeight - 120)
				// };
				this.old.x = e.detail.x;
				this.old.y = e.detail.y;
				this.x = e.detail.x;
				this.y = e.detail.y;

			}

		}
	};
</script>




<style lang="scss">
	@import '@/common/css/diy.scss';
</style>

<style scoped lang="scss">
	/deep/ .noStore-bg {
		margin-top: 20rpx;
	}

	/deep/.wap-floating .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
		background: none !important;
	}

	/deep/ .placeholder {
		height: 0;
	}

	/deep/::-webkit-scrollbar {
		width: 0;
		height: 0;
		background-color: transparent;
		display: none;
	}

	/deep/ .ns-copyright-info {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.advName {
		text-align: center;
		font-size: 40rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 70rpx;
	}

	.advCard {
		padding: 30rpx;
		// background: linear-gradient(180deg, #e9f9ff 0%, #f7fdff 100%);
		// border-radius: 32rpx;
		// border: 3rpx solid #ffffff;

		.advBtn {
			width: 50%;
			margin: 20rpx auto;
			background: linear-gradient(134deg, #80ddff 0%, #35c9ff 100%);
			box-shadow: 0rpx 8rpx 24rpx 0rpx #cdf3ff;
			border-radius: 46rpx;
			border: 2rpx solid #ffffff;
			padding: 10rpx 0;
			text-align: center;
			color: #fff;
		}



		/* #ifdef MP-WEIXIN */
		/deep/ button {
			margin: 0 !important;
		}

		/* #endif */
	}

	.movableArea {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		pointer-events: none; //设置area元素不可点击，则事件便会下移至页面下层元素
		z-index: 9;
	}

	.movableView {
		pointer-events: auto; //可以点击

	}

	.iconBox {
		width: 100rpx;
		height: 100rpx;
		// border-radius: 50%;
		// background: rgba(255, 255, 255, 0.8);
		padding: 5rpx;
		z-index: 11;
		// border: 1rpx solid #ccc;
		// box-shadow: 0rpx 5rpx 7rpx 5rpx rgba(117, 84, 0, 0.08);

		.kefu_Icon {
			width: 100%;
			height: 100%;
			margin: 0 18rpx;
		}

		.title {
			width: 72rpx;
			font-size: 24rpx;
			margin: 0 14rpx;
			line-height: 0rpx !important;
			// margin-top: 5rpx;
			text-align: center;
		}
	}
</style>