<template>
  <div class="container">
    <div class="centerImg"></div>
    <div class="leftMenu">
      <div v-for="(i,k) in deviceList" :key="k" class="item" @click="getRightData(i)">
        <span>{{ i.deviceModeName }}</span>
      </div>
    </div>
    <div ref="right" class="right">
      <div ref="search" class="search" style="min-height: 60px">
        <el-form v-show="tableShow" :inline="true" :model="form" class="demo-form-inline">
          <el-form-item label="传感器编号">
            <el-input v-model="form.data1" placeholder="传感器编号"></el-input>
          </el-form-item>
          <el-form-item label="传感器名称">
            <el-input v-model="form.data2" placeholder="传感器名称"></el-input>
          </el-form-item>
          <el-form-item label="采集时间">
            <el-date-picker
              v-model="form.data3"
              end-placeholder="结束日期"
              range-separator="至"
              start-placeholder="开始日期"
              type="datetimerange">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="query">查询</el-button>
            <el-button @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div :style="{height:maxHeight+'px'}" class="table">
        <el-table
          v-if='tableShow'
          v-loading="loading"
          :cell-style="setStyle"
          :data="tableData"
          :header-cell-style="{ textAlign: 'center',backgroundColor:'#0a457d' }"
          :max-height="maxHeight">
          style="width: 100%">
          <el-table-column v-for="i in deviceDataColumns" :label="i.columnName" :prop="i.columnKey">
            <template slot-scope="scope">
              <img v-if="tableData[scope.$index][i.columnKey].toString().includes('http')"
                   :src="tableData[scope.$index][i.columnKey]" alt="" height="100px"
                   width="100px">
              <span v-else> {{ tableData[scope.$index][i.columnKey].toString() }}</span>
            </template>
          </el-table-column>
          <!--          <el-table-column-->
          <!--            label="rssi"-->
          <!--            prop="rssi">-->
          <!--          </el-table-column>-->
          <!--          <el-table-column-->
          <!--            label="value1"-->
          <!--            prop="value1">-->
          <!--          </el-table-column>-->
          <!--          <el-table-column-->
          <!--            label="编号"-->
          <!--            prop="devicecode">-->
          <!--          </el-table-column>-->
          <!--          <el-table-column-->
          <!--            label="alias"-->
          <!--            prop="alias">-->
          <!--          </el-table-column>-->
          <!--          <el-table-column-->
          <!--            label="设备名称"-->
          <!--            prop="devicename">-->
          <!--          </el-table-column>-->
          <!--          <el-table-column-->
          <!--            label="ts"-->
          <!--            prop="ts">-->
          <!--          </el-table-column>-->
          <!--          <el-table-column-->
          <!--            label="voltage"-->
          <!--            prop="voltage">-->
          <!--          </el-table-column>-->
          <el-table-column align="center" class-name="small-padding fixed-width" label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                @click="toHistory(scope.row.deviceid,scope.row.devicemodeid)"
              >查看历史
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div ref="pagination" style="margin-top: 12px;height: 36px;">
        <el-pagination :current-page="offset" :pageSize="limit" :total="total" background
                       layout="prev, pager, next" style="display: inline-block;float:right;"
                       @current-change="currentChange">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {
  selectLatestDataByDeviceMode,
  getDeviceModesBySceneId,
} from '@/api/board/equipmentMonitoring'

