<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<z-nav-bar title="太湖公益"></z-nav-bar>
		<view class="top">
			<view class="logo">
				<image src="../../static/logo.png" mode="widthFix"></image>
			</view>
			<view class="bg">
				<image src="../../static/gongyitop.jpg" mode="widthFix"></image>
			</view>
		</view>
		<view :class="['tabs',fixed ? 'fixed' : '']">
			<u-tabs :class="['tabList']" @click="tabClick" :activeStyle="activeStyle" :scrollable="scrollable"
				:list="tabList" itemStyle="padding-left: 15px;   padding-right: 15px; height: 50px;"></u-tabs>

		</view>
		<view class="proBox" v-show="tabId == 1">
			<view class="proBoxItem flexbox" v-if="productList.length > 0">
				<view class="item" v-for="(item, index) in productList" :key="index" @click="proClick(item)">
					<view class="img flexbox">
						<image :src="item.productImages" mode="widthFix"></image>
					</view>
					<text>{{item.productName}}</text>
				</view>
			</view>
			<!-- <view class="" v-else> -->
			<u-divider v-show="pObj.status == 2" text="已加载全部"></u-divider>
			<u-divider v-show="pObj.status == 3" text="暂无数据"></u-divider>
			<u-divider v-show="pObj.status == 1" text="加载中..."></u-divider>
			<!-- </view> -->
		</view>
		<view class="newsBox" v-show="tabId == 2">
			<view class="newsBoxItem" v-if="newsList.length > 0">
				<view class="">
					<view class="flexbox item" v-for="(item, index) in newsList" :key="index" @click="newsClick(item)">
						<text class="title">{{item.title}}</text><text class="time">{{item.createTime}}</text>
					</view>
				</view>
			</view>
			<!-- <view class="" v-else> -->
			<u-divider v-show="nObj.status == 2" text="已加载全部"></u-divider>
			<u-divider v-show="nObj.status == 3" text="暂无数据"></u-divider>
			<u-divider v-show="nObj.status == 1" text="加载中..."></u-divider>
			<!-- </view> -->
		</view>
		<u-back-top :scroll-top="scrollTop" bottom="150" :customStyle='bgiStyle' :iconStyle="iconStyle"></u-back-top>
		<!-- <music-play :playData="playData"></music-play> -->
		<z-navigation></z-navigation>
	</view>
</template>

