<template>
  <div class="tunnelLog">
    <div style="margin: 0 auto;border-radius: 8px;display: ''" ref="table">
      <div class="tableBox">
        <vxe-table
          ref="sTable"
          border="inner"
          class="mytable"
          height="400px"
          show-overflow
          auto-resize
          :data="channelDisconLogList">
          <vxe-table-column field="channelName" title="通道名称"></vxe-table-column>
          <vxe-table-column field="disconnectTime"  title="断开时间" :formatter="dateFormat"></vxe-table-column>
          <vxe-table-column field="reconnectTime" title="重连时间" :formatter="dateFormat"></vxe-table-column>
          <vxe-table-column field="duration" title="断开时长" ></vxe-table-column>
        </vxe-table>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "tunnelLog",
    data(){
      return{
        activeNames: ['2'],
        channelDisconLogList:[]
      }
    },
    destroyed(){
      clearInterval(this.timer)
    },
    mounted() {
      this.getChannelDisconLog()
      this.timer = setInterval(this.getChannelDisconLog, 1000*60)
    },
    methods:{
      getChannelDisconLog() {
        this.$axios.get('/dashboard/getChannelDisconLog').then(res => {
          this.channelDisconLogList = res.data
          // console.log(res.data)
        }).catch(e=>{
          this.$message.error("通道页面获取通道异常日志异常："+e)
        })
      },
      dateFormat({ cellValue, row, column }) {
        return this.$XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:mm:ss')
      }
    }
  }
</script>

<style scoped>

</style>
