<template>
  <div>
    <div class="svgIcon">
      <el-button size="mini" class="back" type="primary" @click="$emit('back')" icon="el-icon-refresh-left"
        >返回</el-button
      >
    </div>

    <el-table
      stripe
      :data="TerminalDetails"
      class="xshou"
      style="width: 100%; margin-bottom: 10px"
      row-key="id"
      id="rebateSetTable"
      border
      highlight-current-row
      :height="vh + 'px'"
      header-cell-class-name="table_header"
      v-loading="loading"
      element-loading-text="数据加载中"
      :header-cell-style="{
        height: '25px',
        padding: '0px',
      }"
      :row-style="{ height: '28px' }"
      :cell-style="{ padding: '2px' }"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column
        min-width="150"
        prop="deviceName"
        label="台账信息"
        :show-overflow-tooltip="true"
        class="TAB"
        width="200"
      >
      </el-table-column>
      <el-table-column
        prop="cityName"
        align="center"
        label="所属地区"
      ></el-table-column>
      <el-table-column
        prop="subName"
        align="center"
        label="变电站"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column
        prop="integrityValue"
        align="center"
        min-width="80"
        label="数据完整性(%)"
      >
        <template slot-scope="scope">
          <span>{{
            scope.row.integrityValue == null
              ? "/"
              : scope.row.integrityValue.toFixed(2)
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="onlineRateValue"
        align="center"
        min-width="80"
        label="在线率(%)"
      >
        <template slot-scope="scope">
          <span>{{
            scope.row.onlineRateValue == null
              ? "/"
              : scope.row.onlineRateValue.toFixed(2)
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="comOutCount"
        align="center"
        min-width="100"
        label="通讯中断(次)"
      >
      </el-table-column>
      <el-table-column
        prop="alarmCount"
        align="center"
        min-width="100"
        label="终端告警(次)"
      >
      </el-table-column>
      <el-table-column
        prop="flowValue"
        align="center"
        min-width="100"
        label="终端流量(%)"
      >
      </el-table-column>
      <el-table-column label="操作" align="center" min-width="60">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="details(scope.row)"  icon="el-icon-view"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :close-on-click-modal="false"
      :title="title"
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-collapse v-model="activeNames">
        <el-collapse-item title="终端基础信息" name="1">
          <div>
            {{ Basicinformation }}
          </div>
          <div></div>
        </el-collapse-item>
        <el-collapse-item title="数据完整性" name="2">
          <div>
            {{ Dataintegrity }}
          </div>
        </el-collapse-item>
        <el-collapse-item title="在线率" name="3">
          <div>
            {{ onlinerate }}
          </div>
        </el-collapse-item>
        <el-collapse-item title="终端通讯信息" name="4">
          <div style="white-space: pre-line">
            {{ Communicationinformation }}
          </div>
        </el-collapse-item>
        <el-collapse-item title="终端告警信息" name="5">
          <div style="white-space: pre-line">
            {{ alarminformation }}
          </div>
        </el-collapse-item>
        <el-collapse-item title="终端流量信息" name="6">
          <div>
            {{ trafficinformation }}
          </div>
        </el-collapse-item>
      </el-collapse>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    TerminalDetails: {
      type: Array,
      default: undefined,
    },
  },
  components: {},
  data() {
    return {
      activeNames: ["1", "2", "3", "4", "5", "6"],
      title: "",
      dialogVisible: false,
      loading: true,
      vh: undefined,
      tableData: [],
      Basicinformation: "",
      Dataintegrity: "",
      onlinerate: "",
      Communicationinformation: "",
      alarminformation: "",
    };
  },
  created() {},
  mounted() {
    this.setHeight()
        window.addEventListener('resize', this.setHeight)
    //this.loading = true
    this.tableData = this.TerminalDetails;
    if (this.tableData != []) {
      this.loading = false;
    }
  },

  beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
          this.vh = window.sessionStorage.getItem("appheight") - 50;

          
        },
    details(e) {
      this.title = "异常终端详情";
      this.dialogVisible = true;
      this.Basicinformation =
        e.cityName + "_" + e.subName + "," + e.deviceName + ";";
      if (e.integrityFlag == "0") {
        this.Dataintegrity =
          "数据完整性" + ":" + e.integrityValue + "%" + "[不合格]";
      } else if (e.integrityFlag == "1") {
        this.Dataintegrity =
          "数据完整性" + ":" + e.integrityValue + "%" + "[合格]";
      }
      if (e.onlineRateFlag == "-1") {
        this.onlinerate = "在线率" + ":" + e.onlineRateValue + "%" + "[不合格]";
      } else if (e.onlineRateFlag == "1") {
        this.onlinerate = "在线率" + ":" + e.onlineRateValue + "%" + "[合格]";
      }
      this.Communicationinformation = e.comOutDesc.replace(/,/g, "\n");
      this.alarminformation = e.alarmDesc.replace(/,/g, "\n");
      // console.log(this.Communicationinformation);
      // this.alarminformation = e.alarmDesc
      this.trafficinformation =
        e.deviceName + "终端流量已使用" + e.flowValue + "%";
    },
  },

  computed: {},

  watch: {},
};
</script>
<style lang="less" scoped>
@import url("../../../../../styles/comStyle.less");
</style>
<style lang="scss" scoped>
.svgIcon {
  display: flex;
  justify-content: end;
}
.back {
  margin-right: 10px;
  margin-bottom: 10px;
  margin-left: auto;
}

::v-deep .el-collapse-item__header.is-active {
  color: rgb(4, 199, 179);
  border-bottom-color: transparent;
}
::v-deep .el-collapse-item__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  height: 48px;
  font-size: 13px;
  font-weight: 500;
  line-height: 48px;
  color: #e8a806;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #ebeef5;
  outline: 0;
  -webkit-box-align: center;
  -webkit-transition: border-bottom-color 0.3s;
  transition: border-bottom-color 0.3s;
  -ms-flex-align: center;
}
</style>
