<template>
  <div>
    <top-header></top-header>
    <div class="mainbox">
      <div class="gas-container">
        <return-back></return-back>
        <h3>电气火灾监控信息</h3>
        <p>更新时间：{{ Time }}</p>
        <ul class="cardTabs"  >
          <li v-for="(item, index) in eleData"
            :key="index"  @click="Inv = index" :class="{ active: Inv === index }">{{item.DeviceName}}</li>
          <!-- <li @click="Inv = 1" :class="{ active: Inv === 1 }">电气火灾2</li> -->
        </ul>
        <div class="tabBox fireTabs" style="margin-bottom:3%">
          <table v-show="Inv == index" v-for="(item, index) in eleData"
            :key="index" >
            <tr>
              <th>1供电过压告警：<span class="normal">正常</span></th>
              <th>供电低压告警：<span class="normal">正常</span></th>
              <th>供电过流告警：<span class="normal">正常</span></th>
              <th>漏电告警：<span class="normal">正常</span></th>
            </tr>
            <tr>
              <td>
                <P>A相线缆温度超高：<span class="normal">正常</span></P>
                <P>B相线缆温度超高：<span class="normal">正常</span></P>
                <P>C相线缆温度超高：<span class="normal">正常</span></P>
              </td>
              <td>
                <P>A相电压：<span class="normal">219.00</span></P>
                <P>B相电压：<span class="normal">219.00</span></P>
                <P>C相电压：<span class="normal">219.00</span></P>
              </td>
              <td>
                <P>A相电流：<span class="normal">9.00</span></P>
                <P>B相电流：<span class="error">3.00</span></P>
                <P>C相电流：<span class="normal">9.00</span></P>
              </td>
              <td>
                <P>A相线缆温度：<span class="normal">29.00</span></P>
                <P>B相线缆温度：<span class="error">56.00</span></P>
                <P>C相线缆温度：<span class="normal">29.00</span></P>
              </td>
            </tr>
          </table>

          <!-- <table v-show="Inv == 1">
            <tr>
              <th>2供电过压告警：<span class="normal">正常</span></th>
              <th>供电低压告警：<span class="normal">正常</span></th>
              <th>供电过流告警：<span class="normal">正常</span></th>
              <th>漏电告警：<span class="normal">正常</span></th>
            </tr>
            <tr>
              <td>
                <P>A相线缆温度超高：<span class="normal">正常</span></P>
                <P>B相线缆温度超高：<span class="normal">正常</span></P>
                <P>C相线缆温度超高：<span class="normal">正常</span></P>
              </td>
              <td>
                <P>A相电压：<span class="normal">219.00</span></P>
                <P>B相电压：<span class="normal">219.00</span></P>
                <P>C相电压：<span class="normal">219.00</span></P>
              </td>
              <td>
                <P>A相电流：<span class="normal">9.00</span></P>
                <P>B相电流：<span class="error">3.00</span></P>
                <P>C相电流：<span class="normal">9.00</span></P>
              </td>
              <td>
                <P>A相线缆温度：<span class="normal">29.00</span></P>
                <P>B相线缆温度：<span class="error">56.00</span></P>
                <P>C相线缆温度：<span class="normal">29.00</span></P>
              </td>
            </tr>
          </table>

          <table v-show="Inv == 2">
            <tr>
              <th>供电过压告警3：<span class="normal">正常</span></th>
              <th>供电低压告警：<span class="normal">正常</span></th>
              <th>供电过流告警：<span class="normal">正常</span></th>
              <th>漏电告警：<span class="normal">正常</span></th>
            </tr>
            <tr>
              <td>
                <P>A相线缆温度超高：<span class="normal">正常</span></P>
                <P>B相线缆温度超高：<span class="normal">正常</span></P>
                <P>C相线缆温度超高：<span class="normal">正常</span></P>
              </td>
              <td>
                <P>A相电压：<span class="normal">219.00</span></P>
                <P>B相电压：<span class="normal">219.00</span></P>
                <P>C相电压：<span class="normal">219.00</span></P>
              </td>
              <td>
                <P>A相电流：<span class="normal">9.00</span></P>
                <P>B相电流：<span class="error">3.00</span></P>
                <P>C相电流：<span class="normal">9.00</span></P>
              </td>
              <td>
                <P>A相线缆温度：<span class="normal">29.00</span></P>
                <P>B相线缆温度：<span class="error">56.00</span></P>
                <P>C相线缆温度：<span class="normal">29.00</span></P>
              </td>
            </tr>
          </table> -->
        </div>

        <h3>可燃气体监控信息</h3>
        <div class="gasRecord">
          <div
            class="recordItem"
            v-for="(item, index) in getData.slice(0, 3)"
            :key="index"
          >
            <h3>{{ item.DeviceName }}</h3>
            <div>
              <ul>
                <li v-for="(innerItem, index) in item.Points" :key="index">
                  {{ innerItem.PointName}}
                </li>
              </ul>
              <ul>
                <li v-for="(innerItem, index) in item.Points" :key="index">
                  {{ 'Value' in innerItem ? innerItem.Value : '-'}}
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import topHeader from "@/components/topHeader";
import returnBack from "@/components/returnBack";
export default {
  name: "index",
  components: {
    topHeader,
    returnBack,
  },
  data() {
    return {
      getData: [],
      eleData:[],
      Inv: 0,
      Time: "",
    };
  },
  watch: {
    "$store.state.wsInfo"(val) {
      this.messageHandle(val);
    },
  },
  created() {
    this.StationID = this.$store.state.StationID;
    this.Time = this.$route.query.Time;
  },
  methods: {
    messageHandle(e) {
      if (e.data.search("{") != -1) {
        const redata = JSON.parse(e.data);
        // 初始化获取站点下拉数据
        if (redata.CMD == "getStationInfo" && redata.RESULT[0].StationID) {
          var json = {};
          json.CMD = "getPatrolDetail";
          json.StationID = this.StationID;
          json.Time = this.Time;

          this.global.sendWs(json);

          // setInterval(() => {
          //   console.log("每隔30秒请求一次getDeviceDetail");
          //   this.global.sendWs(json);
          // }, 30000);
        }
        if (redata.CMD == "getPatrolDetail") {
          this.recordData = redata.RESULT.LIST;
          // console.log(this.recordData);
          this.getData = this.recordData;
          this.eleData=this.recordData.slice(3,6);
          console.log(this.eleData)
        }
      }
    },
    goEleFireData() {
      this.$router.push("/eleFireData");
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
