<template>
  <div>
    <transition-group name="test">
      <div v-show="backshow" :key="1"  class="tunnelback" :class="this.backshow===true?'tunnelback':'tunnelerback'">
        <a ref="topupClose" class="topupClose" @click="close" />
        <div ref="tunnellist" class="tunnelList">
          <div v-if="showType==0">
            <div v-for="items in tunnelList" style="display:inline-block; padding-left: 15px;padding-top: 10px">
              <el-tooltip placement="top">
                <div slot="content"><div style="font-size: 18px" v-html="items.tips"></div></div>
                <div v-if="items.channelName.length>10" :class="items.channelStatus==='0'?'bad':'breathe-div'" style="fontSize:10px;padding-top: 5px">{{ items.channelName }}</div>
                <div v-if="items.channelName.length<=10" :class="items.channelStatus==='0'?'bad':'breathe-div'">{{ items.channelName }}</div>
              </el-tooltip>
            </div>
          </div>
          <div v-else>
            <div v-for="items in tunnelList" style="padding-left: 15px;padding-top: 10px">
              <div v-if="items.channelName.length>10" :class="items.channelStatus==='0'?'bad':'breathe-div'" style="fontSize:10px;padding-top: 5px">{{ items.channelName }}</div>
              <div v-if="items.channelName.length<=10" :class="items.channelStatus==='0'?'bad':'breathe-div'">{{ items.channelName }}</div>
              <div style="color:white;" v-html="items.tips"></div>
              <el-divider content-position="left"></el-divider>
            </div>
          </div>
        </div>
      </div>
    </transition-group>
  </div>
</template>

<script>
  export default {
    name: 'Tunnel',
    props: {
      list: {
        type: Object
      }
    },
    data() {
      return {
        tunnelList: [],
        backshow: true,
        status: true,
        showType:1
      }
    },
    watch: {
      list(newList, oldList) {
        this.tunnelList = newList.value
        this.backshow = true
        this.$refs.tunnellist.style.display = ''
        this.$refs.topupClose.style.display = ''
        this.showType = newList.showType
      }
    },
    mounted(){
      this.init()
    },
    methods: {
      init() {
        this.backshow = true
        this.$refs.tunnellist.style.display = ''
        this.$refs.topupClose.style.display = ''
      },
      close() {
        this.$refs.topupClose.style.display = 'none'
        this.$refs.tunnellist.style.display = 'none'
        this.backshow = false
        this.status = false
        setTimeout(this.closefile, 400)
      },
      closefile() {
        // this.$emit('oncolse', this.status)
        this.$emit('onTunnelChange', this.backshow)
      }
    }
  }
</script>

<style scoped>
  .el-divider{background-color:#3b91b6}
  .el-divider--horizontal{
    margin: 0px;
  }
  .tunnelback{
    width: 80%;
    height: 650px;
    /*background: rgb(42, 48, 88);*/
    background: #061f3e;
    position: relative;
    margin: 5% 10%;
    z-index: 998;
    animation: tunnelmove 0.4s ;
    /*   display: none;*/
  }
  .tunnelerback{
    width: 80%;
    height: 650px;
    /* background: rgb(42, 48, 88);*/
    background: #061f3e;
    position: relative;
    margin: 5% 10%;
    z-index: 998;
    animation: tunnelclosemove 0.4s ;
    /*   display: none;*/
  }
  .topupClose{
    display: block;
    width: 44px;
    height: 44px;
    background: url(./img/s_ico3.png);
    background-size: 100% 100%;
    position: absolute;
    top: -22px;
    right: -22px;
    z-index: 1000;
  }
  .breathe-div {
    width: 150px;
    height: 30px;
    color: white;
    display: inline-block;
    border: 1px solid rgba(8, 220, 14, 0.5);
    background: linear-gradient(180deg, rgba(27, 220, 8, 0.3),rgba(0,180,220,0.1),rgba(0,180,220,0.1), rgba(44, 220, 4, 0.3));
    border-radius: .5rem;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-name: breathe;
    -webkit-animation-duration: 1500ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
  }
  .bad{
    width: 150px;
    height: 30px;
    color: white;
    background: linear-gradient(to right, #ffb40d, #ff420d, #df0808);
    border-radius: 5px;
    border: 1px solid red;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-name: bad;
    -webkit-animation-duration: 1500ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
  }
  @-webkit-keyframes breathe {
    0% {
      opacity: 1;
      box-shadow: 0 1px 2px rgba(9, 223, 37, 0.4), 0 1px 1px rgba(0, 147, 223, 0.1) inset;
    }
    50% {
      opacity: 0.5;
      box-shadow: 0 1px 2px rgba(120, 223, 17, 0.4), 0 1px 1px rgba(0, 147, 223, 0.1) inset;
    }
    100% {
      opacity: 1;
      border: 1px solid rgba(145, 235, 143, 0.7);
      box-shadow: 0 1px 30px #57df00, 0 1px 20px #34df3d inset;
    }
  }
  @-webkit-keyframes bad {
    0% {
      opacity: 1;
      box-shadow: 0 1px 2px rgba(223, 55, 52, 0.4), 0 1px 1px rgba(0, 147, 223, 0.1) inset;
    }
    50% {
      opacity: 0.7;
      box-shadow: 0 1px 2px rgba(223, 0, 7, 0.58), 0 1px 1px rgba(0, 147, 223, 0.1) inset;
    }
    100% {
      opacity: 1;
      border: 1px solid rgba(59, 235, 235, 0.7);
      box-shadow: 0 1px 30px #df3734, 0 1px 20px #ff420d inset;
    }
  }
  @keyframes tunnelmove {
    0%{
      width: 0px;height: 650px;
    }
    100%{
      width: 80%;height: 650px;
    }
  }
  @keyframes tunnelclosemove {
    100%{
      width: 0px;height: 650px;
    }
    0%{
      width: 80%;height: 650px;
    }
  }
</style>
