<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 @click="Inv = 0" :class="{ active: Inv === 0 }">数据列表</li>
            <li @click="Inv = 1" :class="{ active: Inv === 1 }">数据可视化</li>
          </ul>
          <div class="tabBox">
            <div>
              <div v-if="Inv == 1" class="lineChart gas-data">
                <line-chart :getData="getData" ></line-chart>
              </div>

              <table v-if="Inv == 0">
                <tr>
                  <th>名称</th>
                  <!-- <th>设备位置</th> -->
                  <th>浓度</th>
                  <th>告警状态</th>
                </tr>
                <tr>
                  <td>{{ getData.DeviceName }}</td>
                  <!-- <td>位置BBBBBB</td> -->
                  <td>
                    <!-- 0.00%LEL -->
                    {{nongDu}}
                  </td>
                  <td class="normal" :class="[ AlarmStatus == 0 ? 'normal' : 'error',]">
                    {{AlarmStatus==0?"正常":AlarmStatus==1?"告警":"故障"}}
                    </td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import topHeader from "@/components/topHeader";
import lineChart from "./components/lineChart";
import returnBack from "@/components/returnBack";
export default {
  name: "index",
  components: {
    topHeader,
    returnBack,
    lineChart,
  },
  data() {
    return {
      Inv: 0,
      DeviceID: "",
      getData: {},
      StationID: "",
      time:'',
      AlarmStatus:'',
      nongDu:'',
      chartPoint:[],
      chartDate:[]
    };
  },
  watch: {
    "$store.state.wsInfo"(val) {
      this.messageHandle(val);
    },
  },
  computed: {
  },

  created() {
    this.DeviceID = this.$route.query.DeviceID;
    this.StationID = this.$store.state.StationID;
  },
  
  methods: {
    messageHandle(e) {
      if (e.data.search("{") != -1) {
        const redata = JSON.parse(e.data);
        this.time=redata.time;

        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");
          console.log(redata.RESULT.Device[0]);
          this.getData =redata.RESULT.Device[0];
          this.AlarmStatus=this.getData.Points[0].AlarmStatus
          this.nongDu=this.getData.Points[1].Value

        }
      }
    },
  },
};
</script>

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