<template>
  <div>
    <top-header></top-header>
    <div class="mainbox">
      <div class="gas-container">
        <return-back></return-back>
        <h3>电气火灾监控实时信息</h3>
        <p>更新时间：{{time}}</p>
        <div>
          <ul class="cardTabs">
            <li class="active">数据列表</li>
            <li @click="goEleFireData">数据可视化</li>
          </ul>

          <div class="tabBox fireTabs">
            <div>
              <table>
                <tr>
                  <th>
                    供电过压告警：
                     <span v-if="getData.length > 0 " class="normal" :class="[getData[0].AlarmStatus==0?'normal':'error']">
                      {{ getData[0].AlarmStatus==0?'正常':getData[0].AlarmStatus==1?"告警":"故障" }}
                    </span>
                    <span v-else class="normal">
                      默认正常
                    </span>
                    
                  </th>
                  <th>
                    供电低压告警：
                    <span v-if="getData.length > 0 " class="normal" :class="[getData[1].AlarmStatus==0?'normal':'error']">
                      {{ getData[1].AlarmStatus==0?'正常':getData[1].AlarmStatus==1?"告警":"故障" }}
                    </span>
                    <span v-else class="normal">
                      默认正常
                    </span>
                  </th>

                  <th>
                    供电过流告警：
                    <span v-if="getData.length > 0 " class="normal" :class="[getData[2].AlarmStatus==0?'normal':'error']">
                      {{ getData[2].AlarmStatus==0?'正常':getData[2].AlarmStatus==1?"告警":"故障" }}
                    </span>
                    <span v-else class="normal">
                      默认正常
                    </span>
                  </th>

                  <th>
                    漏电告警：
                    <span v-if="getData.length > 0 " class="normal" :class="[getData[3].AlarmStatus==0?'normal':'error']">
                      {{ getData[3].AlarmStatus==0?'正常':getData[3].AlarmStatus==1?"告警":"故障" }}
                    </span>
                    <span v-else class="normal">
                      默认正常
                    </span>
                  </th>
                </tr>
                <tr>
                  <td>
                    <P>A相线缆温度超高：
                      <span v-if="getData.length > 0 " class="normal" :class="[getData[4].AlarmStatus==0?'normal':'error']">
                      {{ getData[4].AlarmStatus==0?'正常':getData[4].AlarmStatus==1?"告警":"故障" }}
                    </span>
                    <span v-else class="normal">
                      默认正常
                    </span>
                    </P>
                    <P>B相线缆温度超高：
                       <span v-if="getData.length > 0 " class="normal" :class="[getData[5].AlarmStatus==0?'normal':'error']">
                      {{ getData[5].AlarmStatus==0?'正常':getData[5].AlarmStatus==1?"告警":"故障" }}
                    </span>
                    <span v-else class="normal">
                      默认正常
                    </span>
                    </P>
                    <P>C相线缆温度超高：
                       <span v-if="getData.length > 0 " class="normal" :class="[getData[6].AlarmStatus==0?'normal':'error']">
                      {{ getData[6].AlarmStatus==0?'正常':getData[6].AlarmStatus==1?"告警":"故障" }}
                    </span>
                    <span v-else class="normal">
                      默认正常
                    </span>
                    </P>
                  </td>
                  <td>
                    <P>A相电压：
                      <span class="normal"  v-if="getData.length > 0 ">
                        {{getData[7].Value}}
                      </span>
                      <span v-else>
                        219.00
                      </span>
                    </P>
                    <P>B相电压：
                       <span class="normal"  v-if="getData.length > 0 ">
                        {{getData[8].Value}}
                      </span>
                      <span v-else>
                        219.00
                      </span>
                    </P>
                    <P>C相电压：
                       <span class="normal"  v-if="getData.length > 0 ">
                        {{getData[9].Value}}
                      </span>
                      <span v-else>
                        219.00
                      </span>
                      </P>
                  </td>
                  <td>
                    <P>A相电流：
                       <span class="normal"  v-if="getData.length > 0 ">
                        {{getData[10].Value}}
                      </span>
                      <span v-else>
                        9.00
                      </span>
                    </P>
                    <P>B相电流：
                      <!-- <span class="error">3.00</span> -->
                      <span class="normal"  v-if="getData.length > 0 ">
                        {{getData[11].Value}}
                      </span>
                      <span v-else>
                        9.00
                      </span>
                    </P>
                    <P>C相电流：
                      <span class="normal"  v-if="getData.length > 0 ">
                        {{getData[12].Value}}
                      </span>
                      <span v-else>
                        9.00
                      </span>
                      <!-- <span class="normal">9.00</span> -->
                      </P>
                  </td>
                  <td>
                    <P>A相线缆温度：
                      <span class="normal"  v-if="getData.length > 0 ">
                        {{getData[13].Value}}
                      </span>
                      <span v-else>
                        29.00
                      </span>
                      <!-- <span class="normal">29.00</span> -->
                    </P>
                    <P>B相线缆温度：
                      <span class="normal"  v-if="getData.length > 0 ">
                        {{getData[14].Value}}
                      </span>
                      <span v-else>
                        29.00
                      </span>
                      
                      <!-- <span class="error">56.00</span> -->
                      </P>
                    <P>C相线缆温度：
                      <span class="normal"  v-if="getData.length > 0 ">
                        {{getData[15].Value}}
                      </span>
                      <span v-else>
                        29.00
                      </span>
                      <!-- <span class="normal">29.00</span> -->
                    </P>
                  </td>
                </tr>
              </table>
            </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 {
      StationID: "",
      DeviceID: "",
      getData: [],
      time:''
    };
  },
  watch: {
    "$store.state.wsInfo"(val) {
      this.messageHandle(val);
    },
  },
  created() {
    this.DeviceID = this.$route.query.DeviceID;
    this.StationID = this.$store.state.StationID;
  },
  methods: {
    goEleFireData() {
      this.$router.push({
        path: "/eleFireData",
        query: { DeviceID: this.DeviceID },
      });
    },
    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 = "getDeviceDetail";
          json.StationID = this.StationID;
          json.DeviceID = this.DeviceID;

          this.global.sendWs(json);

          // setInterval(() => {
          //   console.log("每隔30秒请求一次getDeviceDetail");
          //   this.global.sendWs(json);
          // }, 30000);
        }

        if (redata.CMD == "getDeviceDetail") {
          console.log("redata.RESULT");
          this.getData = redata.RESULT.Device[0].Points;
          this.time=redata.time
        }
      }
    },
  },
};
</script>

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