<template>
  <view class="danmu-wrap">
    <view
      v-for="item in listData"
      :key="item.id"
      class="danmu-li"
      :class="item.type"
      :style="[item.style]"
    >
      <view class="danmu-inner" @tap="jumpDtail(item.link)">
        <!-- <view :class="[`danmu-${(['R','SR','SSR','SP'])[index%4]}`]" v-if="item.level"> -->
        <view
          v-if="item.level && item.level !== 'N'"
          :class="[`danmu-${item.level}`]"
        >
          <image :src="item.img" class="avatar" mode="aspectFill"></image>
          恭喜{{ item.name }}抽到<text class="level">{{ item.level }}</text>
          <image class="sku" :src="item.img2" mode="aspectFit"></image>
        </view>
        <view v-else-if="item.t == '0'" class="user-box">
          <view class="user">
            <image class="img" :src="item.img"></image
            ><text>{{ item.name }}</text>
          </view>
          <view class="danmu-content">
            <text class="danmu-text">{{ item.content }}</text>
            <image class="img" :src="item.img2"></image>
          </view>
        </view>
        <view v-else class="user-box" style="padding-left: 24rpx">
          <view class="user-status cl1">
            {{ item.content }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    //rightToLeft leftToRight leftBottom
    type: {
      type: String,
      default: "rightToLeft",
    },
    minTime: {
      type: Number,
      default: 16,
    },
    maxTime: {
      type: Number,
      default: 21,
    },
    minTop: {
      type: Number,
      default: 0,
    },
    maxTop: {
      type: Number,
      default: 240,
    },
    hrackH: {
      //轨道高度
      type: Number,
      default: 40,
    },
  },
  data() {
    return {
      listData: [],
    };
  },
  mounted() {
    this.hrackNum = Math.floor((this.maxTop - this.minTop) / this.hrackH);
  },
  methods: {
    add(obj) {
      const data = {
        img: obj.img,
        img2: obj.img2,
        content: obj.content,
        link: obj.link,
        top: obj.top,
        level: obj.level,
        t: obj.type,
        name: obj.name,
        id: Date.now(),
        // time: Math.ceil(Math.floor(Math.random() * (this.maxTime - this.minTime + 1) + this.minTime)),
        time: Math.ceil(
          Math.floor(
            Math.random() * (this.maxTime - this.minTime + 1) + this.minTime
          )
        ),
        // time: 5,
        type: this.type,
      };
      // console.log(data.time, Math.random())
      // if (this.type === 'leftBottom') {
      // 	let objData = {
      // 		item: data.item,
      // 		type: 'leftBottomEnter',
      // 		style: {
      // 			transition: `all 0.5s`,
      // 			animationDuration: `0.5s`,
      // 			transform: `translateX(0%)`,
      // 			bottom: `${this.minTop}px`
      // 		}
      // 	}
      // 	let listLen = this.listData.length;
      // 	let hrackNum = this.hrackNum;
      // 	for (let i in this.listData) {
      // 		if(this.listData[i].status === 'reuse'){ //重用
      // 			this.$set(this.listData,i,objData);
      // 		}else if(this.listData[i].status === 'reset'){ //重置
      // 			this.listData[i].style.transition = 'none';
      // 			this.listData[i].style.bottom = 0;
      // 			this.listData[i].status = 'reuse';
      // 		}else if(this.listData[i].status === 'recycle'){ //回收
      // 			this.listData[i].type = 'leftBottomExit';
      // 			this.listData[i].status = 'reset';
      // 		}else{
      // 			this.listData[i].style.bottom = parseInt(this.listData[i].style.bottom) + this.hrackH + 'px';
      // 		}
      // 		if(parseInt(this.listData[i].style.bottom) >= (this.maxTop - this.hrackH) && this.listData[i].status !== 'reset'){ //需要回收
      // 			this.listData[i].status = 'recycle';
      // 		}
      // 	}
      // 	if(listLen < hrackNum + 2){
      // 		this.listData.push(objData);
      // 	}
      // } else
      if (this.type === "rightToLeft" || this.type === "leftToRight") {
        const objData = this.horStacked(data);
        for (const i in this.listData) {
          if (this.listData[i].delTime <= Date.parse(new Date())) {
            this.repaint(i, objData.type);
            objData.type = "";
            this.$set(this.listData, i, objData);
            return;
          }
        }
        this.listData.push(objData);
      }
    },
    // 弹幕跳转
    jumpDtail(link) {
      if (link) {
        uni.navigateTo({
          url: "../../pages" + link,
        });
      }
    },
    horStacked(data) {
      return {
        img: data.img,
        img2: data.img2,
        content: data.content,
        link: data.link,
        t: data.t,
        name: data.name,
        level: data.level,
        id: data.id,
        type: this.type,
        style: {
          animationDuration: `${data.time}s`,
          // top: `${Math.ceil(Math.random() * (this.maxTop - this.minTop + 1) + this.minTop)}px`
          top: `${data.top}rpx`, // 0
        },
        delTime: Date.parse(new Date()) + data.time * 1200,
      };
    },
    repaint(index, type) {
      setTimeout(() => {
        this.listData[index].type = type;
      }, 100);
    },
  },
};
</script>
<style lang="scss">
@keyframes leftBottomEnter {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }

  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}

@keyframes leftBottomExit {
  0% {
    transform: translateY(0%);
    opacity: 1;
  }

  100% {
    transform: translateY(-200%);
    opacity: 0;
  }
}

@keyframes leftToRight {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }

  100% {
    transform: translateX(100%);
    opacity: 1;
  }
}

