<template>
	<view class="box">
		<view class="header">
			<view class="header_top">
				<view class="content">
					<view class="left">
						<u--image class="image" :src="tenant.logo" width="160rpx" height="160rpx" shape="circle"></u--image>
					</view>
					<view class="center">
						<view class="top">{{tenant.name}}</view>
						<view class="text">
							<view class="detail"><u-icon style="display: inline-block;line-height: 28rpx;" name="file-text-fill" color="#fff" size="28rpx"></u-icon>简介:{{tenant.introduction}}</view>
							<view class="detail"><u-icon style="display: inline-block;line-height: 28rpx;" name="phone" color="#fff" size="28rpx"></u-icon>电话:{{tenant.serviceMobile}}</view>
							<view class="detail"><u-icon style="display: inline-block;line-height: 28rpx;" name="clock" color="#fff" size="28rpx"></u-icon>服务时间:{{tenant.serviceTime}}</view>
						</view>
					</view>
					<view class="right">
						<view class="up"></view>
						<text>会员等级3级</text>
						<view class="button">查看权益</view>
					</view>
				</view>
			</view>
			<view class="header_bottom">
				<navigator :url="bannerList.url">
					<image :src="bannerList.picUrl" mode=""></image>
				</navigator>
			</view>
		</view>
		<view class="notice">
			<u-notice-bar :text="text" fontSize="26rpx" color="#000" bgColor="transparent"></u-notice-bar>
		</view>
		<view class="hot">
			<view class="contain"></view>
			<view class="top">
				<view class="left">
					<view class="icon"></view>
					<text>聚划算</text>
				</view>
				<view class="right">
					<view class="search">
						<view class="icon">
							
						</view>
						<view class="input">
							<u--input
							    placeholder="请输入内容"
							    v-model="value"
							    @change="change"
							  ></u--input>
						</view>
						<view class="button" @tap="searchSubmitValue">
							搜索
						</view>
					</view>
				</view>
			</view>
			<view class="bottom">
				<view class="item">
					<image src="@/static/images/shop/index_cart.png"></image>
					<view class="title">爆款秒杀</view>
					<image class="img1" src="@/static/images/shop/shoes.png" mode=""></image>
					<image class="img2" src="@/static/images/shop/cloth.png" mode=""></image>
				</view>
				<view class="item">
					<image src="@/static/images/shop/index_cart.png"></image>
					<view class="title rank">排行榜</view>
					<image class="img1" src="@/static/images/shop/shoes.png" mode=""></image>
					<image class="img2" src="@/static/images/shop/cloth.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="container">
		        <view class="item" v-for="item in productList" @click="goDetail(item)">
		        	<image :src="item.image" mode=""></image>
					<view class="name">{{item.storeName}}</view>
					
					<text><u--text color="#E50202" mode="price" :text="item.price"></u--text></text>
		        </view>
		    </view>
			<view class="" style="margin-top: 110rpx;">
				
			</view>
	</view>
</template>

