<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>
                {{ item.Points[0].PointName }}：<span
                  :class="[item.Points[0].Value == 0 ? 'normal' : 'error']"
                  >{{
                    item.Points[0].Value == 0
                      ? "正常"
                      : item.Points[0].Value == 1
                      ? "告警"
                      : "故障"
                  }}</span
                >
              </th>

              <th>
                {{ item.Points[1].PointName }}：<span
                  :class="[item.Points[1].Value == 0 ? 'normal' : 'error']"
                  >{{
                    item.Points[1].Value == 0
                      ? "正常"
                      : item.Points[1].Value == 1
                      ? "告警"
                      : "故障"
                  }}</span
                >
              </th>
              <th>
                {{ item.Points[2].PointName }}：<span
                  :class="[item.Points[2].Value == 0 ? 'normal' : 'error']"
                  >{{
                    item.Points[2].Value == 0
                      ? "正常"
                      : item.Points[2].Value == 1
                      ? "告警"
                      : "故障"
                  }}</span
                >
              </th>
              <th>
                {{ item.Points[3].PointName }}：<span
                  :class="[item.Points[3].Value == 0 ? 'normal' : 'error']"
                  >{{
                    item.Points[3].Value == 0
                      ? "正常"
                      : item.Points[3].Value == 1
                      ? "告警"
                      : "故障"
                  }}</span
                >
              </th>
            </tr>
            <tr>
              <td>
                <P>
                  {{ item.Points[4].PointName }}：<span
                    :class="[item.Points[4].Value == 0 ? 'normal' : 'error']"
                    >{{
                      item.Points[4].Value == 0
                        ? "正常"
                        : item.Points[4].Value == 1
                        ? "告警"
                        : "故障"
                    }}</span
                  ></P
                >
                <P>
                  {{ item.Points[5].PointName }}：<span
                    :class="[item.Points[5].Value == 0 ? 'normal' : 'error']"
                    >{{
                      item.Points[5].Value == 0
                        ? "正常"
                        : item.Points[5].Value == 1
                        ? "告警"
                        : "故障"
                    }}</span
                  ></P
                >
                <P>
                  {{ item.Points[6].PointName }}：<span
                    :class="[item.Points[6].Value == 0 ? 'normal' : 'error']"
                    >{{
                      item.Points[6].Value == 0
                        ? "正常"
                        : item.Points[6].Value == 1
                        ? "告警"
                        : "故障"
                    }}</span
                  ></P
                >
              </td>
              <td>
                <P
                  >A相电压：
                  <span
                    :class="[item.Points[7].Value == 0 ? 'normal' : 'error']"
                    v-if="'Value' in item.Points[7]"
                  >
                    {{ item.Points[7].Value }}
                  </span>
                  <span v-else> - </span>
                </P>
                <P
                  >B相电压：
                  <span class="normal" v-if="'Value' in item.Points[8]">
                    {{ item.Points[8].Value }}
                  </span>
                  <span v-else> - </span>
                </P>
                <P
                  >C相电压：
                  <span class="normal" v-if="'Value' in item.Points[9]">
                    {{ item.Points[9].Value }}
                  </span>
                  <span v-else> - </span>
                </P>
              </td>
              <td>
                <P
                  >A相电流：
                  <span class="normal" v-if="'Value' in item.Points[10]">
                    {{ item.Points[10].Value }}
                  </span>
                  <span v-else> - </span>
                </P>
                <P
                  >B相电流：
                  <!-- <span class="error">3.00</span> -->
                  <span class="normal" v-if="'Value' in item.Points[11]">
                    {{ item.Points[11].Value }}
                  </span>
                  <span v-else> - </span>
                </P>
                <P
                  >C相电流：
                  <span class="normal" v-if="'Value' in item.Points[12]">
                    {{ item.Points[12].Value }}
                  </span>
                  <span v-else> - </span>
                  <!-- <span class="normal">9.00</span> -->
                </P>
              </td>
              <td>
                <P
                  >A相线缆温度：
                  <span class="normal" v-if="'Value' in item.Points[13]">
                    {{ item.Points[13].Value }}
                  </span>
                  <span v-else> - </span>
                  <!-- <span class="normal">-</span> -->
                </P>
                <P
                  >B相线缆温度：
                  <span class="normal" v-if="'Value' in item.Points[14]">
                    {{ item.Points[14].Value }}
                  </span>
                  <span v-else> - </span>

                  <!-- <span class="error">56.00</span> -->
                </P>
                <P
                  >C相线缆温度：
                  <span class="normal" v-if="'Value' in item.Points[15]">
                    {{ item.Points[15].Value }}
                  </span>
                  <span v-else> - </span>
                  <!-- <span class="normal">-</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>告警状态</li>
                <li>浓度值</li> -->
                <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">
                  <span
                    v-if="'Value' in innerItem"
                    :class="[innerItem.Value == 0 ? 'normal' : 'error']"
                  >
                    {{
                      index == 0
                        ? innerItem.Value == 0
                          ? "正常"
                          : "异常"
                        : innerItem.Value
                    }}
                  </span>
                  <span v-else>-</span>
                </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("排序前");
          console.log(this.eleData);

          let sortPointer = [
            1, 2, 3, 4, 5, 6, 7, 65, 66, 67, 68, 69, 70, 71, 72, 73,
          ];

          // console.log(sortPointer);

          // console.log(element1)

          this.eleData.forEach((element2, index) => {
            let sortPointerArr = [];
            element2.Points.forEach((element3) => {
              sortPointer.forEach((index) => {
                if (element3.BusAddr == index) {
                  sortPointerArr.push(element3);
                }
              });
            });
            this.eleData[index].Points = sortPointerArr;
          });
          console.log("排序后");
          console.log(this.eleData);
        }
      }
    },
    goEleFireData() {
      this.$router.push("/eleFireData");
    },
  },
};
</script>

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