<template>
	<view>
		<view class="haodiantoutiao" v-if="hdttDataArr.length && hdttDataArr.length > 0">
			<view class="hdtt-t">
				<view class="hdtt-t-l">
					<view class="h1">{{ hdttData.params.title }}</view>
					<view class="p">{{ hdttData.params.detailed }}</view>
				</view>
				<view class="hdtt-t-r">
					<view class="span">
						<view class="em">{{ swiperI }}</view>/{{ hdttDataArr.length }}
					</view>
				</view>
			</view>
			<view class="hdtt-c">
				<swiper :indicator-dots="false" :autoplay="false" :duration="500" autoplay="true" next-margin="30rpx" @change="swiperCg">
					<block>
						<swiper-item v-for="(item, key) in hdttDataArr" :key="key">
							<view class="goodstop-i" @click="navgateto(item.id)">
								<view class="goodstop-i-t">
									<image class="image" :src="item.display_img" mode="scaleToFill"></image>
								</view>
								<view class="goodstop-i-c">
									<view class="h1">{{ item.title }}</view>
									<view class="h2">{{ item.summary }}</view>
									<view class="p">
										<view class="span">{{!!item.one_name || !!item.two_name?'':''}}<view class="i" v-if="item.one_name !== '' && item.one_name !== null">{{ item.one_name }}&nbsp;{{!!item.two_name?'-':''}}&nbsp;</view>
											<view class="i" v-if="item.two_name !== '' && item.two_name !== null">{{ item.two_name }}</view>
										</view>
										<view class="em">阅读&nbsp;{{ item.browse }}</view>
									</view>
								</view>
							</view>
						</swiper-item>
					</block>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
	import App from '@/common/js/app.js';
	export default {
		props: ['hdttData'],
		data() {
			return {
				swiperI: 1,
				hdttDataArr: []
			}
		},
		mounted() {
			for (var i in this.hdttData.data) {
				this.hdttDataArr.push(this.hdttData.data[i])
			}
		},
		methods: {
			swiperCg(e) {
				this.swiperI = e.detail.current + 1
			},
			navgateto(headline_id) {
				App.navigationTo({
					url: `pages/mainPages/headline/headlineDetail?headline_id=${headline_id}`
				})
			}
		}
	}
</script>

<style scoped>
	.haodiantoutiao {
		padding-bottom: 30upx;
	}

	.hdtt-t {
		padding: 30upx 30upx 0 30upx;
		border-top: 0 solid #f6f6f6;
		display: -webkit-flex;
		display: flex;
		justify-content: space-between;
	}

	.hdtt-t .h1 {
		font-weight: normal;
		font-size: 36upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.hdtt-t .p {
		color: #999;
		font-size: 24upx;
		margin-top: 10upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.hdtt-t-r {
		display: -webkit-flex;
		display: flex;
		align-items: center;
	}

	.hdtt-t-r .span {
		font-size: 36upx;
		display: inline-block;
	}

	.hdtt-t-r .span .em {
		font-size: 42upx;
		font-style: normal;
		display: inline;
	}

	.hdtt-c {
		margin-top: 30upx;
	}

	.hdtt-c swiper {
		height: calc((100vw - 60upx) / 1.8 + 228upx);
	}

	.goodstop-i {
		padding-left: 30upx;
	}

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

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

	.goodstop-i-c .h1 {
		height: 42upx;
		line-height: 42upx;
		font-size: 32upx;
		font-weight: normal;
		margin-top: 20upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.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: 42upx;
		line-height: 42upx;
		font-size: 28upx;
		color: #888;
		margin-top: 20upx;
		display: -webkit-flex;
		display: flex;
		justify-content: space-between;
	}

	.goodstop-i-c .p .span {
		-webkit-flex-shrink: 1;
		flex-shrink: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.goodstop-i-c .p .span .i {
		display: inline;
	}

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