<template>
	<!-- 好店头条 -->
	<view class="container">
		<loadlogo v-if="!loadlogo" />
		<view class="page-headline" v-if="loadlogo">
			<far-bottom></far-bottom>
			<block v-if="!!head&&head.length>0">
				<view class="page-section-spacing">
					<swiper-banner :styles="banner_set" :itemData="head"></swiper-banner>
				</view>
			</block>
			<view >
				<view  style="height: 20upx;background-color: #f8f8f8;">
					
				</view>
				<filtertab  :requestType="'文章头条'" :isPageScroll="'1'" @selectClassid="selectClassid" 
				 @selectClassTwoid="selectClassTwoid" @selectOrders="selectOrders" :cate_one="cate_one" :cate_two="cate_two" :title="title"></filtertab>
				<view  style="height: 20upx;background-color: #f8f8f8;">
					
				</view>
			</view>
			<view class="hdline-c">
				<view class="goodstop-i" v-for="(item, key) in list" :key="key" @click="handleSkip(item.id)">
					<!-- <navigator class="a" :url="'/pagesHeadline/headlinedetail/index?i='+item.id" hover-class="none"> -->
					<view class="h1 twolist-hidden">{{ item.title }}</view>
					<view class="goodstop-i-t">
						<view class="goodstop-i-t-tag">
							<view class="i" v-if="item.one_name !== '' && item.one_name !== null">{{ item.one_name }}</view>
							<view class="i" v-if="item.two_name !== '' && item.two_name !== null">{{ item.two_name }}</view>
						</view>
						<image class="image" :src="item.display_img" mode="aspectFill"></image>
					</view>
					<view class="goodstop-i-c">
						<view class="h2">{{ item.summary }}</view>
						<view class="p">
							<view class="span">
								<view class="i">
									<image class="image" :src="item.author_img" mode="aspectFill"></image>
								</view>
								<view class="b">{{ item.author }}</view>
							</view>
							<view class="em">阅读&nbsp;{{ item.browse }}</view>
						</view>
					</view>
					<!-- </navigator> -->
				</view>
			</view>
			<Loooading v-if="!loading" />
		</view>
		<TabBars :tabBarAct="0" :pageType="'12'"/>
	</view>
</template>

<script>
	import App from '@/common/js/app.js'
	import Loooading from '@/components/template/loading'
	import Loadlogo from '@/components/template/loadlogo'
	import TabBars from '@/components/template/tabBar.vue'
	import swiperBanner from '@/components/template/Swiper.vue'
	import filtertab from '@/components/template/filtertab.vue'
	export default {
		data() {
			return {
				loadlogo: false,
				loading: false,
				loadOver: false,
				current_page: 1,
				banner_set:{},
				head: null,
				list: null,
				total: null,
				menu: null,
				cate_one:'',
				cate_two:'',
				title:'',
				sorts:'',
				oninPage:false
			}
		},
		components: {
			Loadlogo,
			Loooading,
			TabBars,
			swiperBanner,
			filtertab
		},
		onShow() {

		},
		onLoad(e) {
			if(e.cate_one){
				this.cate_one = e.cate_one;
			}
			if(e.cate_two){
				this.cate_two = e.cate_two;
			}
			if(e.title){
				this.title = e.title;
			}
		},
		mounted() {
			this.getHeadlineInfo(1, false)
		},
		methods: {
			selectOrders(data){
				console.log(data);
				// debugger
				this.sorts = data.val;
				this.getHeadlineInfo(1);
			},
			selectClassid(data){
				console.log(data);
				// this.cate_two = ''
				// this.cate_one = data.id;
				this.setData({
					cate_one:data.id,
					cate_two:'未选择'
				})
				this.getHeadlineInfo(1);
			},
			selectClassTwoid(data){
				console.log(data);
				// debugger
				this.setData({
					cate_two:data.id
				})
				// this.cate_two = 
				this.getHeadlineInfo(1);
			},
			//获取头条信息
			getHeadlineInfo(page = 1, isPage = false) {
				let _this = this,
					requestData = {
						page:page,
						one_id:_this.cate_one,
						two_id:_this.cate_two,
						sort:_this.sorts
					};
					// debugger
					// if(_this.oninPage) return
					// _this.oninPage = true;
					// setTimeout(()=>{
					// 	_this.oninPage = false;
					// },2000)
				App._post_form('&p=headline&do=HeadlineList', requestData, res => {
					let HeadlineData = res.data;
					// _this.oninPage = false;
					if (isPage) {
						if (HeadlineData.list.length > 0) {
							_this["list"].push(...HeadlineData.list);
						} else {
							_this.loading = true;
						}
					} else {
						_this["list"] = HeadlineData.list;
						_this.loading = HeadlineData.list.length === 0 || _this.current_page === HeadlineData.total;
						// debugger
						
							let imageWidth = HeadlineData['banner_set'].img_width,
								imageHeight = HeadlineData['banner_set'].img_height,
								imageRatio = imageWidth / imageHeight,
								windowHeight = uni.getSystemInfoSync().windowWidth / imageRatio;
							// _this.diypagesData[i].autoHeight = windowHeight;
								let ratio;
								// console.log(item.params.img_width,'jinx')
								uni.getSystemInfo({
									success: function(wh) {
										// debugger
										ratio = wh.windowWidth / HeadlineData['banner_set'].img_width;
										HeadlineData['banner_set'].img_width = (ratio * imageWidth) -30;
										HeadlineData['banner_set'].img_height = ratio * imageHeight -30;
										_this.setData(HeadlineData);
										
									}
								});
						
					}
				}, false, () => {
					_this.loadlogo = true;
				})
			},
			handleSkip(headline_id) {
				App.navigationTo({
					url:`pages/mainPages/headline/headlineDetail?headline_id=${headline_id}`
				})
			},
			swiperSkip(url) {
				App.navigationToH5(url)
			}
		},
		onPullDownRefresh() {
			//下拉刷新 初始化数据
			// this.loading = false
			// this.loadOver = false
			// this.page = 0
			// this.getInfo(1)
		},
		onReachBottom() {
			let _this = this;
			if (_this.current_page >= _this.total) {
				_this.loading = true;
				return false;
			}
			_this.getHeadlineInfo(++_this.current_page, true);
		}
	}
