<template>
  <!-- <div class="videosPage" id="videosPage">
    <div
      class="content"
      :class="videosPageWidth < 900 ? 'con-w2' : 'con-w1'"
      v-for="(item, index) in videoList"
      :key="item"
    >
      <haikang :index="index" :item="item" class="video"></haikang>
    </div>
  </div> -->
  <div class="environment">
    <!-- <div style="display: flex; flex-direction: row;"> -->
      <!-- <div style="background-color: chocolate; width: 24%; height: 100px; margin: 5px 5px 5px 5px;"> </div>
      <div style="background-color: chocolate; width: 24%; height: 100px; margin: 5px 5px 5px 5px;"> </div>
      <div style="background-color: chocolate; width: 24%; height: 100px; margin: 5px 5px 5px 5px;"> </div>
      <div style="background-color: chocolate; width: 24%; height: 100px; margin: 5px 5px 5px 5px;"> </div> -->
    <div class="env-content">
      <div v-for="item in tabList" :key="item.key" class="env-item">
        <div class="tab">
          <span :class="['uactived']" @click="activeTab = item.key">{{ item.name
          }}</span>
        </div>
        <div class="table-content">
          <ComTable :columns="columns[item.key]" :table-data="tableDatas[item.key]" ref="comTable"
            :table-option="{ page: false, select: false }">
          </ComTable>
        </div>
      </div>
    </div>
    <!-- </div> -->

    <!-- <div class="tab-header">
      <div v-for="item in tabList" :key="item.key" class="tab">
        <span
          :class="[activeTab == item.key ? 'actived' : 'uactived']"
          @click="activeTab = item.key"
          >{{ item.name }}</span
        >
      </div>
    </div>
    <div class="table-content">
      <ComTable
        :columns="columns[activeTab]"
        :table-data="tableDatas[activeTab]"
        ref="comTable"
        :table-option="{ page: false, select: false }"
      >
      </ComTable>
    </div> -->
  </div>
</template>

<script>
import { postReq, getReq } from '@/request/api'
import haikang from './haikang.vue'
export default {
  name: 'VideosPage',
  components: { haikang },
  props: {
    stationId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      activeTab: 'temp_hum',
      columns: {
        airc: [
          {
            title: '名称',
            dataIndex: 'pos',
            key: 'pos',
            ellipsis: true,
            align: 'center'
          },
          {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            ellipsis: true,
            align: 'center'
          }
        ],
        cooling: [
          {
            title: '名称',
            dataIndex: 'pos',
            key: 'pos',
            ellipsis: true,
            align: 'center'
          },
          {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            ellipsis: true,
            align: 'center'
          }
        ],
        fire40: [
          {
            title: '点位',
            dataIndex: 'pos',
            key: 'pos',
            ellipsis: true,
            align: 'center'
          },
          {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            ellipsis: true,
            align: 'center'
          }
        ],
        temp_hum: [
          {
            title: '点位',
            dataIndex: 'pos',
            key: 'pos',
            ellipsis: true,
            align: 'center'
          },
          {
            title: '温度',
            dataIndex: 'temp',
            key: 'temp',
            ellipsis: true,
            align: 'center'
          },
          {
            title: '湿度',
            dataIndex: 'hum',
            key: 'hum',
            ellipsis: true,
            align: 'center'
          }
        ]
      },
      tabList: [
        {
          key: 'temp_hum',
          name: '环境温湿度信息'
        },
        {
          key: 'cooling',
          name: '冷机信息'
        },
        {
          key: 'fire40',
          name: '消防信息'
        },
        {
          key: 'airc',
          name: '空调信息'
        },
      ],
      tableDatas: {},

      tableOption: {
        select: false,
        page: false
      },
      //
      videoList: [],
      g_iWndIndex: 0,
      szDeviceIdentify: '',
      deviceport: '',
      channels: [],
      ip: '',
      port: '',
      username: '',
      password: '',
      iRtspPort: '',
      videosPageWidth: '',
      timer: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      // const div = document.getElementById('videosPage')
      // const width = div.offsetWidth
      // this.videosPageWidth = width
    })

    this.getEnvironment()
    this.getDeviceList()
    this.timer=setInterval(() => {
      this.getEnvironment()
      this.getDeviceList()
    }, 20000)
  },
  unmounted() {
    clearInterval(this.timer)
  },
  methods: {
    async getEnvironment() {
      try {
        const res = await getReq('/queryEnvironment', { station_id: this.stationId })
        this.tableDatas = res.data
      } catch (error) {
        this.tableDatas = {}
        console.log(error)
      }
    },
    //请求运行监控系统设备信息
    async getDeviceList() {
      try {
        const res = await getReq('/queryDevicByCategory', {
          station_id: this.stationId,
          category: 4
        })

        this.videoList = res.data.concat(res.data)
        this.videoList = this.videoList.concat(this.videoList)

        this.$emit('updateGatewayData', res.gateway);
      } catch (error) {
        this.videoList = []

        console.log(error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.videosPage {
  width: calc(100% - 470px);
  height: 100%;
  margin-left: 20px;
  display: flex;
  flex-wrap: wrap;
  grid-gap: 20px;
  overflow-y: auto;
  align-content: flex-start;
  justify-content: flex-start;
  .content {
    border-radius: 15px;
    background: $bg2-color;
    padding: 15px;
    height: 280px;
  }
  .con-w1 {
    width: calc((100% - 40px) / 3);
  }
  .con-w2 {
    width: calc((100% - 20px) / 2);
  }
}
.environment {
  width: 100%; //430px;
  margin-left: 20px;
  color: #fff;


  .env-content {
    width: 100%;
    height: 100%;
    display: flex;
    .env-item {
      width: 24%;

      .tab {
        &>span {
          font-size: 14px;
          margin-right: 15px;
          display: inline-block;
          padding: 10px;
          // cursor: pointer;
          border: 1px solid $tab-border;
          border-radius: 4px;
          text-align: center;
          width: 50%;
        }
      }
      .actived {
        color: #ffffff;
        background-color: $green;
      }
      .uactived {
        color: #a6b8dd;
        background-color: $bg2-color;
      }
    }
  }

  .title {
    font-size: 24px;
    font-weight: 700;
  }
  .content {
    margin-top: 15px;
    border-radius: 6px;
    border: 1px solid $border-color;
    font-size: 18px;
    font-weight: 700;
    .header {
      height: 40px;
      background: linear-gradient(90deg, #3dfefa33 0%, #00fffb33 50.17%, #3dfefa33 100%), #3dfefa33;
    }
    .header,
    .row {
      display: flex;
      div {
        flex: 1; /* 每列平分宽度 */
        text-align: center; /* 文字水平居中 */
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中（如果需要） */
        padding: 10px; /* 可选：添加内边距 */
      }
    }
  }
  .tab-header {
    display: flex;

    .tab {
      & > span {
        font-size: 14px;
        margin-right: 15px;
        display: inline-block;
        padding: 10px;
        cursor: pointer;
        border: 1px solid $tab-border;
        border-radius: 4px;
        text-align: center;
      }
    }
    .actived {
      color: #ffffff;

      background-color: $green;
    }
    .uactived {
      color: #a6b8dd;
      background-color: $bg2-color;
    }
  }
  .table-content {
    margin-top: 20px;
    margin-right: 10px;
    height: calc(100% - 60px);
    :deep(.ant-table) {
      border-radius: 10px 10px 0 0 !important;
      overflow: hidden; /* 确保圆角生效 */
    }
    :deep(.ant-table-body) {
      border-radius: 0px 0px 10px 10px !important;
    }
  }
}
</style>
