<template>
  <div class="container">
    <div class="centerImg"></div>
    <BoardTopNav nowMenu="3"></BoardTopNav>
    <div class="leftMenu">
      <div v-for="i in 10" class="item">
        <span>温度传感器</span>
      </div>
    </div>
    <div ref="right" class="right">
      <div ref="search" class="search">
        <el-form :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"
              placeholder="选择日期时间"
              type="datetime">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button @click="onSubmit">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div :style="{height:maxHeight+'px'}" class="table">
        <el-table
          v-if='tableShow'
          :cell-style="setStyle"
          :data="tableData"
          :header-cell-style="{ textAlign: 'center',backgroundColor:'#0a457d' }"
          :max-height="maxHeight">
          style="width: 100%">
          <el-table-column
            label="序号"
            prop="data1">
          </el-table-column>
          <el-table-column
            label="传感器ID"
            prop="data2">
          </el-table-column>
          <el-table-column
            label="传感器名称"
            prop="data3">
          </el-table-column>
          <el-table-column
            label="标号"
            prop="data4">
          </el-table-column>
          <el-table-column
            label="温度"
            prop="data4">
          </el-table-column>
          <el-table-column
            label="排名"
            prop="data6">
          </el-table-column>
          <el-table-column
            label="湿度"
            prop="data7">
          </el-table-column>
          <el-table-column
            label="压力"
            prop="data8">
          </el-table-column>
          <el-table-column
            label="传感器"
            prop="data9">
          </el-table-column>
        </el-table>
      </div>
      <div ref="pagination" style="margin-top: 12px;height: 36px;">
        <el-pagination :total="1000" background layout="prev, pager, next" style="display: inline-block;float:right;">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>

import BoardTopNav from '@/components/BoardTopNav'

