<template>
  <div class="dashboard-container">
    <el-table :data="tableData">
      <el-table-column prop="installMile" label="里程" min-width="150" show-overflow-tooltip="false" fixed="left">
      </el-table-column>
      <el-table-column prop="cameraCode" label="相机名称" min-width="280" show-overflow-tooltip="false">
      </el-table-column>
      <el-table-column prop="streamPath" label="StreamPath" min-width="150" show-overflow-tooltip="false">
      </el-table-column>
      <el-table-column prop="type" label="类型" width="150">
      </el-table-column>
      <el-table-column prop="startTime" label="开始时间" width="150"></el-table-column>

      <el-table-column label="音频">
        <el-table-column label="格式" width="120">
          <template slot-scope="scope">
            {{ scope.row.audioTracks?scope.row.audioTracks.name:'' }}
          </template>
        </el-table-column>
        <el-table-column prop="province" label="采样率" width="120">
          <template slot-scope="scope">
            {{ scope.row.audioTracks?scope.row.audioTracks.sampleRate:'' }}
          </template>
        </el-table-column>
        <el-table-column prop="city" label="声道" width="120">
          <template slot-scope="scope">
            {{ scope.row.audioTracks?scope.row.audioTracks.channels:'' }}
          </template>
        </el-table-column>
        <el-table-column prop="address" label="码率">
          <template slot-scope="scope">
            {{ scope.row.audioTracks?scope.row.audioTracks.bps:'' }}
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="视频">
        <el-table-column prop="name" label="格式" width="120">
          <template slot-scope="scope">
            {{ scope.row.videoTracks?scope.row.videoTracks.name:'' }}
          </template>
        </el-table-column>
        <el-table-column prop="province" label="分辨率" width="120">
          <template slot-scope="scope">
            {{ scope.row.videoTracks?scope.row.videoTracks.resolution:'' }}
          </template>
        </el-table-column>
        <el-table-column prop="city" label="GOP" width="120">
          <template slot-scope="scope">
            {{ scope.row.videoTracks?scope.row.videoTracks.gop:'' }}
          </template>
        </el-table-column>
        <el-table-column prop="address" label="码率">
          <template slot-scope="scope">
            {{ scope.row.videoTracks?scope.row.videoTracks.bps:'' }}
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column prop="subscribers" label="订阅者" width="120" fixed="right">
      </el-table-column>
    </el-table>
  </div>
</div></template>
<script>
import axios from 'axios'
import { getStream } from '@/api/analogData'
export default {
  name: 'streamRadio',
  data() {
    return {
      tableData: [],
      timer:null
    }
  },
  created() {
    this.timer=setInterval(this.getData,2000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    hoursUntil(targetTime) {
      // 创建目标时间的Date对象
      var target = new Date(targetTime);
      // 创建当前时间的Date对象
      var now = new Date();
      // 计算时间差（毫秒）
      var difference = target - now;
      // 将时间差转换为小时
      var hours = difference / (1000 * 60 * 60);
      // 返回结果
      return Math.round(hours * -1) + '小时前';
    },
    getData() {
      getStream().then(res=>{
          this.tableData=res.data
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.dashboard-container {
  .search-content {
    width: 100%;
    height: 74px;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding-left: 10px;

    .el-input {
      margin: 0 10px;
    }

    .el-select {
      margin: 0 10px;
    }

    .search-btn {
      display: flex;
      align-items: center;
      height: 100%;
      margin-left: 10px;

      div {
        // margin: 0 6px;
        display: inline-block;
        width: 80px;
        height: 40px;
        border-radius: 2px;
        font-size: 14px;
        line-height: 40px;
        text-align: center;
      }

      div:hover {
        cursor: pointer;
      }

      .search {
        margin-right: 10px;
        background-color: #2766DD;
        color: #F7F8FB;
      }

      .search:hover {
        background-color: #4D85F4;
      }

      .reset {
        color: #333334;
        border: 1px solid #D7D7D7;
      }

      .reset:hover {
        color: #1F9FFF;
        border: 1px solid #1F9FFF;
      }
    }
  }

  .table-content {
    margin-top: 15px;
    width: 100%;
    background-color: #fff;
    padding: 0 20px 20px;

    .btn {
      margin: 15px 20px 15px 0;
      cursor: pointer;
      float: left;
      text-align: center;
      width: 98px;
      height: 34px;
      border-radius: 2px;
      border: 1px solid #ABC7FD;
      line-height: 34px;
      font-weight: 400;
      font-size: 14px;
      color: #2250C8;
      background-color: #E7EEFF;
    }

    .btn:hover {
      color: #FFFFFF;
      background-color: #2250C8;
      border: 1px solid #2250C8;
    }

    .btn:active {
      color: #FFFFFF;
      background-color: #194DA4;
      border: 1px solid #194DA4;
    }

    .startUsing {
      width: 54px;
      height: 24px;
      margin: 14.5px auto 0;
      line-height: 24px;
      text-align: center;
      font-size: 12px;
      color: #00974D;
      border-radius: 4px;
      background-color: #E7FAF0;
      border: 1px solid #BEFDDD;
    }

    .Deactivate {
      width: 54px;
      height: 24px;
      margin: 14.5px auto 0;
      line-height: 24px;
      text-align: center;
      font-size: 12px;
      color: #FF9933;
      border-radius: 4px;
      background-color: #FFF3E8;
      border: 1px solid #FDE6CF;
    }

    .operateBtn {
      display: flex;
      justify-content: center;
      color: #2866DD;

      div {
        font-size: 14px;
        margin: 0 5px;
        cursor: pointer;
      }
    }

    .pagination {
      margin: 10px 0;
      width: 100%;
      height: 20px;

      .el-pagination {
        float: right;
        margin: 10px 0;
      }
    }
  }

}
</style>