<template>
	<view class="content">
		<view class="left" v-for="(it,ix) in 2" :key='ix'>

			<view class="item" v-show="index % 2 == ix" v-for="(item,index) in list" :key='index'>
				<!-- #ifdef MP -->
				<!-- 直播内容 -->
				<view @click="goto" :data-url="'plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id='+item.roomId" class="body body_live" v-if="item.listType == 'live'  ">
					<view class="top">
						<image style="width: 100%; height: 100%;" :src="item.coverImg" mode="aspectFill"></image>
						<view class="p1">
							<view class="title_box" style="padding-left: 0;">
								<view class="d-t">
									<view class="left">
										<text  class="heng1"></text>
										<text  class="heng2"></text>
										<text  class="heng3"></text>
									</view>
								</view>
								<view class="" style="font-size: 22rpx;">
									{{item.status == '0'?'预告':item.status == '1'?'直播中':'已结束'}}
								</view>

							</view>
							<!-- 			<view class="quan">
								<text class="iconfont iconss"></text>
								<text>优惠券疯抢中</text>
							</view> -->
						</view>
					</view>
					<view class="bot">
						<view class="bot-header">
							<image :src="item.business.logo" mode="aspectFill"></image>
						</view>
						<view class="bot-name">{{item.name}}</view>
						<view class="bot-goods" v-if="item.goods.length">
							<view class="bot-goods__title">{{item.goods[0].name}}</view>
							<view class="bot-goods__price">{{item.goods[0].price}}</view>
						</view>
					</view>
				</view>
				<!-- #endif -->

				<!-- 视频内容 -->
				<view class="body body_video" @click="goto" :data-url="'/activity/shortvideo/detail?id='+item.id" v-if="item.listType == 'video'">
					<view class="top">
						<view class="player-box">
							<text class="iconfont icon-bofang"></text>
						</view>
						<image style="width: 100%; height: 100%;" :src="item.coverimg" mode="aspectFill"></image>
						<view class="p1">
							<view class="title_box">
								<view class="" style="font-size: 26rpx;">
									{{ formatSeconds(Number(item.video_duration))||'00:00'}}
								</view>
							</view>
							<view class="info" >
								<view class="info-txt">{{item.name}}</view>
							</view>
						</view>
					</view>
					<view class="bot">
						<view class="bot-hd">
							<image :src="item.binfo.logo" mode="aspectFill"></image>
							<view class="bot-hd__name">{{item.binfo.name || ''}}</view>
						</view>
						<view class="bot-bd" @click.stop.prevent="zan(item,index)">
							<image class="flame-img" :src="event_rul + '/static/img/static/icon/flame-icon.svg'"></image>
							<text class="iconfont" :class="item.iszan == 0 ? 'icon-aixin' : 'icon-aixin_shixin'"></text>
							<text class="bot-bd__num">{{item.zan_num >= 10000 ? (item.zan_num / 10000).toFixed(1)+'万': item.zan_num}}</text>
						</view>
					</view>
				</view>
				<!-- 笔记内容 -->

				<view class="body body_note" @click="goto" :data-url="'/activity/luntan/detail?id='+item.id" v-if="item.listType == 'note'">
					<view class="note-item">
						<image class="note-item__img" v-if="item.pics||item.coverimg" :src="item.pics||item.coverimg" mode="aspectFill"></image>
						<view style="width: 100%; height: 330rpx; line-height: 330rpx; " v-else>
							<view style="color: #ccc;">
								<text style="font-size: 100rpx; color: #ccc;"
									class="iconfont icon-tupianjiazaishibai"></text>
							</view>
						</view>
						<view class="note-item__info">
							<view class="note-item__info-title">{{item.title ||item.name|| '无'}}</view>
							<view class="note-item__info-bd">
								<view class="left" @click.stop="goto" :data-url="'/diary/info/info?id='+item.mid">
									<image class="note-item__info-img" :src="item.headimg || item.binfo.logo"></image>
									<view class="note-item__info-name">{{item.nickname || item.binfo.name ||''}}</view>
								</view>
								<view class="right" @click.stop.prevent="zan(item,index)">
									<image class="flame-img" :src="event_rul + '/static/img/static/icon/flame-icon.svg'"></image>
									<text v-if="!item.iszan" class="iconfont icon-aixin"></text>
									<text v-else class="iconfont icon-aixin_shixin"></text>
									<text class="note-item__info-num">{{item.zan || item.zan_num || 0}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 商品内容 -->
				<view class="body body_shop" @click="goto" :data-url="'/pages/shop/product?id='+item.proid" v-if="item.listType == 'shop'">
					<view class="top">
						<image :src="item.pic" mode="aspectFill"></image>
					</view>
					<view class="shop-info">
						<view class="shop-info__hd">
							{{item.name ? item.name : ''}}
						</view>
						<view class="shop-info__bd">
							<view class="left" v-show="item.sell_price">
								<view class="shop-info__price">
									<text class="ico">￥</text>
									{{item.sell_price}}
								</view>
							<view class="shop-info__num">
								已售{{ item.sales ? (item.sales >= 10000 ? (item.sales / 10000).toFixed(1) + '万': item.sales) : 0 }}件
							</view>
							</view>
							<view class="iconfont icon-jiahao" @click.stop="buydialogChange" :data-proid="item.proid"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		props: {
			list: {},
		},
		data() {
			return {
				anShow:false,
				event_rul: app.globalData.event_url,
			}
		},
		mounted() {
		},
		beforeDestroy(){
			this.anShow = false;
		},
		methods: {
			formatSeconds(time){
				let newTime,hour,minite,seconds;
				if(time >= 3600){
				hour = parseInt(time/3600) < 10 ? '0' + parseInt(time/3600) : parseInt(time/3600);
				minite = parseInt(time%3600/60) < 10 ? '0' + parseInt(time%3600/60):parseInt(time%3600/60);
				seconds = time%3600%60 < 10 ? '0' + Math.round(time%3600%60) : Math.round(time%3600%60);
				newTime = hour + ':' + minite + ':' + seconds;
				}else if(time >= 60 && time < 3600){
				minite = parseInt(time/60) < 10 ? '0' + parseInt(time/60) : parseInt(time/60);
				seconds = time%60 < 10 ? '0' + Math.round(time%60) : Math.round(time%60);
				newTime = minite + ':' + seconds;  
				}else if(time < 60 ){
				seconds = time < 10 ? '0' + Math.round(time) : Math.round(time);
				newTime = '00:'+ seconds;
				}
				return newTime;
			},
			zan: function (item,index) {
			 
			 var that = this
			 		
					if(item.binfo){
						app.post('ApiShortvideo/zan',{id:item.id},function(res){
							that.$emit('listZanFn',{index:index,show:!item.iszan?1:0,num:item.iszan?--item.zan_num:++item.zan_num})
							
						});
					}else{
						app.post("ApiLuntan/zan", {id: item.id}, function (res) {
						 that.$emit('listZanFn',{index:index,show:!item.iszan?1:0,num:item.iszan?--item.zan:++item.zan})
											
						});
					}
				
			},
			buydialogChange: function(e) {
				let proid = e.currentTarget.dataset.proid;
				this.$emit("dialogChange",proid);
			},
		},
	}