export default {
  components: {
    BoardTopNav
  },
  data() {
    return {
      tableShow: false,
      form: {
        data1: '',
        data2: '',
        data3: null
      },
      maxHeight: 0,
      tableData: [
        {
          data1: 'data1',
          data2: 'data2',
          data3: 'data3',
          data4: 'data4',
          data5: 'data5',
          data6: 'data6',
          data7: 'data7',
          data8: 'data8',
          data9: 'data9',
        },
        {
          data1: 'data1',
          data2: 'data2',
          data3: 'data3',
          data4: 'data4',
          data5: 'data5',
          data6: 'data6',
          data7: 'data7',
          data8: 'data8',
          data9: 'data9',
        },
        {
          data1: 'data1',
          data2: 'data2',
          data3: 'data3',
          data4: 'data4',
          data5: 'data5',
          data6: 'data6',
          data7: 'data7',
          data8: 'data8',
          data9: 'data9',
        },
        {
          data1: 'data1',
          data2: 'data2',
          data3: 'data3',
          data4: 'data4',
          data5: 'data5',
          data6: 'data6',
          data7: 'data7',
          data8: 'data8',
          data9: 'data9',
        },
        {
          data1: 'data1',
          data2: 'data2',
          data3: 'data3',
          data4: 'data4',
          data5: 'data5',
          data6: 'data6',
          data7: 'data7',
          data8: 'data8',
          data9: 'data9',
        },
        {
          data1: 'data1',
          data2: 'data2',
          data3: 'data3',
          data4: 'data4',
          data5: 'data5',
          data6: 'data6',
          data7: 'data7',
          data8: 'data8',
          data9: 'data9',
        },
        {
          data1: 'data1',
          data2: 'data2',
          data3: 'data3',
          data4: 'data4',
          data5: 'data5',
          data6: 'data6',
          data7: 'data7',
          data8: 'data8',
          data9: 'data9',
        },
        {
          data1: 'data1',
          data2: 'data2',
          data3: 'data3',
          data4: 'data4',
          data5: 'data5',
          data6: 'data6',
          data7: 'data7',
          data8: 'data8',
          data9: 'data9',
        },
        {
          data1: 'data1',
          data2: 'data2',
          data3: 'data3',
          data4: 'data4',
          data5: 'data5',
          data6: 'data6',
          data7: 'data7',
          data8: 'data8',
          data9: 'data9',
        },
        {
          data1: 'data1',
          data2: 'data2',
          data3: 'data3',
          data4: 'data4',
          data5: 'data5',
          data6: 'data6',
          data7: 'data7',
          data8: 'data8',
          data9: 'data9',
        },
        {
          data1: 'data1',
          data2: 'data2',
          data3: 'data3',
          data4: 'data4',
          data5: 'data5',
          data6: 'data6',
          data7: 'data7',
          data8: 'data8',
          data9: 'data9',
        },
        {
          data1: 'data1',
          data2: 'data2',
          data3: 'data3',
          data4: 'data4',
          data5: 'data5',
          data6: 'data6',
          data7: 'data7',
          data8: 'data8',
          data9: 'data9',
        },
        {
          data1: 'data1',
          data2: 'data2',
          data3: 'data3',
          data4: 'data4',
          data5: 'data5',
          data6: 'data6',
          data7: 'data7',
          data8: 'data8',
          data9: 'data9',
        },
        {
          data1: 'data1',
          data2: 'data2',
          data3: 'data3',
          data4: 'data4',
          data5: 'data5',
          data6: 'data6',
          data7: 'data7',
          data8: 'data8',
          data9: 'data9',
        },
        {
          data1: 'data1',
          data2: 'data2',
          data3: 'data3',
          data4: 'data4',
          data5: 'data5',
          data6: 'data6',
          data7: 'data7',
          data8: 'data8',
          data9: 'data9',
        },
        {
          data1: 'data1',
          data2: 'data2',
          data3: 'data3',
          data4: 'data4',
          data5: 'data5',
          data6: 'data6',
          data7: 'data7',
          data8: 'data8',
          data9: 'data9',
        },
        {
          data1: 'data1',
          data2: 'data2',
          data3: 'data3',
          data4: 'data4',
          data5: 'data5',
          data6: 'data6',
          data7: 'data7',
          data8: 'data8',
          data9: 'data9',
        },
        {
          data1: 'data1',
          data2: 'data2',
          data3: 'data3',
          data4: 'data4',
          data5: 'data5',
          data6: 'data6',
          data7: 'data7',
          data8: 'data8',
          data9: 'data9',
        },
        {
          data1: 'data1',
          data2: 'data2',
          data3: 'data3',
          data4: 'data4',
          data5: 'data5',
          data6: 'data6',
          data7: 'data7',
          data8: 'data8',
          data9: 'data9',
        },
        {
          data1: 'data1',
          data2: 'data2',
          data3: 'data3',
          data4: 'data4',
          data5: 'data5',
          data6: 'data6',
          data7: 'data7',
          data8: 'data8',
          data9: 'data9',
        },
        {
          data1: 'data1',
          data2: 'data2',
          data3: 'data3',
          data4: 'data4',
          data5: 'data5',
          data6: 'data6',
          data7: 'data7',
          data8: 'data8',
          data9: 'data9',
        },
        {
          data1: 'data1',
          data2: 'data2',
          data3: 'data3',
          data4: 'data4',
          data5: 'data5',
          data6: 'data6',
          data7: 'data7',
          data8: 'data8',
          data9: 'data9',
        },
        {
          data1: 'data1',
          data2: 'data2',
          data3: 'data3',
          data4: 'data4',
          data5: 'data5',
          data6: 'data6',
          data7: 'data7',
          data8: 'data8',
          data9: 'data9',
        },
        {
          data1: 'data1',
          data2: 'data2',
          data3: 'data3',
          data4: 'data4',
          data5: 'data5',
          data6: 'data6',
          data7: 'data7',
          data8: 'data8',
          data9: 'data9',
        },
        {
          data1: 'data1',
          data2: 'data2',
          data3: 'data3',
          data4: 'data4',
          data5: 'data5',
          data6: 'data6',
          data7: 'data7',
          data8: 'data8',
          data9: 'data9',
        },
        {
          data1: 'data1',
          data2: 'data2',
          data3: 'data3',
          data4: 'data4',
          data5: 'data5',
          data6: 'data6',
          data7: 'data7',
          data8: 'data8',
          data9: 'data9',
        },
        {
          data1: 'data1',
          data2: 'data2',
          data3: 'data3',
          data4: 'data4',
          data5: 'data5',
          data6: 'data6',
          data7: 'data7',
          data8: 'data8',
          data9: 'data9',
        },
        {
          data1: 'data1',
          data2: 'data2',
          data3: 'data3',
          data4: 'data4',
          data5: 'data5',
          data6: 'data6',
          data7: 'data7',
          data8: 'data8',
          data9: 'data9',
        },
        {
          data1: 'data1',
          data2: 'data2',
          data3: 'data3',
          data4: 'data4',
          data5: 'data5',
          data6: 'data6',
          data7: 'data7',
          data8: 'data8',
          data9: 'data9',
        },
        {
          data1: 'data1',
          data2: 'data2',
          data3: 'data3',
          data4: 'data4',
          data5: 'data5',
          data6: 'data6',
          data7: 'data7',
          data8: 'data8',
          data9: 'data9',
        },
        {
          data1: 'data1',
          data2: 'data2',
          data3: 'data3',
          data4: 'data4',
          data5: 'data5',
          data6: 'data6',
          data7: 'data7',
          data8: 'data8',
          data9: 'data9',
        },
      ]
    }
  },
  mounted() {
    this.maxHeight = this.$refs.right.clientHeight - this.$refs.search.clientHeight - this.$refs.pagination.clientHeight - 12
    this.tableShow = true
  },
  methods: {
    setStyle(e) {
      if (e.rowIndex % 2 === 0) {
        return {textAlign: 'center', backgroundColor: '#08406f', color: '#05aaba'}
      } else {
        return {textAlign: 'center', backgroundColor: '#063468', color: '#05aaba'}
      }
    }
  }
};
</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;
    }
  }

  .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>
