<template>
	<!-- 积分商城 -->
	<view >
		<loadlogo v-if="!loadlogo" />
		<view class="container" v-if="loadlogo">
			<far-bottom></far-bottom>
			
			<view class="header b-f" :style="{'background-image':'url('+imageRoot+'inte_bg_1.png)'}">
				<view class="seach">
					<input type="text" v-model="searchInput" @confirm="openSearch" class="input" value="" placeholder="请输入商品名称" />
				</view>
				<view class="header-title dis-flex flex-y-center flex-x-between">
					<view class="header-title-left" style="padding: 20upx 0;">
						<view class="dis-flex flex-y-center">
							<view class="col-f f-24">我的{{textList.credittext}}</view>
							<view class="dis-flex flex-y-center">
								<image class="inte-logo" :src="imgfixUrls + 'integral/integral_logo.png'" mode=""></image>
								<view class="f-50 col-f">{{homeInfoData.integral}}</view>
							</view>
						</view>
					</view>
				</view>
				<swiper :autoplay="true" :interval="3000" :duration="1000" class="swiperView">
					<swiper-item class="swiperItem" v-for="(item,index) in homeInfoData.adv" :key="index" @click="navgateTolink(item.link)">
						<view class="inte-bg" :style="{'background-image':'url('+item.thumb+')'}"></view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 社群 -->
			<view v-if="!!homeInfoData.community" class="padding-box-all b-f">
				<view class="diyPages-community dis-flex flex-x-between flex-y-center">
					<view class="community-user dis-flex flex-y-center flex-box ">
						<image :src="homeInfoData.community.imgUrl" class="community-user-img"></image>
						<view class="community-user-info flex-box">
							<view class="community-user-name col-0 f-28">{{ homeInfoData.community.name }}</view>
							<view class="community-user-des f-24 col-9 onelist-hidden">{{homeInfoData.community.introduce}}</view>
						</view>
					</view>
					<view class="community-btn" v-if="!!homeInfoData.community">
						<button class="community-add community-add-bgcolor f-24 col-f" @click="showCommunity = true" v-if="!!homeInfoData.community">添加</button>
					</view>
				</view>
				<!-- 社群弹窗 -->
				<pop-view :show="showCommunity" type="center" @clickmask="showCommunity = false">
					<view class="community-detail b-f t-c">
						<view class="community-header f-w f-36 p-r col-f"><text class="community-header-text p-r">{{homeInfoData.community.name}}</text></view>
						<!-- #ifdef H5 -->
						<view class="community-body">
							<image :src="homeInfoData.community.qrcodeUrl" class="community-qrcodeimg"></image>
							<view class="community-toreply f-26 col-3">长按识别二维码</view>
						</view>
						<!-- #endif -->
						<!-- #ifndef H5 -->
						<view class="community-body f-26 col-3">
							有任何疑问，点击“<text class="col-m">去回复</text>”发送“<text class="col-m">{{homeInfoData.community.community_id}}</text>”,即可添加{{homeInfoData.community.name}}
						</view>
						<!-- #endif -->
						<view class="community-phone dis-flex flex-y-center flex-x-between" v-if="!!homeInfoData.community.phone">
							<view class="community-number dis-flex flex-y-center">
								<image :src="imgfixUrls + 'goods/community.png'" class="community-number-icon"></image>
								<view class="f-24 col-3">{{homeInfoData.community.phone}}</view>
							</view>
							<view class="community-bdial f-24" @click="callPhone(item.params.phone)">拨号</view>
						</view>
						<button class="community-reply f-24 col-f" open-type="contact" v-if="clienType==='3'">去回复</button>
					</view>
				</pop-view>
			</view>
			<filtertab :requestType="'3'" @pageScrollHeight="pageScrollHeight" :isPageScroll="'1'" @getOrderId="homelistInit"
			 @selectClassid="getClassid" @selectOrders="getOrders"></filtertab>
			<block v-if="!!goodsListData && goodsListData.length>0">
				<view class="goods-list dis-flex flex-x-between flex-warp">
					<view class="goods-item b-f bor-radius-10upx" v-for="(goodsItem,index) in goodsListData" @click="skipGoods(goodsItem.id,'integral')">
						<view class="goods-image" :style="{'background-image':'url('+goodsItem.thumb+')'}"></view>
						<view class="goods-title onelist-hidden f-28 col-3">{{goodsItem.title}}</view>
						<view class="goods-exchange dis-flex flex-y-center">
							<view class="goods-inte dis-flex flex-y-center">
								<image class="inte-price-logo" :src="imgfixUrls + 'integral/integral_logo.png'" mode=""></image>
								<view class="inteStyle">{{goodsItem.use_credit1}} <text class="f-24">{{subText.credittext}}</text> <text class="plus"  v-if="goodsItem.use_credit2>0">+</text> <text class="goods-price"  v-if="goodsItem.use_credit2>0" c>{{goodsItem.use_credit2}}</text><text class="f-24" v-if="goodsItem.use_credit2>0">元</text></view>
							</view>
							<!-- <block v-if="goodsItem.use_credit2>0">
								<view class="plus">+</view>
								<view class="goods-price">{{goodsItem.use_credit2}}<text>元</text></view>
							</block> -->
						</view>
						<view class="oldPirce dis-flex flex-x-between flex-y-center">
							<view class="goods-oldPrice col-9 f-24" style="text-decoration:line-through;">市场价<text>¥{{goodsItem.old_price}}</text></view>
							<view class="goods-inteBtn t-c f-24">兑换</view>
						</view>
					</view>
				</view>
				<load-more :isMore="loadingMore"></load-more>
			</block>
			<block v-else>
				<none-mores></none-mores>
			</block>
			<view class="page-footer">
				<TabBars :tabBarAct="0" :pageType="'10'" />
			</view>
		</view>
	</view>
