<template>
<view class="dp-liveroom" :style="{
	color:params.color,
	backgroundColor:params.bgcolor,
	margin:(params.margin_y*2.2)+'rpx '+(params.margin_x*2.2)+'rpx',
	padding:(params.padding_y*2.2)+'rpx '+(params.padding_x*2.2)+'rpx'
}">
	<view class="dp-liveroom-liveroom">
		 <!-- #ifdef MP -->
		<view class="item" v-for="(item,index) in data" :key="item.id" :style="{marginRight:index%2==0?'2%':'0'}" @click="goto" :data-url="'plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id='+item.roomId">
			<view class="bgpic">
				<image class="image" :src="item.coverImg" mode="widthFix"/>
			</view>
			<view class="f1" v-if="item.status=='0'">
				<view class="t1">预告</view>
				<view class="t2">{{item.showtime}}</view>
			</view>
			<view class="f2" v-if="item.status=='1'">
				<!-- <image :src="pre_url+'/static/img/liveing.gif'" class="t1"/> -->
				<view class="live-an-box">
					<view class="live-animation">
						<text  class="heng1"></text>
						<text  class="heng2"></text>
						<text  class="heng3"></text>
					</view>
				</view>
				<view class="t2" style="padding: 0 16rpx;">直播中</view>
			</view>
			<view class="f3" v-if="item.status=='2'">
				<view class="live-an-box">
					<view class="live-animation">
						<text  class="heng1"></text>
						<text  class="heng2"></text>
						<text  class="heng3"></text>
					</view>
				</view>
				<view class="t1" style="padding: 0 16rpx;">已结束</view>
			</view>
			<view class="f10">
				 <view class="title">{{item.name}}</view>
			</view>
		</view>
		<!-- #endif -->
	</view>
</view>
</template>
<script>
	export default {
		data(){
			return {
				pre_url:getApp().globalData.pre_url
			}
		},
		props: {
			params:{},
			data:{}
		}
	}
</script>
<style lang="scss">
.dp-liveroom{height: auto;position: relative; }
.dp-liveroom-liveroom{height: auto; overflow: hidden; padding: 0px;display:flex;flex-wrap:wrap}
.dp-liveroom-liveroom .item{width: 49%;display: inline-block;position: relative;margin-bottom:16rpx;background: #fff;border-radius:16rpx;overflow:hidden}
.dp-liveroom-liveroom .item .bgpic {width:100%;height:0;overflow:hidden;background: #fff;padding-bottom:140%;position: relative;}
.dp-liveroom-liveroom .item .bgpic .image{position:absolute;top:0;left:0;width: 100%;height:auto}
.dp-liveroom-liveroom .item .f1{display:flex;align-items:center;position:absolute;top:20rpx;left:20rpx;z-index:9;background:rgba(0,0,0,0.3);color:#ffffff;height:32rpx;line-height:32rpx;border-radius:16rpx;padding:0 20rpx;font-size:20rpx;padding-left:0;overflow:hidden}
.dp-liveroom-liveroom .item .f1 .t1{background:#FFDC30;color:#050505;padding-left:20rpx;padding-right:10rpx}
.dp-liveroom-liveroom .item .f1 .t2{padding-left:10rpx}
.dp-liveroom-liveroom .item .f2{ display:flex;align-items:center;position:absolute;top:20rpx;left:20rpx;z-index:9;background:rgba(0,0,0,0.3);color:#ffffff;height:32rpx;line-height:32rpx;border-radius:16rpx;font-size:20rpx}
.dp-liveroom-liveroom .item .f2 .t1{width:20rpx;height:20rpx}
.dp-liveroom-liveroom .item .f2 .t2{padding-left:2px}
.dp-liveroom-liveroom .item .f3{ display:flex;align-items:center;position:absolute;top:20rpx;left:20rpx;z-index:9;background:rgba(0,0,0,0.3);color:#ffffff;height:32rpx;line-height:32rpx;border-radius:16rpx;font-size:20rpx}
.dp-liveroom-liveroom .item .f10{position:absolute;bottom:40rpx;left:10%;width:80%;z-index:9;background:rgba(0,0,0,0.3);padding:0 20rpx;color:#ffffff;height:40rpx;line-height:40rpx;overflow:hidden;text-align:center;border-radius:20rpx;font-size:24rpx}

.live-an-box {
	width: 32rpx;
	height: 32rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #F9E201;
	border-radius: 300rpx;
}
.live-animation {
      width: 20rpx;
      height: 18rpx;
      // margin-left: 4rpx;
	  display: flex;
	  justify-content: space-evenly;
      align-items: flex-end;

      .heng1,
      .heng2,
      .heng3 {
        width: 4rpx;
        border-radius: 6rpx;
        background-color: #fff;
      }
      .heng1 {
        height: 18rpx;
        animation: hengos 0.8s linear infinite;
      }
      .heng2 {
        height: 6rpx;
        animation: hengts 0.8s linear infinite;
      }
      .heng3 {
        height: 18rpx;
        animation: henghs 0.8s linear 0.2s infinite;
      }
}

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