export default {
  components: {},
  data() {
    return {
      loading: false,
      tableShow: false,
      form: {
        data1: '',
        data2: '',
        data3: null
      },
      deviceModeId: '',
      maxHeight: 0,
      tableData: [],
      deviceList: [],
      sceneId: 0,
      offset: 1,
      limit: 10,
      total: 0,
      deviceDataColumns: [],
      tableDataRow: []
    }
  },
  async mounted() {
    this.maxHeight = this.$refs.right.clientHeight - this.$refs.search.clientHeight - this.$refs.pagination.clientHeight - 12
    await this.getData()
  },
  methods: {
    log(e) {
      console.log(e)
    },
    query() {
      this.getRightData({deviceModeId: this.deviceModeId})
    },
    reset() {
      this.form = {
        data1: '',
        data2: '',
        data3: null
      }
      this.getRightData({deviceModeId: this.deviceModeId})
    },
    async currentChange(e) {
      this.tableData = this.tableDataRow.slice(this.limit * (e - 1), this.limit * e)
    },
    async getRightData(e) {
      this.deviceModeId = e.deviceModeId
      this.loading = true
      await this.setSelectLatestDataByDeviceMode({
        "sceneId": this.$store.getters.sceneId,
        "deviceModeId": e.deviceModeId,
        deviceCode: this.form.data1,
        deviceName: this.form.data2,
        startTime: this.form?.data3?.length > 1 ? new Date(this.form.data3[0]).getTime() : '',
        endTime: this.form?.data3?.length > 1 ? new Date(this.form.data3[1]).getTime() : '',
        // "offset": this.offset-1,
        // "limit": 10
      })
      this.loading = false
      this.tableShow = false
      this.tableShow = true
    },
    async getData() {
      await this.setDeviceModesBySceneId()
    },
    setStyle(e) {
      if (e.rowIndex % 2 === 0) {
        return {textAlign: 'center', backgroundColor: '#08406f', color: '#05aaba'}
      } else {
        return {textAlign: 'center', backgroundColor: '#063468', color: '#05aaba'}
      }
    },
    async setSelectLatestDataByDeviceMode(e) {
      const {data} = await selectLatestDataByDeviceMode(e)
      this.deviceDataColumns = data.deviceDataColumns
      this.tableDataRow = data.latestData || []
      this.tableData = (data.latestData || []).slice(0, this.limit)
      this.total = data.latestData.length || 0
      this.offset = 1
    },
    async setDeviceModesBySceneId() {
      const {data} = await getDeviceModesBySceneId({
        "sceneId": this.$store.getters.sceneId,
      })
      this.deviceList = data
    },
    toHistory(e, i) {
      console.log(e)
      console.log(i)
      this.$router.push({path: "/board/senso", query: {id: e, deviceModeId: i}});
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  background-image: url("~@/assets/board/equipmentMonitoring/bg.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: calc(100vh);
  position: relative;
}


.leftMenu::-webkit-scrollbar {
  width: 0;
}

.leftMenu {
  position: absolute;
  width: 14%;
  height: 84%;
  top: 12%;
  left: 2%;
  padding: 1vw;
  overflow: auto;

  .item {
    background-image: url("~@/assets/board/equipmentMonitoring/item.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 12vw;
    height: 5.1vw;
    margin-bottom: 1vw;
  }

  span {
    position: absolute;
    left: 44%;
    line-height: 5.1vw;
    font-size: 1vw;
    color: #f1f3f5;
    white-space: nowrap;
  }

}


.right {
  position: absolute;
  width: 78.5%;
  height: 84%;
  top: 12%;
  left: 19%;

  .search {
    /deep/ .el-form-item__label {
      color: #25bffc !important;
      font-weight: normal;
    }

    /deep/ .el-input__inner {
      background-color: #0000;
      border-color: #25bffc;
    }

    /deep/ .el-button--default {
      background-color: #0000;
      color: #25bffc;
      border-color: #25bffc;
    }

    /deep/ .el-range-input {
      background-color: #0000;
    }
  }

  .table {


    /deep/ .el-table {
      background-color: #0000;
    }

    /deep/ .el-table th.el-table__cell.is-leaf {
      border-color: #0000;
    }

    /deep/ .el-table tr {
      background-color: #0000;
    }

    /deep/ .el-table td.el-table__cell {
      border-color: #0000;
    }

    /deep/ .el-table::before {
      background-color: #0000;
    }

    /deep/ .el-table .el-table__header-wrapper th {
      color: #05ecf3;
    }
  }
}
</style>