</template>

<script>
	import App from '@/common/js/app.js'
	import popView from '@/components/template/PopManager.vue'
	import Loadlogo from '@/components/template/loadlogo'
	import loadMore from '@/components/template/loadmore.vue'
	import TabBars from '@/components/template/tabBar.vue'
	import filtertab from "@/components/template/filtertab.vue"
	import noneMores from '@/components/template/nonemores.vue'
	export default {
		data() {
			return {
				showTabbar: false,
				homeInfoData: {},
				goodsListData: [],
				total: null,
				loadlogo: false, //页面是否加载完成,
				loadingMore: true, //列表加载更多
				current_page: 1,
				textList: '',
				sort_id: null,
				class_id: null,
				showCommunity: false,
				searchInput:''
			}
		},
		onLoad() {
			this.textList = uni.getStorageSync('TextSubstitution')	
		},
		onShow() {
			uni.setNavigationBarTitle({
			　　title:this.textList.credittext
			})
		},
		components: {
			popView,
			Loadlogo,
			loadMore,
			TabBars,
			filtertab,
			noneMores
		},
		computed: {
			clienType() {
				return App.getClientType()
			},
			subText() {
				return uni.getStorageSync('TextSubstitution');
			}
		},
		methods: {
			openSearch(){
				// rh
				this.homelist("", "", 1);
			},
			homelistInit(sort) {
				let _this = this;
				_this.setData({
					sort_id: sort
				});
				_this.homelist("", sort, 1);
			},
			homeInfo() {
				let _this = this;
				App._post_form('&p=consumption&do=homeInfo', {}, res => {
					if (res.errno === 0) {
						_this.setData({
							homeInfoData: res.data
						})
						_this.homelistInit()
					}
				}, (err) => {
					if (err.data.errno === 1) {
						App.navigationTo({
							url: err.data.data.url,
							navType: 'rediRect'
						})
					}
				}, () => {
					_this.loadlogo = true;
				})
			},
			homelist(cate_id = "", sort = "", page = 1, isPage = false) {
				let _this = this,
					requestData = {
						page,
						sort,
						cate_id,
						search:_this.searchInput
					};
				App._post_form('&p=consumption&do=homeList', requestData, res => {
					if (res.errno === 0) {
						let goodsData = res.data;
						if (isPage) {
							if (goodsData.list.length > 0) {
								_this["goodsListData"].push(...goodsData.list);
							} else {
								_this.loadingMore = true;
							}
						} else {
							_this.setData({
								goodsListData: goodsData.list,
								total: res.data.total,
								loadingMore: goodsData.list.length === 0 || _this.current_page === res.data.total
							})
						}
					}
				}, false, () => {})
			},
			/**
			 * 社群显示
			 */
			communityShow() {
				this.showCommunity = !this.showCommunity;
			},
			getClassid(classItem) {
				let _this = this,
					{
						sort_id
					} = _this;
				_this.setData({
					current_page: 1,
					class_id: classItem.id
				})
				_this.homelist(classItem.id, sort_id, 1)
			},
			getOrders(sortItem) {
				let _this = this,
					{
						class_id
					} = _this;
				_this.setData({
					current_page: 1,
					sort_id: sortItem.val
				})
				_this.homelist(class_id, sortItem.val, 1)
			},
			pageScrollHeight(isshowTabbar) {
				if (isshowTabbar === '1') {
					uni.pageScrollTo({
						scrollTop: 190
					})
				} else {
					uni.pageScrollTo({
						scrollTop: 0
					})
				}
			},
			skipGoods(goods_id, goods_type) {
				let _this = this;
				App.navigationTo({
					url: 'pages/subPages/goods/index?goods_id=' + goods_id + '&goodsType=' + goods_type
				})
			},
			navgateTolink(url) {
				App.navigationTo({
					url
				})
			},
			//加载更多
			ReachBottom(e) {
				let _this = this,
					currentType = _this.currentType;
				if (_this.current_page >= _this.total) {
					_this.loadingMore = true;
					return false;
				}
				_this.homelist(_this.class_id, _this.sort_id, ++_this.current_page, true)
			}
		},
		mounted() {
			this.homeInfo()
		},
		onReachBottom() {
			this.ReachBottom()
		}
	}
