<template>
  <div class="watch-state" v-if="liveNowStatus">
     <span :class="`type ${liveNowStatus.class}`" :style="{maxWidth: afterStatus ? '375px' : 0, transform: afterStatus ? '' : 'translateX(20px)' , opacity: afterStatus ? 1 : 0}">
       <div class="state">{{ afterStatus ? liveNowStatus.name: '' }}</div>
       <div class="icon-box" v-if="afterStatus && liveNowStatus.icon">
          <div class="loader">
            <div class="line"></div>
            <div class="line"></div>
            <div class="line"></div>
          </div>
       </div>
     </span>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
  name: 'player-watch-chat',
  data() {
    return {
      afterStatus: false
    }
  },
  computed: {
    ...mapGetters({
      channelInfo: 'channelInfo',
    }),
     liveNowStatus() {
      const status = this.channelInfo.liveNowStatus;
      switch (status) {
        case 1:
          return {
            class: 'blue',
            name: '直播',
            icon: true
          }
        case -1:
          return {
            class: 'red',
            name: '已结束'
          }
        case 3:
          return {
            class: 'green',
            name: '预告'
          }
        case 2:
          return {
            class: 'yellow',
            name: '回放中'
          }
        default:
          return false
      }
    }
  },
  mounted() {
    if (this.liveNowStatus) {
       setTimeout(() => {
        this.afterStatus = true
      }, 1000)
    }
  },
  watch: {
    liveNowStatus(newVal) {
      setTimeout(() => {
        this.afterStatus = newVal
      }, 1000)
    }
  }
}
</script>

<style lang="less" scoped>
.watch-state {
   display: inline-block;
   position: absolute;
   bottom: calc(9 / 16 * 100vw - 0.12rem);
   left: 0.1rem;
   z-index: 111;
   border-radius: 12px;
   line-height: 100%;
   transform: translate(0, 100%);
   ::v-deep .type {
     border-radius: 3px;
     display: inline-block;
     color: #FFF;
     padding: .02rem .05rem;
     font-size: .1rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
     transition: all .3s;
     max-width: 0;
     overflow: hidden;
     word-break:keep-all;
     white-space:nowrap;
     height: .2rem;
     transform: scale(0.9);
     .state {
       height: 100%;
       display: flex;
       justify-content: center;
       align-items: center;
     }
     .icon-box {
       margin: 0 0.03rem;
       display: inline-block;
       min-height: 12px;
       min-width: 12px;
       width: 0.1rem;
       height: 0.1rem;
       .loader {
        transform: rotate(-90deg) translateX(25%);
        height: 100%;
        width: 100%;
        margin: 0 0.03rem;
        .line {
          width: 0.05rem;
          height: 1px;
          margin-bottom: 4px;
          background-color: #fff;
          animation: expand 1s ease-in-out infinite;
          &:nth-child(2) {
            animation-delay: 180ms;
          }
          &:nth-child(3) {
            animation-delay: 360ms;
          }
          &:nth-child(4) {
            animation-delay: 540ms;
          }
          &:last-child {
            margin-bottom: 0px;
          }
          @keyframes expand {
            0% {
                transform: scale(1);
            }
            25% {
                transform: scale(2);
            }
          }
        }
       }
     }
     &.blue {
       background: #3F9CFC;
     }
     &.yellow {
       background: #FEB90E;
     }
     &.green {
       background: #4BC337;
     }
     &.red {
       background: #FC5147;
     }
   }
 }
</style>