@keyframes rightToLeft {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}
.danmu-wrap {
  overflow: hidden;
  position: absolut;
  width: 100%;
  z-index: 2;
  transform: translate3d(0, 0, 0);
  top: 0;
  pointer-events: none;
  height: 240rpx;
}
.danmu-li {
  position: absolute;
  width: 100%;
  transform: translateX(100%);
  animation-fill-mode: both;
  animation-timing-function: linear;

  &.leftBottomEnter {
    animation-name: leftBottomEnter;
  }

  &.leftBottomExit {
    animation-name: leftBottomExit;
    animation-fill-mode: forwards;
  }

  &.rightToLeft {
    animation-name: rightToLeft;
  }

  &.leftToRight {
    animation-name: leftToRight;
  }

  .danmu-inner {
    display: inline-block;

    .user-box {
      display: flex;
      box-sizing: border-box;
      padding: 0rpx 24rpx 0 16rpx;
      background: rgba(0, 0, 0, 0.6);
      align-items: center;
      justify-content: space-between;
      width: 296rpx;
      height: 52rpx;
      background: url(@/assets/detail/bg-bullet.png) no-repeat;
      background-size: contain;

      .user-img {
        .img-box {
          display: flex;

          image {
            width: 48rpx;
            height: 48rpx;
            color: #ffffff;
            border-radius: 50%;
          }
        }
      }

      .user-status {
        margin-left: 10rpx;
        white-space: nowrap;
        font-size: 20rpx;
        // font-weight: 400;
        color: #ffffff;
        letter-spacing: 2rpx;
        height: 48rpx;
        line-height: 48rpx;
      }

      .user-text {
        margin-left: 10rpx;
        font-size: 20rpx;
        // font-weight: 400;
        color: #ffffff;
        line-height: 48rpx;
        letter-spacing: 2rpx;
      }

      .user,
      .danmu-content {
        display: flex;
        align-items: center;
        font-size: 20rpx;
        font-weight: 500;
        color: #ffffff;
        white-space: nowrap;
        .img {
          width: 32rpx;
          height: 32rpx;
          font-size: 20rpx;
          font-weight: 500;
          color: #ffffff;
        }
      }

      .user {
        .img {
          margin-right: 6rpx;
          border-radius: 100%;
        }
      }
      .danmu-content {
        flex: 1;
        width: 0;
        .danmu-text {
          flex: 1;
          width: 0;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          text-align: right;
        }
        .img {
          margin-left: 8rpx;
        }
      }
    }
  }
}
.danmu-R,
.danmu-SR,
.danmu-SSR,
.danmu-SP {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-size: 20rpx;
  color: #ffffff;
  background: no-repeat center;
  background-size: contain;
  position: relative;
  margin-left: 20rpx;

  &::before,
  &::after {
    content: "";
    position: absolute;
    background: no-repeat center;
    background-size: contain;
  }
  &::before {
    z-index: 0;
  }
  &::after {
    z-index: 10;
    width: 66rpx;
    height: 24rpx;
    margin-top: -4rpx;
  }
  .avatar {
    width: 54rpx;
    height: 54rpx;
    position: relative;
    z-index: 5;
    display: block;
    border-radius: 100%;
    margin-right: 50rpx;
  }
  .sku {
    display: block;
    width: 32rpx * 1.8;
    height: 32rpx * 1.8;
    margin-left: 14rpx;
  }
  .level {
    font-style: italic;
    font-weight: bold;
    margin-left: 14rpx;
    font-size: 34rpx;
    font-weight: bold;
  }
}
.danmu-R {
  width: 426rpx;
  height: 87rpx;
  background-image: url(@/assets/bullet/bg-R.png);
  padding: 14rpx 0 19rpx 6rpx;

  &::before {
    background-image: url(@/assets/bullet/avatar-R.png);
    width: 102rpx;
    height: 80rpx;
    left: -18rpx;
    top: 1rpx;
  }
  &::after {
    background-image: url(@/assets/bullet/label-R.png);
    left: 0rpx;
    top: 62rpx;
  }
}
.danmu-SR {
  width: 523rpx;
  height: 96rpx;
  background-image: url(@/assets/bullet/bg-SR.png);
  padding: 21rpx 0 21rpx 48rpx;
  &::before {
    background-image: url(@/assets/bullet/avatar-SR.png);
    width: 138rpx;
    height: 88rpx;
    left: 7rpx;
    top: 0;
  }
  &::after {
    background-image: url(@/assets/bullet/label-SR.png);
    left: 43rpx;
    top: 69rpx;
  }
}
.danmu-SSR {
  width: 537rpx;
  height: 116rpx;
  background-image: url(@/assets/bullet/bg-SSR.png);
  padding: 37rpx 0 25rpx 44rpx;
  &::before {
    background-image: url(@/assets/bullet/avatar-SSR.png);
    width: 137rpx;
    height: 95rpx;
    left: 3rpx;
    top: 9rpx;
  }
  &::after {
    background-image: url(@/assets/bullet/label-SSR.png);
    left: 38rpx;
    top: 85rpx;
  }
}
.danmu-SP {
  width: 556rpx;
  height: 145rpx;
  background-image: url(@/assets/bullet/bg-SP.png);
  padding: 46rpx 0 45rpx 56rpx;
  &::before {
    background-image: url(@/assets/bullet/avatar-SP.png);
    width: 137rpx;
    height: 103rpx;
    left: 14rpx;
    top: 10rpx;
  }
  &::after {
    background-image: url(@/assets/bullet/label-SP.png);
    left: 49rpx;
    top: 97rpx;
  }
}
</style>