</script>

<style lang="scss">
	@import "../../../../pages/subPages/goods/index.css";

	page {
		background-color: #F8F8F8;
	}

	.header {
		height: 440upx;
		background-size: 100% 314upx;
		background-repeat: no-repeat;
		padding: 30upx;

		.header-title {
			padding: 0 6upx;
		}

		.inte-logo {
			width: 50upx;
			height: 50upx;
			margin: 0 16upx;
		}

		.inte-bg {
			height: 280upx;
			background-size: 100% 280upx;
			background-repeat: no-repeat;
			border-radius: 10upx;
		}
	}

	.container {
		.seach{
			padding: 0upx 30upx;
			background-color: #FFFFFF;
			border-radius: 60upx;
			.input{
				height: 70upx;
				line-height: 70upx;
				border-radius: 60upx;
				background-color: #FFFFFF;
				padding: 0 30upx;
				font-size: 28upx;
			}
		}
		.goods-list {
			padding: 24upx 30upx;

			.goods-item {
				width: 290upx;
				padding: 20upx;
				margin-bottom: 20upx;

				.goods-image {
					width: 100%;
					height: 290upx;
					background-repeat: no-repeat;
					background-position: center;
					background-size: 100% 290upx;
				}

				.goods-exchange {
					.goods-inte {
						.inteStyle {
							color: #FF4444;
							font-size: 32upx;
						}

						.inte-price-logo {
							display: block;
							width: 30upx;
							height: 30upx;
							margin-right: 10upx;
							flex-shrink: 0;
						}
					}

					.plus {
						color: #FF4444;
					}

					.goods-price {
						color: #FF4444;
						font-size: 32upx;

						&>text {
							font-size: 24upx;
						}
					}
				}

				.oldPirce {
					.goods-oldPrice {
						&>text {
							text-decoration: line-through;
						}
					}

					.goods-inteBtn {
						width: 87upx;
						height: 40upx;
						line-height: 40upx;
						border: 1px solid rgba(255, 68, 68, 1);
						border-radius: 20upx;
						color: #FF4444;
					}
				}
			}
		}
	}

	.page-footer {
		padding: 70upx 0;
	}
</style>
