<template>
  <el-dialog
    class="ipDialog"
    title="历史IP信息"
    :visible.sync="isShow"
    :close-on-click-modal="false"
    width="820px"
    ><div class="headInfo">
      <span class="zzid">装置编号：{{ rowData.cmdid }}</span>
      <span class="pictotal">总数：{{ total }}</span>
    </div>
    <div class="ipContain">
      <el-table
        v-loading="iploading"
        ref="multipleTable"
        :data="ipListData"
        tooltip-effect="dark"
        stripe
        style="width: 100%"
        height="calc(100% - 0px)"
        fit
        border
      >
        <template slot="empty">
          <el-empty :image-size="160" description="暂无数据"></el-empty>
        </template>
        <el-table-column label="序号" width="50px">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="心跳服务器时间" prop="heartbeatTime">
          <template slot-scope="scope">
            {{
              scope.row.createTime == null || scope.row.createTime == 0
                ? ""
                : scope.row.createTime
            }}
          </template>
        </el-table-column>
        <el-table-column label="心跳报文时间" prop="heartbeatTime">
          <template slot-scope="scope">
            {{
              scope.row.heartbeatTime == null || scope.row.heartbeatTime == 0
                ? ""
                : $moment(scope.row.heartbeatTime * 1000).format(
                    "YYYY-MM-DD HH:mm:ss"
                  )
            }}
          </template>
        </el-table-column>
        <el-table-column label="IP" prop="heartbeatIp"> </el-table-column>
        <el-table-column label="端口" prop="heartbeatPort"> </el-table-column>
      </el-table>
    </div>
    <div class="pageNation">
      <el-pagination
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :current-page="page"
        :page-size="pageSize"
        layout="sizes, prev, pager, next, jumper,total"
        :total="total"
        background
      >
      </el-pagination>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="isShow = false">关 闭</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getIpList } from "@/utils/api/reportApi";

export default {
  props: {},

  data() {
    return {
      isShow: false,
      rowData: "",
      iploading: false,
      ipListData: [],
      page: 1, // 当前页数
      pageSize: 20, // 每页数量
      total: 0, //总条数
    };
  },
  methods: {
    getIPList() {
      this.iploading = true;
      setTimeout(() => {
        getIpList({
          termId: this.rowData.id,
          pageNum: this.page,
          pageSize: this.pageSize,
        })
          .then((res) => {
            console.log(res);
            this.ipListData = res.data.list;
            this.total = res.data.total;
            this.iploading = false;
          })
          .catch((err) => {
            this.iploading = false;
            console.log(err);
          });
      }, 100);
    },
    display(row) {
      this.isShow = true;
      this.rowData = row;
      this.getIPList();
    },
    hide() {
      this.isShow = false;
    },
    //点击分页
    handleCurrentChange(val) {
      this.page = val;
      this.getIPList();
    },

    //每页条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.getIPList();
    },
  },

  created() {},
};
</script>
<style lang="less">
.ipDialog {
  .el-dialog {
    height: 70%;
    .el-dialog__body {
      height: calc(100% - 126px);
    }
  }
  .el-table {
    .cell {
      text-align: center;
      vertical-align: middle; /* 如果需要垂直居中 */
    }
  }
  .ipContain {
    height: calc(100% - 32px);
    .el-table {
      color: #000;
      thead {
        color: #000;
        font-weight: bold;
      }
      th.el-table__cell {
        background: #dcdcdc !important;
      }
      td.el-table__cell,
      th.el-table__cell.is-leaf {
        border-bottom: 1px solid #dcdcdc;
      }
      .el-table__cell {
        border-right: 1px solid #dcdcdc;
      }
    }
  }
  .headInfo {
    position: absolute;
    top: 22px;
    left: 154px;
    display: flex;
    align-items: center;
    font-size: 14px;
    .zzid {
      color: #333;
    }
    .pictotal {
      margin-left: 12px;
    }
  }
}
</style>