<script>
	import Auth from '@/libs/wechat';
	import Cache from '../../utils/cache';
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	let app = getApp();
	import {
		getIndexData,
		getCoupons,
		setCouponReceive
	} from '@/api/api.js';
	import {
		productPage,
		getSpuDetail,
		getBanner,
		getTenant
	} from '../../api/product.js'
	import {
		postCartAdd
	} from '../../api/store.js'
	// #ifdef MP-WEIXIN
	import {
		getTemlIds
	} from '@/api/api.js';
	
	// import {
	// 	SUBSCRIBE_MESSAGE,
	// 	TIPS_KEY
	// } from '@/config/cache';
	// #endif
	// #ifdef H5  
	import {
		follow
	} from '@/api/public.js';
	// #endif
	import {
		getShare
	} from '@/api/public.js';
	import a_seckill from './components/a_seckill';
	import b_combination from './components/b_combination';
	import c_bargain from './components/c_bargain';
	import goodList from '@/components/goodList';
	import promotionGood from '@/components/promotionGood';
	import couponWindow from '@/components/couponWindow';
	import ClipboardJS from "@/plugin/clipboard/clipboard.js";
	import {
		goShopDetail
	} from '@/libs/order.js'
	import {
		mapGetters
	} from "vuex";
	import tabNav from '@/components/tabNav.vue'
	import countDown from '@/components/countDown';
	import {
		getCategoryList,
		getProductslist,
		getProductHot,
		getGroomList
	} from '@/api/store.js';
	import {
		setVisit,
		getUserInfo
	} from '@/api/user.js'
	import recommend from '@/components/recommend';
	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif
	import {
		silenceBindingSpread
	} from '@/utils';
	// #ifndef MP
	import {
		kefuConfig
	} from "@/api/public";
	import {
		getWechatConfig
	} from "@/api/public";
	// #endif
	import Loading from '@/components/Loading/index.vue';
	const arrTemp = ["beforePay", "afterPay", "refundApply", "beforeRecharge", "createBargain", "pink"];
	export default {
		computed: mapGetters(['isLogin', 'uid']),
		components: {
			tabNav,
			goodList,
			promotionGood,
			couponWindow,
			countDown,
			a_seckill,
			b_combination,
			c_bargain,
			recommend,
			// #ifdef MP
			authorize,
			// #endif
			Loading
		},
		data() {
			return {
				loaded: false,
				loading: false,
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				statusBarHeight: statusBarHeight,
				navIndex: 0,
				navTop: [],
				followUrl: "",
				value: '',
				followHid: true,
				followCode: false,
				logoUrl: "",
				bannerList: {},
				imgUrls: [],
				itemNew: [],
				menus: [],
				bastInfo: '',
				fastInfo: '',
				fastList: [],
				text:'尊敬的业主：接环卫所通知，近期将对小区进行大扫除，请大家做好准备',
				firstInfo: '',
				salesInfo: '',
				indicatorDots: false,
				circular: true,
				autoplay: true,
				interval: 3000,
				duration: 500,
				window: false,
				iShidden: false,
				navH: "",
				newGoodsBananr: '',
				couponList: [],
				liveList: [],
				productList: [],
				hotList: [{
					pic: '/static/images/hot_001.png'
				}, {
					pic: '/static/images/hot_002.png'
				}, {
					pic: '/static/images/hot_003.png'
				}],
				ProductNavindex: 0,
				marTop: 0,
				childID: 0,
				loadend: false,
				loadTitle: '加载更多',
				sortProduct: [],
				where: {
					cid: 0,
					page: 1,
					limit: 10,
				},
				is_switch: true,
				hotPage: 1,
				hotLimit: 10,
				hotScroll: false,
				explosiveMoney: [],
				prodeuctTop: 0,
				searchH: 0,
				userInfo: {},
				isFixed: false,
				goodType: 0, //精品推荐Type
				goodScroll: true, //精品推荐开关
				params: { //精品推荐分页
					page: 1,
					limit: 10,
				},
				tempArr: [], //精品推荐临时数组
				roll: [], // 新闻简报
				site_name: '', //首页title
				iSshowH: false,
				configApi: {}, //分享类容配置
				spikeList: [], // 秒杀
				point: '',
				tenant: {},
				privacyStatus: false, // 隐私政策是否同意过
				tabsScrollLeft: 0, // tabs当前偏移量
				scrollLeft: 0,
				lineColor: 'red',
				lineStyle: {}, // 下划线位置--动态甲酸
				listActive: 0, // 当前选中项

				duration: 0.2 // 下划线动画时长
			}
		},
		watch: {
			ProductNavindex(newVal) { // 监听当前选中项
				this.setTabList()
			},
			listActive(newVal) { // 监听当前选中项
				this.setTabList()
			}
		},
		mounted() {
			this.setTabList()
		},
		onLoad() {
			var that = this;
			// 获取系统信息
			uni.getSystemInfo({
				success(res) {
					that.$store.commit("SYSTEM_PLATFORM", res.platform);
				}
			});
			uni.getLocation({
				type: 'gcj02',
				altitude: true,
				geocode: true,
				success: function(res) {
					try {
						uni.setStorageSync('user_latitude', res.latitude);
						uni.setStorageSync('user_longitude', res.longitude);
					} catch {}
				}
			});
			let self = this
			// #ifdef MP
			// 获取小程序头部高度
			this.navH = app.globalData.navHeight;
			let info = uni.createSelectorQuery().select(".mp-header");
			info.boundingClientRect(function(data) {
				self.marTop = data.height
				self.poTop = Number(data.height) + 84
			}).exec()
			// #endif
			// #ifndef MP
			this.navH = 0;
			// #endif
			this.isLogin && silenceBindingSpread();
			// Promise.all([this.getAllCategory(), this.getIndexConfig()
			// 	// , this.setVisit()
			// ]);
			getUserInfo().then(res => {
				this.userInfo = res.data
				getTenant(153).then(res=>{
					this.tenant = res.data
					this.text = res.data.notice
				})
			})
			this.getBanners()
			this.getIndexPage()
			this.getIndexConfig();
			// #ifdef MP
			this.getTemlIds()
			// #endif
		},
		onShow() {
			let self = this
			uni.setNavigationBarTitle({
				title: self.site_name
			})
		},
		methods: {
			change(){
				console.log(this.value,'value')
			},
			// 搜索
			searchSubmitValue: function() {
				if (this.value.length > 0)
					uni.navigateTo({
						url: '/pages/goods_list/index?searchValue=' + this.value
					})
				else
					return this.$util.Tips({
						title: '请填写要搜索的产品信息'
					});
			},
			// 加入购物车
			addCart(id){
				getSpuDetail(id).then(res => {
					console.log(res.data.productValue.默认.id,'1111111111111')
					let unique = res.data.productValue.默认.id
					postCartAdd({
						productId: id,
						productAttrUnique: unique,
						cartNum: 1
					}).then(res=> {
						console.log('加入成功')
					})
				})
			},
			go(){
				console.log(this.productList,'------')
			},
			
			// 获取banner和userInfo
			getBanners(){
				
				// console.log(this.$store.tenantId,'tenantId')
				getBanner().then(res=>{
					this.bannerList = res.data.list[0]
					console.log(this.bannerList,'banner')
				})
				console.log(this.userInfo.userId,'userInfo111111')
				
			},
			getCoupon: function(id, index) {
				let that = this;
				//领取优惠券
				setCouponReceive(id).then(function(res) {
					that.$set(that.couponList[index], 'isUse', true);
					that.$util.Tips({
						title: '领取成功'
					});
				}, function(res) {
					return that.$util.Tips({
						title: res
					});
				})
			},
			clickSort(index) {
				this.listActive = index
			},
			// scroll-view滑动事件
			scroll(e) {
				this.scrollLeft = e.detail.scrollLeft;
			},
			setTabList() {
				this.$nextTick(() => {
					//this.setLine()
					this.scrollIntoView()
				})
			},
			// 计算tabs位置
			scrollIntoView() { // item滚动
				let lineLeft = 0;
				this.getElementData('#tab_list', (data) => {
					let list = data[0]
					this.getElementData(`#tab_item`, (data) => {
						let el = data[this.listActive]
						lineLeft = el.width / 2 + (-list.left) + el.left - list.width / 2 - this.scrollLeft
						this.tabsScrollLeft = this.scrollLeft + lineLeft
					})
				})
			},
			//  计算下划线位置
			setLine() {
				let lineWidth = 0,
					lineLeft = 0
				this.getElementData(`#tab_item`, (data) => {
					let el = data[this.listActive]
					lineWidth = el.width / 2
					// lineLeft = el.width * (this.currentIndex + 0.5)  // 此种只能针对每个item长度一致的
					lineLeft = el.width / 2 + (-data[0].left) + el.left
					this.lineStyle = {
						width: `${lineWidth}px`,
						transform: `translateX(${lineLeft}px) translateX(-50%)`,
						transitionDuration: `${this.duration}s`
					};
				})
			},
			getElementData(el, callback) {
				uni.createSelectorQuery().in(this).selectAll(el).boundingClientRect().exec((data) => {
					callback(data[0]);
				});
			},
			xieyiApp() {
				uni.navigateTo({
					url: '/pages/users/web_page/index?webUel=https://admin.java.crmeb.net/useragreement/xieyi.html&title=协议内容'
				})
			},
			// #ifdef MP
			getTemlIds() {
				for (var i in arrTemp) {
					this.getTem(arrTemp[i]);
				}
			},
			getTem(data) {
				getTemlIds({
					type: data
				}).then(res => {
					if (res.data) {
						let arr = res.data.map((item) => {
							return item.tempId
						})
						wx.setStorageSync('tempID' + data, arr);
					}
				})
			},
			// #endif
			// 首页数据
			getIndexConfig: function() {
				let that = this;
				getIndexData().then(res => {
					uni.setNavigationBarTitle({
						title: '首页'
					})
					that.$set(that, "logoUrl", res.data.logoUrl);
					that.$set(that, "site_name", '首页');
					that.$set(that, "imgUrls", res.data.banner);
					that.$set(that, "menus", res.data.menus);
					that.$set(that, "roll", res.data.roll ? res.data.roll : []);
					// #ifdef H5
					that.$store.commit("SET_CHATURL", res.data.yzfUrl);
					Cache.set('chatUrl', res.data.yzfUrl);
					// #endif
					that.$set(that, "explosiveMoney", res.data.explosiveMoney);
					that.goodType = res.data.explosiveMoney[0].type
					this.getGroomList();
					this.shareApi();
					this.getcouponList();
					
					// #ifdef H5
					// that.subscribe = res.data.subscribe;
					// #endif

				})
			},
			// 首页商品
			getIndexPage(){
				let that = this
				productPage().then(res=>{
					console.log(res.data.list,'商品列表')
					this.productList = this.productList.concat(res.data.list)
					console.log(this.productList,'---------')
				})
			},
			getcouponList() {
				let that = this;
				getCoupons({
					page: 1,
					limit: 6
				}).then(res => {
					that.$set(that, "couponList", res.data);
					// 小程序判断用户是否授权；
					// #ifdef MP
					uni.getSetting({
						success(res) {
							if (!res.authSetting['scope.userInfo']) {
								that.window = that.couponList.length ? true : false;
							} else {
								that.window = false;
								that.iShidden = true;
							}
						}
					});
					// #endif
					// #ifndef MP
					if (that.isLogin) {
						that.window = false;
					} else {
						that.window = res.data.length ? true : false;
					}
					// #endif
				}).catch(err => {
					return this.$util.Tips({
						title: err
					});
				});
			},
			shareApi: function() {
				getShare().then(res => {
					this.$set(this, 'configApi', res.data);
					// #ifdef H5
					this.setOpenShare(res.data);
					// #endif
				})
			},
			getChatUrL() {
				kefuConfig().then(res => {
					let data = res.data;
					this.$store.commit("SET_CHATURL", data.yzfUrl);
					Cache.set('chatUrl', data.yzfUrl);
				})
			},
			// 微信分享；
			setOpenShare: function(data) {
				let that = this;
				if (that.$wechat.isWeixin()) {
					let configAppMessage = {
						desc: data.synopsis,
						title: data.title,
						link: location.href,
						imgUrl: data.img
					};
					that.$wechat.wechatEvevt(["updateAppMessageShareData", "updateTimelineShareData"],
						configAppMessage);
				}
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			// 授权回调
			onLoadFun() {

			},
			// 首发新品切换
			ProductNavTab(item, index) {
				this.listActive = index
				this.goodType = item.type
				this.listActive = index
				this.ProductNavindex = index
				this.tempArr = []
				this.params.page = 1
				this.goodScroll = true
				let onloadH = true
				this.getGroomList(onloadH)
			},
			// 首发新品详情
			goDetail(item) {
				if (item.activityH5 && item.activityH5.type === "2" && !this.isLogin) {
					toLogin();
				} else {
					goShopDetail(item, this.uid).then(res => {
						uni.navigateTo({
							url: `/pages/goods_details/index?id=${item.id}`
						})
					})
				}
			},
			// 分类详情
			godDetail(item) {
				goShopDetail(item, this.uid).then(res => {
					uni.navigateTo({
						url: `/pages/goods_details/index?id=${item.id}`
					})
				})
			},
			// 精品推荐
			getGroomList(onloadH) {
				this.loading = true
				let type = this.goodType;
				if (!this.goodScroll) return
				if (onloadH) {
					this.iSshowH = true
				}
				getGroomList(type, this.params).then(({
					data
				}) => {
					this.iSshowH = false
					this.loading = false
					this.goodScroll = data.list.length >= this.params.limit
					this.params.page++
					this.tempArr = this.tempArr.concat(data.list)
				})
			},
			/**
			 * 获取我的推荐
			 */
			get_host_product: function() {
				let that = this;
				that.loading = true;
			
				if (that.hotScroll) return
				getProductHot(
					that.hotPage,
					that.hotLimit,
				).then(res => {
					that.hotPage++
					that.hotScroll = res.data.list.length < that.hotLimit
					that.hostProduct = that.hostProduct.concat(res.data.list)
				});
			},
		},
		mounted() {
			let self = this
			// #ifdef H5
			//self.getChatUrL();
			// 获取H5 搜索框高度
			let appSearchH = uni.createSelectorQuery().select(".serch-wrapper");
			appSearchH.boundingClientRect(function(data) {
				self.searchH = data.height
			}).exec()
			// #endif
		},
		/**
		 * 用户点击右上角分享
		 */
		// #ifdef MP
		onShareAppMessage: function() {
			return {
				title: this.configApi.title,
				imageUrl: this.configApi.img,
				desc: this.configApi.synopsis,
				path: '/pages/index/index'
			};
		},
		// #endif
		onReachBottom() {
			if (this.navIndex == 0) {
				// 首页加载更多
				if (this.params.page != 1) {
					this.getGroomList();
				}
			} else {
				// 分类栏目加载更多
				if (this.sortProduct.length > 0) {
					//this.get_product_list();
				} else {
					this.get_host_product();
				}
			}
		},
	}
</script>
<style>
	page {
		display: flex;
		flex-direction: column;
		height: 100%;
		/* #ifdef H5 */
		background-color: #fff;
		/* #endif */

	}
</style>
<style lang="scss">
.box {
	.header {
		position: relative;
		width: 100%;
		height: 544rpx;
		background: url(@/static/images/shop/index_headerbg.png);
		background-size: 100% 100%;
		.header_top {
			position: relative;
			width: 100%;
			height: 457rpx;

			.content {
				width: 100%;
				display: flex;
				justify-content: space-around;
				align-items: center;
				position: absolute;
				top: 109rpx;
				.left {
					width: 164rpx;
					height: 164rpx;
						
					.image {
						border: 3rpx solid #EE5423;
						border-radius: 50%;
						border: linear-gradient(0deg, #F77C4D, #EE5423);
					}
					
				}
				.center {
					width: 330rpx;
					height: 170rpx;
					.top {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
					}
					.text {
						margin-top: 25rpx;
						.detail {
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
						}
					}
				}
				.right {
					width: 150rpx;
					height: 170rpx;
					display: flex;
					justify-content: space-around;
					flex-wrap: wrap;
					align-items: center;
					.up {
						width: 90rpx;
						height: 100rpx;
						background: #EE5423;
					}
					text {
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
					}
					.button {
						width: 119rpx;
						height: 36rpx;
						border-radius: 18rpx;
						background: #F22E60;
						text-align: center;
						line-height: 36rpx;
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
					}
				}
			}
		}
		.header_bottom {
			position: absolute;
			margin-left: 43rpx;
			bottom: 0;
			width: 664rpx;
			height: 238rpx;
			// background: url(@/static/images/shop/index_hbottom.png);
			// background-size: 100% 100%;
			image {
				width: 664rpx;
				height: 238rpx;
				border-radius: 20rpx;
			}
		}
	}
	.notice {
		margin-top: 30rpx;
		margin-left: 48rpx;
		width: 658rpx;
		height: 67rpx;
		background: #fff;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		
	}
	.hot {
		width: 663rpx;
		height: 322rpx;
		margin-top: 27rpx;
		margin-left: 44rpx;
		background: #fff;
		border-radius: 20rpx;
			
		.contain {
			width: 100%;
			height: 1rpx;
			margin-bottom: 26rpx;
		}
		.top {
			width: 100%;
			height: 55rpx;
			display: flex;
			justify-content: space-between;
			.left {
				height: 100%;
				margin-left: 19rpx;
				display: flex;
				justify-content: space-around;
				.icon {
					width: 40rpx;
					height: 40rpx;
					background: url(@/static/images/shop/index_hot.png);
					background-size: 100% 100%;
				}
				text {
					margin-left: 11rpx;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #000000;
				}
			}
			.right {
				width: 387rpx;
				height: 100%;
				.search {
					width: 387rpx;
					height: 55rpx;
					border: 1rpx solid #FE7596;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-radius: 27rpx;
					.icon {
						margin-left: 10rpx;
						width: 37rpx;
						height: 31rpx;
						background: url(@/static/images/shop/index_search.png);
						background-size: 100% 100%;
					}
					.button {
						margin-right: 3rpx;
						width: 82rpx;
						height: 46rpx;
						line-height: 45rpx;
						text-align: center;
						background: linear-gradient(0deg, #F02563 0%, #FE7596 100%);
						border-radius: 22.5rpx;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
					}
				}
			}
		}
		.bottom {
			margin-top: 27rpx;
			height: 200rpx;
			overflow: scroll;
			white-space: nowrap;
			.item {
				position: relative;
				display: inline-block;
				width: 370rpx;
				height: 199rpx;
				margin-left: 19rpx;
				image {
					width: 370rpx;
					height: 199rpx;
				}
				.title {
					position: absolute;
					left: 22rpx;
					top: 22rpx;
					width: 116rpx;
					height: 34rpx;
					line-height: 34rpx;
					text-align: center;
					background: linear-gradient(0deg, #FF4200 0%, #FFB21D 100%);
					border-radius: 8rpx;
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}
				.rank {
					width: 90rpx;
					height: 34rpx;
					line-height: 34rpx;
					background: linear-gradient(0deg, #F74A7B 0%, #FFAFAF 100%);
					border-radius: 8rpx;
				}
				.img1 {
					position: absolute;
					left: 17rpx;
					top: 81rpx;
					width: 166rpx;
					height: 71rpx;
				}
				.img2 {
					position: absolute;
					top: 22rpx;
					right: 25rpx;
					width: 138rpx;
					height: 132rpx;
				}
			}
		}
	}
	.container {
		width: 663rpx;
		margin-left: 44rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.item {
			position: relative;
			margin-top: 28rpx;
			width: 322rpx;
			height: 404rpx;
			background: #fff;
			overflow: hidden;
			border-radius: 20rpx;
				
			image {
				width: 100%;
				height: 294rpx;
			}
			.name {
				margin-left: 15rpx;
				margin-bottom: 10rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				font-weight: 400;
				color: #000000;
			}
			text {
				position: absolute;
				right: 20rpx;
				bottom: 14rpx;
				font-size: 28rpx;
				white-space: nowrap;
				font-family: PingFang SC;
				font-weight: 400;
				color: #E50202;
			}
			.car {
				position: absolute;
				
				width: 60rpx;
				height: 60rpx;
				background: url(@/static/images/shop/car.png);
				background-size: 100% 100%;
			}
		}
	}
}
::v-deep .notice{
	.u-icon__icon {
			color: #FF4802 !important;
				
			span {
				font-size: 28rpx;
			}
} 
			
		}
</style>