</script>

<style lang="scss">
	.dh_box{
		width: 338rpx;
		background-color: #fff;
		border-radius: 12rpx;
		margin-bottom: 24rpx;
		&-hd{
			background: linear-gradient(90deg, #FF8A44 0%, #FF3B41 100%);
			border-radius: 12rpx 12rpx 0rpx 0px;
			padding: 18rpx 20rpx 16rpx;
		}
		&-title{
			display: flex;
			align-content: center;
			justify-content: space-between;
			font-size: 28rpx;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 40rpx;
			.more {
				font-size: 22rpx;
				line-height: 32rpx;
				padding-right: 30rpx;
				position: relative;
				&::after {
					content: "";
					position: absolute;
					right: 0;
					top: 50%;
					width: 12rpx;
					height: 12rpx;
					border-top: 1rpx solid #FFFFFF;
					border-right: 1rpx solid #FFFFFF;
					transform: rotate(45deg) translateX(-100%);
				}
			}
		}
		&-subtitle {
			background: #FFE8E8;
			border-radius: 6rpx;
			padding: 0 14rpx;
			font-size: 20rpx;
			font-weight: 500;
			color: #F93C41;
			line-height: 30rpx;
			margin-top: 8rpx;
		}
		&-bd {
			padding: 10rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		.goods-img {
			width: 216rpx;
			height: 224rpx;
			border-radius: 10rpx;
		}
		.goods-title {
			font-size: 22rpx;
			color: #666666;
			line-height: 32rpx;
			margin-top: 18rpx;
		}
		.goods-tips {
			display: flex;
			align-items: center;
			&__icon {
				width: 28rpx;
				height: 28rpx;
				flex-shrink: 0;
				margin-right: 10rpx;
			}
			&__txt {
				font-size: 32rpx;
				font-weight: 500;
				color: #1BB149;
				line-height: 44rpx;
			}
		}
	}
	.item {
		width: 338rpx;
		.flame-img {
			width: 26rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
		.body {
			border-radius: 12rpx;
			position: relative;
			overflow: hidden;
			margin-bottom: 24rpx;
			background-color: #ffffff;
		}
		.body_shop{
			.top {
				width: 100%;
				height: 314rpx;
			
				image {
					width: 100%;
					height: 100%;
				}
			}
			.shop-info {
				padding: 20rpx;
				&__hd {
					font-size: 26rpx;
					font-weight: 500;
					color: #333333;
					line-height: 36rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					/* autoprefixer: ignore next */
					-webkit-box-orient: vertical;
					text-align: justify;
					white-space: pre-wrap;
					word-break: break-all;
				}
				&__bd{
					margin-top: 24rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.left{
						flex: 1;
						overflow: hidden;
						display: flex;
						align-items: center;
						color: #ED5925;
						font-size: 36rpx;
						line-height: 50rpx;
						font-weight: bold;
						.ico{
							font-size: 22rpx;
							color: #ED5925;
							line-height: 32rpx;
							margin-right: 6rpx;
						}
					}
				}
				&__price {
					flex-shrink: 0;
				}
				&__num {
					flex: 1;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					margin-left: 14rpx;
					font-size: 20rpx;
					color: #999999;
					line-height: 28rpx;
				}
				.icon-jiahao {
					flex-shrink: 0;
					font-size: 44rpx;
					color: #068150;
				}
			}
		}
		.body_note {
			.note-item {
				width: 100%;
				height: 500rpx;
				position: relative;
				&__img {
					width: 100%;
					height: 100%;
				}
				&__info {
					position: absolute;
					bottom: 16rpx;
					left: 16rpx;
					right: 16rpx;
					background: #FFF;
					border-radius: 12rpx;
					padding: 16rpx;
					&-title {
						margin-top: 8rpx;
						font-size: 28rpx;
						font-weight: 500;
						color: #333333;
						line-height: 40rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						/* autoprefixer: ignore next */
						-webkit-box-orient: vertical;
						text-align: justify;
						white-space: pre-wrap;
						word-break: break-all;
					}
					&-bd {
						margin-top: 10rpx;
						display: flex;
						align-content: center;
						justify-content: space-between;
						color: #666666;
					}
					.left {
						display: flex;
						align-items: center;
					}
					&-img {
						display: block;
						width: 36rpx;
						height: 36rpx;
						margin-right: 6rpx;
						flex-shrink: 0;
						border-radius: 50%;
					}
					&-name {
						flex: 1;
						max-width: 140rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						font-size: 24rpx;
					}
					.right {
						display: flex;
						align-items: center;
					}
					.icon-aixin,.icon-aixin_shixin {
						font-size: 28rpx;
					}
					.icon-aixin_shixin {
						color: #EC2828;
					}
					&-num {
						margin-left: 8rpx;
						font-size: 22rpx;
						line-height: 28rpx;
					}
				}
			}
		}

		.body_video {
			.top {
				border-radius: 10rpx;
				width: 100%;
				height: 376rpx;
				position: relative;
				.player-box {
					position: absolute;
					font-size: 100rpx;
					left: 50%;
					top: 50%;
					width: 80rpx;
					height: 80rpx;
					background: rgba($color: #000000, $alpha: .3);
					border-radius: 50%;
					transform: translateX(-50%) translateY(-60%);
				}
				.icon-bofang {
					position: absolute;
					left: 50%;
					top: 50%;
					color: #FFF;
					transform: translateX(-40%) translateY(-50%);
				}
				.info {
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					height: 172rpx;
					background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8600) 100%);
					display: flex;
					align-items: flex-end;
					padding: 12rpx 20rpx;
					&-txt {
						font-size: 28rpx;
						color: #FFFFFF;
						line-height: 40rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 3;
						/* autoprefixer: ignore next */
						-webkit-box-orient: vertical;
						text-align: justify;
						white-space: pre-wrap;
						word-break: break-all;
					}
				}
			}

			.bot {
				padding: 16rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				&-hd {
					display: flex;
					align-items: center;
					image {
						border-radius: 50%;
						width: 58rpx;
						height: 58rpx;
						margin-right: 6rpx;
						flex-shrink: 0;
					}
					&__name {
						font-size: 26rpx;
						font-weight: 500;
						color: #333333;
						line-height: 36rpx;
						max-width: 176rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
                &-bd {
					flex-shrink: 0;
					color: #666666;
					.icon-aixin,.icon-aixin_shixin {
						font-size: 28rpx;
					}
					.icon-aixin_shixin {
						color: #EC2828;
					}
					&__num {
						margin-left: 2rpx;
						font-size: 22rpx;
						line-height: 28rpx;
					}
				}
				.right {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding: 10rpx 0;
					margin-left: 20rpx;

					.price {
						font-weight: bold;
					}
				}
			}
		}

		.body_live {
			.top {
				border-radius: 10rpx;
				width: 100%;
				height: 376rpx;
				// background-color: red;
				image {
					width: 100%;
				}
				.quan {
					position: absolute;
					display: flex;
					top: 280rpx;
					padding: 4rpx 10rpx;
					border-radius: 40rpx;
					color: #fff;
					left: 20rpx;
					font-size: 24rpx;
					background-color: rgba($color: #000000, $alpha: 0.4);

				}

			}

			.bot {
				padding: 32rpx 16rpx 16rpx;
				position: relative;
				&-header {
					width: 58rpx;
					height: 58rpx;
					border-radius: 50%;
					position: absolute;
					overflow: hidden;
					top: -29rpx;
					left: 34rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
				&-name {
					font-size: 26rpx;
					font-weight: 500;
					color: #333333;
					line-height: 36rpx;
				}
				&-goods {
					display: flex;
					align-content: center;
					font-size: 20rpx;
					color: #999999;
					line-height: 28rpx;
					margin-top: 4rpx;
					
					&__title {
						max-width: 264rpx;
					}
					&__price {
						flex-shrink: 0;
					}
				}

				.left {
					image {
						border-radius: 10rpx;
						width: 90rpx;
						height: 90rpx;
						background-color: pink;
					}
				}

				.right {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding: 10rpx 0;
					margin-left: 20rpx;

					.price {
						font-weight: bold;
					}
				}
			}
		}

	}

	.content {
		display: flex;
		justify-content: space-between;
	}

	.title_box {
		background-color: rgba($color: #000000, $alpha: .3);
		padding: 0 10rpx;
		border-radius: 4rpx;
		display: flex;
		color: #fff;
		position: absolute;
		top: 16rpx;
		left: 16rpx;
		height: 30rpx;
		border-radius: 15rpx;
		align-items: center;
		
		.d-t {
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			display: flex;
			margin-right: 10rpx;
			align-items: center;
			justify-content: space-around;
			background-color: #fee103;
		}
		.left {
			height: 18rpx;
			display: flex;
			width: 50rpx;
			padding: 0 4rpx 2rpx;
			align-items: flex-end;
			justify-content: space-around;

			.heng1,
			.heng2,
			.heng3 {
				display: block;
				width: 4rpx;
				border-radius: 4rpx;
				margin-right: 2rpx;
				background-color: #fff;
			}
					
			.heng1 {
				height: 18rpx;
				animation: hengos .8s linear infinite;
			}
			
			.heng2 {
				height: 10rpx;
				animation: hengts .8s linear  infinite;
			}
			.heng3 {
				height: 18rpx;
				animation: henghs .8s linear .2s infinite;
				margin-right: 0;
			}
		}

	}
	
	@keyframes hengos {
		0%   {height: 18rpx;}
		50%  {height: 10rpx;}
		100% {height: 18rpx;}
	}
	@keyframes hengts {
		0%   {height: 10rpx;}
		50%  {height: 18rpx;}
		100% {height: 10rpx;}
	}
	@keyframes henghs {
		0%   {height: 18rpx;}
		50%  {height: 10rpx;}
		100% {height: 18rpx;}
	}
</style>
