<template>
  <view class="themes-live position-r">
    <view
      v-for="(item, index) in shopVideo"
      :key="index"
      @click="goto"
      :data-url="'/activity/shortvideo/detail?id=' + item.videoId"
    >
    <view class="themes-live__item flex">
      <view class="themes-live__item-hd"
        @click="goto"
        :data-url="'/activity/shortvideo/detail?id=' + item.videoId">
        <view class="bofang-box">
          <text class="iconfont icon-bofang"></text>
        </view>
        <image
          class="themes-live__item-img"
          :src="item.coverimg"
          mode="aspectFill"
        ></image>
      </view>
      <view class="themes-live__item-bd">
        <view class="themes-live__item-title">{{item.description}}</view>
        <view class="themes-live__item-time">
          <view class="themes-live__item-duration">{{
            formatSeconds(Number(item.video_duration)) || "00:00"
          }}</view>
          <view class="themes-live__item-animat flex j-between">
            <text class="heng1"></text>
            <text class="heng2"></text>
            <text class="heng3"></text>
          </view>
        </view>
        <themes-vip
          v-if="shopNotice.length != 0"
          :shopNotice="shopNotice"
          :noticeIcon="shopData.noticeIcon"
        ></themes-vip>
        <view class="themes-live__item-goods flex al-item-center" v-if="item.hasOwnProperty('goods')">
          <image
            class="goods-img"
            :src="item.goods.propic"
            mode="aspectFill"
          ></image>
          <view class="goods-bd flex flex-colum j-between">
            <text class="goods-title">{{ item.goods.proname }}</text>
            <view class="goods-bot flex al-item-center">
              <view class="goods-price">
                ¥<text class="goods-price__num font-w">{{
                item.goods.prosell_price
              }}</text>
              </view>
              <view class="goods-more"></view>
            </view>
          </view>
        </view>
      </view> 
    </view>
    </view>
  </view>
</template>

<script>
import themesVip from "./themes-vip.vue";
export default {
  components: {
    themesVip
  },
  props: {
    shopVideo: {
      type: Array,
      default: function() {
        return [];
      },
    },
    noticeIcon: {
      type: String,
      default: '',
    },
    shopNotice: {
      type: Array,
      default: function() {
        return [];
      },
    },
  },
  data() {
    return {
      shopData:{},
    };
  },
  mounted() {
    uni.getStorage({
      key: "header_data",
      success: function(res){
          this.shopData = res.data;
      },
    })
  },
  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;
			},
  },
};
</script>

<style lang="scss" scoped>
.themes-live {
  margin-top: 24rpx;
  &__item {
    justify-content: space-between;
    border-radius: 10rpx;
    overflow: hidden;
    background: linear-gradient(to right, #FFE4C2 0%, #FFC382 100%);
    &-hd {
      width: 300rpx;
      height: 416rpx;
      flex-shrink: 0;
      position: relative;
    }
    &-img {
      width: 100%;
      height: 100%;
    }
    .bofang-box {
      top: 50%;
      left: 50%;
      width: 66rpx;
      height: 66rpx;
      position: absolute;
      background: rgba($color: #000000, $alpha: 0.5);
      transform: translateX(-50%) translateY(-50%);
      border-radius: 50%;
    }
    .icon-bofang {
      position: absolute;
      color: #FFF;
      font-size: 30rpx;
      left: 50%;
      top: 50%;
      transform: translateX(-45%) translateY(-50%);
    }
    &-bd {
      padding: 20rpx;
      flex: 1;
    }
    &-title {
      min-height: 80rpx;
      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;
    }
    &-time {
      display: inline-flex;
      align-items: center;
      background: linear-gradient(to right, #ff841a 0%, #ff640a 100%);
      padding: 0 6rpx;
      border-radius: 4rpx;
    }
    &-duration {
      font-size: 20rpx;
      color: #FFFFFF;
      line-height: 30rpx;
      margin-right: 4rpx;
    }
    &-animat {
      align-items: flex-end;
      height: 30rpx;
      padding: 6rpx 0;
      .heng1,
      .heng2,
      .heng3 {
        display: block;
        width: 4rpx;
        border-radius: 4rpx;
        margin-right: 3rpx;
        background-color: #fff;
      }
      
      
      .heng1 {
        height: 18rpx;
        animation: hengos .8s linear infinite;
      }
      
      .heng2 {
        height: 8rpx;
        animation: hengts .8s linear  infinite;
      }
      .heng3 {
        height: 18rpx;
        animation: henghs .8s linear .2s infinite;
        margin-right: 0;
      }
    }
    &-goods {
      margin-top: 16rpx;
      background: #FFF;
      border-radius: 12rpx;
      padding: 8rpx 14rpx;
      width: 100%;
      box-sizing: border-box;
      .goods-img {
        width: 122rpx;
        height: 122rpx;
        flex-shrink: 0;
        border-radius: 10rpx;
      }
      .goods-bd {
        flex: 1;
        max-width: 200rpx;
        height: 122rpx;
        margin-left: 10rpx;
      }
      .goods-title {
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .goods-bot {
        justify-content: space-between;
      }
      .goods-price {
        font-size: 22rpx;
        font-weight: 500;
        color: #333333;
        line-height: 32rpx;
        &__num {
          margin-left: 4rpx;
          font-size: 30rpx;
          line-height: 44rpx;
        }
      }
      .goods-more {
        width: 30rpx;
        height: 30rpx;
        border-radius: 50%;
        background: linear-gradient(323deg, #FF5E07 0%, #FF9F28 100%);
        position: relative;
        &::before {
          content: "";
          position: absolute;
          left: 0;
          top: 50%;
          width: 12rpx;
          height: 12rpx;
          border-top: 1rpx solid #FFFFFF;
          border-right: 1rpx solid #FFFFFF;
          transform: rotate(45deg) translateY(-72%);
        }
      }
    }
  }

  .live-s-t {
    width: 308rpx;
    height: 120rpx;
    padding: 6rpx 16rpx;
    border-radius: 12rpx;
    background-color: #fff;
    left: 15rpx;
    bottom: 15rpx;
    z-index: 3;

    .s-t-img {
      width: 86rpx;
      height: 86rpx;
      border-radius: 12rpx;
    }

    .tx-bx {
      min-height: 43px;
      padding-left: 16rpx;
      .tx-tl {
        font-size: 24rpx;
      }
      .tx1 {
        padding-top: 6rpx;
        font-size: 20rpx;
      }
      .tx2 {
        font-size: 28rpx;
      }
    }
  }
}
	@keyframes hengos {
		0%   {height: 18rpx;}
		50%  {height: 8rpx;}
		100% {height: 18rpx;}
	}
	@keyframes hengts {
		0%   {height: 8rpx;}
		50%  {height: 18rpx;}
		100% {height: 8rpx;}
	}
	@keyframes henghs {
		0%   {height: 18rpx;}
		50%  {height: 8rpx;}
		100% {height: 18rpx;}
	}
</style>