<template>
  <div>
    <el-dialog
      class="tunnelDialog"
      :visible.sync="backshow"
      :append-to-body="true"
      :modal-append-to-body="false"
      :title="title"
      width="65%"
      @closed="closeDraw"
      style="height: 100%">
        <div ref="tunnellist" class="tunnelList">
          <div v-if="showType==0">
            <div v-for="items in tunnelList" style="display:inline-block; padding: 2%">
              <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'?'tunnelbad':'tunnelPanel'" style="fontSize:10px;padding-top: 5px">{{ items.channelName }}</div>
                <div v-if="items.channelName.length<=10" :class="items.channelStatus==='0'?'tunnelbad':'tunnelPanel'">{{ 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'?'tunnelbad':'tunnelPanel'" style="fontSize:10px;padding-top: 5px">{{ items.channelName }}</div>
              <div v-if="items.channelName.length<=10" :class="items.channelStatus==='0'?'tunnelbad':'tunnelPanel'">{{ items.channelName }}</div>
              <span style="color:#000000;margin-left: 1%" v-html="items.tips"></span>
              <el-divider content-position="left"></el-divider>
            </div>
          </div>
        </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "sonTunnel",
    props: {
      list: {
        type: Object
      }
    },
    data(){
      return{
        title: '',
        tunnelList: [],
        backshow: false,
        status: true,
        showType:1
      }
    },
    watch: {
      list(newValue, oldValue) {
        this.title = newValue.name
        this.tunnelList = newValue.value
        this.backshow = true
        this.showType = newValue.showType
      }
    },
    mounted() {
    },
    methods:{
      closeDraw(){
        this.backshow = false
        this.$emit('onTunnelChange', this.backshow)
      },
    }
  }
</script>

<style scoped>
  .tunnelDialog /deep/ .el-dialog__header {
    padding: 10px;
  }
  .tunnelDialog /deep/ .el-dialog__body {
    padding: 0px;
  }
  .tunnelPanel {
    width: 150px;
    height: 30px;
    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: 2px 5px 10px rgba(0,180,220,.5);

  }
  .tunnelbad{
    width: 150px;
    height: 30px;
    color: white;
    background: #E94057;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #F27121, #E94057);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #F27121, #E94057); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    border-radius: 5px;
    border: 1px solid red;
    box-shadow: 2px 5px 10px rgba(255,0,3,.5);
    display: inline-block;
    text-align: center;
    cursor: pointer;
  }
</style>
