<template>
  <div id="bWCenter">
    <!--      <span class="text">传感器在线信息</span>-->
    <div class="body-box">
      <p slot="title" class="text">11水浸环境实时数据</p>
      <Table  :row-class-name="rowClassName" max-height="290" :columns="config.columns" :data="config.data" :border="false" >
        <template #action="{ row, index }">
          <a-tag v-if="row.data1 === 0" color="#87d068">正常</a-tag>
          <!--          <a-button v-else color="#f50" @click="fetchStatus(row)" type="primary">需查看状态</a-button>-->
          <!--          <a-tag v-else color="#87d068">正常</a-tag>-->
          <a-tag v-else color="#f50">异常</a-tag>
          <!--            <span v-else>{{ text }} </span>-->
        </template>
      </Table>
      <!--        <dv-scroll-board  :config="config" />-->

    </div>
  </div>
  <!--  <Table height="200" width="100px" :columns="columns" :data="data"></Table>-->
</template>

<script>

import {getAction} from "@api/manage";

export default {
  name: "bWCenter",

  data() {
    return {

      statusData: null, // 存储状态查询结果

      rowStyleOption: {
        stripe: true,
      },
      config:{
        columns: [
          {
            key: "deviceName",
            title: "设备名称",
            width: 230,
            align: "center",
          },
          {
            key: "createTime",
            title: "采集时间",
            width: 180,
            align: "center",
          },
          {
            key: "data1",
            title: "水浸状态",
            // width: 300,
            align: "center",
            slot: 'action',
          },
        ],
        data: [],
      },

      url: {
        getAirWaterData: "/energy/buAirWater/getAirWaterData",
        getAirWateronline: "/energy/buAirWater/getAirWateronline",
      },
    };
  },

  created() {
    this.get()
  },
  methods: {
    rowClassName (row, index) {
      if (index %2) {
        return 'demo-table-error-row';
      } else{
        return 'demo-table-info-row';
      }
      return '';
    },

    async fetchStatus(row){
      console.log('获取表的数据:', row);
      console.log('获取表的数据字段1:', row.sensorId);
      console.log('获取表的数据字段2:', row.deviceName);

      // getAction(this.url.getAirWaterDataa, {}, 'get').then((res) => {

      getAction(this.url.getAirWateronline, {sensorId:row.sensorId}).then((res) => {
        if(res.result.length > 0){
          this.config.data = res.result
          this.config = {...this.config}
          this.$emit('wTransmit', true)
          this.$message.error("水侵状态已更新")

          console.log('水侵状态已更新:', res.result);
        }else {
          this.$emit('wTransmit', false)
        }
      })
    },

    async fetchStatusa(statusData){
      console.log('获取表的数据333:', statusData);
      // getAction(this.url.getAirWaterDataa, {}, 'get').then((res) => {

      getAction(this.url.getAirWateronline, {sensorId:statusData}).then((res) => {
        if(res.result.length > 0){
          this.config.data = res.result
          this.config = {...this.config}
          this.$emit('wTransmit', true)
          this.$message.error("水侵状态已更新")
        }else {
          this.$emit('wTransmit', false)
        }
      })
    },


    get(){
      getAction(this.url.getAirWaterData, {}, 'get').then((res) => {
        console.log('返回实时数据11:', res.result);
        if(res.result.length > 0){
          this.config.data = res.result
          console.log('返回实时数据:', res.result);
          console.log('返回实时数据333:', res.result.records);

          var aaa = res.result
            .filter(item => item.data1 === 1) // 先过滤出 data1 等于 1 的项
            .map(item => ({
              field1: item.data1, // 提取第一个字段
              field2: item.sensorId,  // 提取第二个字段
            }));

          console.log('bbb333:', aaa);
          if(aaa[0].field1 == 1)
          {
            console.log('aaa333:', aaa[0].field1);
            console.log('aaa555:', aaa[0].field2);
            // this.fetchStatusa(aaa[0].field2);//自动调用接口
          }

          this.config = {...this.config}
          this.$emit('wTransmit', true)
        }else {
          this.$emit('wTransmit', false)
        }
      })
    }
  },
}
</script>

<style lang="less">
#bWCenter {
  padding: 5px;
  .ivu-table .demo-table-info-row td{
    background-color: #ffffff;
    height: 40px;
    color: #000000;
    font-size: 14px;
    border: #f1f1f1;
  }
  .ivu-table .demo-table-error-row td{
    background-color: #f1f1f1;
    height: 40px;
    color: #000000;
    font-size: 14px;
    border: #f1f1f1;
  }
  .ivu-table th {
    height: 40px;
    font-size: 15px;
    background-color: #f0f2f3;
  }
  .ivu-table-header th {
    font-weight: normal;
    color: #000000;
    font-family: 'Arial', sans-serif;
  }
  .text {
    color: #000000;
    font-size: 16px;
    font-weight:bold;
    margin-top: 0;
    margin-bottom: 0;
    //text-align: center;
  }
  .ivu-table-wrapper {
    border: none;
    border-radius: 6px;
    padding-top: 5px;
  }
  .ivu-table:before{content:'';width:100%;height:0px;position:absolute;left:0;bottom:0;z-index:1}
  .ivu-table:after{content:'';width:0px;height:100%;position:absolute;top:0;right:0;z-index:3}

}
</style>