<script>
	// import musicPlay from '@/components/music.vue'
	import $http from '@/config/requestConfig.js';
	var clear;
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				playData: {},
				productList: [],
				newsList: [],
				activeStyle: {
					color: '#333',
					fontWeight: 'bold',
					transform: 'scale(1.2)',
					// backgroundColor: '#258feb'
				},
				scrollTop: 0,
				fixed: false,
				bgiStyle: {
					background: '#fff'
				},
				iconStyle: {
					fontSize: '40rpx',
					fontWeight: 'bold',
					color: '#258feb',
				},
				tabId: 1,
				scrollable: false,
				tabList: [{
						id: 1,
						name: '太湖商品'
					},
					{
						id: 2,
						name: '太湖之光'
					},
				],
				pObj: { // 商品列表请求相关
					pFlag: true,
					page: 1,
					status: 88
				},
				nObj: { // 新闻列表请求相关
					nFlag: true,
					page: 1,
					status: 88
				}

			};
		},
		//第一次加载
		onLoad(e) {
			// 隐藏原生的tabbar
			uni.hideTabBar();
			this.getProData();
			this.getnewsData()
		},
		computed: {
			...mapState(['userInfo'])
		},
		//页面显示
		onShow() {
			// 隐藏原生的tabbar
			uni.hideTabBar();

		},
		onReachBottom() {
			console.log('触底加载')
			if (this.tabId == 1) { // 商品
				if (this.pObj.status != 2) {
					this.pObj.page++
					this.getProData()
				} else {
					console.log('没有更多了')
				}
			}
			if (this.tabId == 2) { // 资讯
				if (this.nObj.status != 2) {
					this.nObj.page++
					this.getnewsData()
				} else {
					console.log('没有更多了')
				}
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			if (this.scrollTop > 500) {
				this.fixed = true
			} else {
				this.fixed = false
			}
			// console.log(this.scrollTop,'this.scrollTop')
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
		},
		components: {
			// musicPlay
		},
		//方法
		methods: {
			proClick(item) {
				uni.navigateTo({
					url: `/pages/bookShop/commodityDetail?id=${item.productId}&title=${item.productName}`
				});
			},
			newsClick(item) {
				console.log(454545)
				uni.navigateTo({
					url: `/pages/news/news?newsId=${item.id}&url=${item.url}&type=${item.type}&source='taihuzhiguang'`
				})
			},
			getProData() {
				if (!this.pObj.pFlag) {
					return
				}
				this.pObj.pFlag = false
				this.pObj.status = 1
				$http.request({
					url: "common/taihuWelfare/getTaihuWelfareProductList",
					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
					data: {
						"page": this.pObj.page,
						"limit": 14
					},
					header: { //默认 无 说明：请求头
						'Content-Type': 'application/json'
					},
				}).then(res => {
					if (res.code == 0 && res.page.records.length > 0) {
						var _list = res.page.records
						this.productList = this.productList.concat(_list)
						if (res.page.pages > this.pObj.page) {
							this.pObj.status = 88
						} else {
							// 加载完毕
							this.pObj.status = 2
						}

					}
					this.pObj.pFlag = true
				}).catch(e => {
					console.log(e, '商品列表')
					this.pObj.status = 88
					this.pObj.pFlag = true
				});
			},
			getnewsData() {
				if (!this.nObj.nFlag) {
					return
				}
				this.nObj.nFlag = false
				this.nObj.status = 1
				$http.request({
					url: "common/taihuWelfare/getTaihuWelfareArticleList",
					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
					data: {
						"page": this.nObj.page,
						"limit":20
					},
					header: { //默认 无 说明：请求头
						'Content-Type': 'application/json'
					},
				}).then(res => {
					if (res.code == 0 && res.page.records.length > 0) {
						var _list = res.page.records
						this.newsList = this.newsList.concat(_list)
						if (res.page.pages > this.nObj.page) {
							this.nObj.status = 88
						} else {
							// 加载完毕
							this.nObj.status = 2
						}

					}
					this.nObj.nFlag = true
				}).catch(e => {
					console.log(e, '资讯列表')
					this.nObj.status = 88
					this.nObj.nFlag = true
				});
			},
			tabClick(e) {
				if (this.tabId == e.id) {
					return
				}
				this.tabId = e.id
				console.log(e, '点击')
			}
		},
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	.top {
		overflow: hidden;
		position: relative;

		.logo {
			width: 110rpx;
			height: 110rpx;
			position: absolute;
			z-index: 1;
			left: calc(50% - 50rpx);
			top: 30rpx;

		}

		.bg {
			width: 100%;
			height: auto;

		}

		image {
			width: 100%;
		}
	}

	.newsBoxItem {
		padding: 20rpx;

		.item {
			line-height: 80rpx;
			border-bottom: 1px solid #eee;
			justify-content: space-between;
			align-items: center;

			.time { display: block; width: 300rpx;
				font-size: 26rpx;
				color: #bebebe;width: 35%;
			}

			.title {
				width: 60%;
				font-size: 28rpx;
				display: inline-block;
				@include toe()
			}
		}
	}

	.fixed {
		top: 88rpx;
		position: fixed;
		z-index: 1;
		width: 100%;
		background-color: #fff !important;
	}

	.tabs {

		background-color: $containerColor;
		padding-bottom: 20rpx;
	}

	.flexbox {
		display: flex;
	}

	.proBoxItem {
		flex-wrap: wrap;
		padding: 20rpx;
		justify-content: space-between;

		.item {
			width: 48%;
			overflow: hidden;

			text {
				display: block;
				@include toe();
				font-size: 26rpx;
				padding: 20rpx 0;
			}

			.img {
				height: 400rpx;
				align-items: center;
				overflow: hidden;
				background-color: $imgBg ;

				image {
					width: 100%;
					height: 80rpx;
				}
			}

		}
	}

	.content {
		font-size: 26rpx;
		line-height: 48rpx;
		margin-top: 10rpx;
	}
</style>