</script>

<style scoped>
	.container {
		background-color: #F4F4F4;
	}

	.page-headline {
		min-height: 100vh;
		background-color: #F4F4F4;
		padding-bottom: 88upx;
	}

	.hdline-h .image {
		width: 100%;
		display: block;
	}

	.hdline-c {
		margin-top: 0;
	}

	.goodstop-i {
		width: calc(100vw - 60upx);
		margin-bottom: 20upx;
		padding: 40upx 30upx;
		background-color: #fff;
	}

	.goodstop-i:last-child {
		margin-bottom: 60upx;
	}

	.goodstop-i .h1 {
		line-height: 52upx;
		font-size: 30upx;
		letter-spacing: 4upx;
		font-weight: normal;
	}

	.goodstop-i-t {
		width: calc(100vw - 60upx);
		height: calc((100vw - 30upx) / 1.8);
		margin-top: 30upx;
		position: relative;
	}

	.goodstop-i-t-tag {
		position: absolute;
		top: 20upx;
		left: 20upx;
		z-index: 2;
	}

	.goodstop-i-t-tag .i {
		height: 52upx;
		line-height: 52upx;
		font-size: 24upx;
		font-style: normal;
		margin-left: 10upx;
		padding: 6upx 14upx;
		background-color: #FFD93F;
		border-radius: 4upx;
		display: inline;
	}

	.goodstop-i-t-tag .i:first-child {
		margin-left: 0;
	}

	.goodstop-i-t .image {
		width: 100%;
		height: 100%;
	}

	.goodstop-i-c .h2 {
		height: 84upx;
		line-height: 42upx;
		font-size: 24upx;
		color: #888;
		font-weight: normal;
		margin-top: 20upx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.goodstop-i-c .p {
		height: 60upx;
		line-height: 60upx;
		font-size: 28upx;
		color: #888;
		margin-top: 20upx;
		display: -webkit-flex;
		display: flex;
		justify-content: space-between;
	}

	.goodstop-i-c .p .span {
		line-height: 60upx;
		-webkit-flex-shrink: 1;
		flex-shrink: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: -webkit-flex;
		display: flex;
		justify-content: flex-start;
	}

	.goodstop-i-c .p .span .i {
		width: 60upx;
		height: 60upx;
		margin-right: 20upx;
		border-radius: 50%;
		display: block;
	}

	.goodstop-i-c .p .span .b {
		font-weight: normal;
		display: block;
	}

	.goodstop-i-c .p .span .i .image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.goodstop-i-c .p .em {
		font-style: normal;
		-webkit-flex-shrink: 0;
		flex-shrink: 0;
	}
</style>
