<template>
  <div class="container">
    <div class="centerImg"></div>
    <BoardTopNav nowMenu="4"></BoardTopNav>
    <div class="collapse">
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item name="1">
          <template slot="title">
            <div class="itemBg">
              <div class="icon"></div>
              <div class="icon1"></div>
              <div class="icon2"></div>
              <div class="title"> 大厅-摄像头</div>
              <div class="info">
                <div class="info1">所属区域</div>
                <div class="info2">大厅</div>
              </div>
              <div class="info" style="left: 70vh;">
                <div class="info1">位置:</div>
                <div class="info2">深圳</div>
              </div>
              <div class="info" style="left: 80vh;">
                <div class="info1">日期:</div>
                <div class="info2">2023-01-01 00:00:00</div>
              </div>
            </div>
          </template>
          <div>
            <div>
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-radio-group v-model="radio">
                    <el-radio-button label="日统计报表"></el-radio-button>
                    <el-radio-button label="月统计报表"></el-radio-button>
                  </el-radio-group>
                </el-col>
                <el-col :span="12">
                  <div style="position: absolute; right: 30px;">
                    <span style="color: #fff;"> 开始时间：</span>
                    <div style="display: inline-block;width: 200px;margin-right: 12px;">
                      <el-date-picker type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>
                    </div>
                    <el-button type="primary">搜索</el-button>
                    <el-button>重置</el-button>
                    <el-button>导出</el-button>

                  </div>
                </el-col>
              </el-row>
              <el-table :data="tableData" style="width: 100%;margin-top: 12px;"
                :header-cell-style="{ textAlign: 'center',backgroundColor:'#0a457d' }"
                :cell-style="setStyle">
                <el-table-column prop="date1" label="设备ID">
                </el-table-column>
                <el-table-column prop="date2" label="传感器编号">
                </el-table-column>
                <el-table-column prop="date3" label="xx">
                </el-table-column>
                <el-table-column prop="date4" label="编号">
                </el-table-column>
                <el-table-column prop="date5" label="xx">
                </el-table-column>
                <el-table-column prop="date6" label="温度">
                </el-table-column>
                <el-table-column prop="date7" label="湿度">
                </el-table-column>
                <el-table-column prop="date8" label="时间">
                </el-table-column>
              </el-table>
              <el-pagination background layout="prev, pager, next" :total="1000">
              </el-pagination>
            </div>
          </div>
        </el-collapse-item>
        <el-collapse-item name="2">
          <template slot="title">
            <div class="itemBg">
              <div class="icon"></div>
              <div class="icon1"></div>
              <div class="icon2"></div>
              <div class="title"> 大厅-摄像头</div>
              <div class="info">
                <div class="info1">所属区域</div>
                <div class="info2">大厅</div>
              </div>
              <div class="info" style="left: 70vh;">
                <div class="info1">位置:</div>
                <div class="info2">深圳</div>
              </div>
              <div class="info" style="left: 80vh;">
                <div class="info1">日期:</div>
                <div class="info2">2023-01-01 00:00:00</div>
              </div>
            </div>
          </template>
          <div>
            <div>
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-radio-group v-model="radio">
                    <el-radio-button label="日统计报表"></el-radio-button>
                    <el-radio-button label="月统计报表"></el-radio-button>
                  </el-radio-group>
                </el-col>
                <el-col :span="12">
                  <div style="position: absolute; right: 30px;">
                    <span style="color: #fff;"> 开始时间：</span>
                    <div style="display: inline-block;width: 200px;margin-right: 12px;">
                      <el-date-picker type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>
                    </div>
                    <el-button type="primary">搜索</el-button>
                    <el-button>重置</el-button>
                    <el-button>导出</el-button>

                  </div>
                </el-col>
              </el-row>
              <el-table :data="tableData" style="width: 100%;margin-top: 12px;"
                :header-cell-style="{ textAlign: 'center' }"
                :cell-style="{ textAlign: 'center',backgroundColor:'#08406f' }">
                <el-table-column prop="date1" label="设备ID">
                </el-table-column>
                <el-table-column prop="date2" label="传感器编号">
                </el-table-column>
                <el-table-column prop="date3" label="xx">
                </el-table-column>
                <el-table-column prop="date4" label="编号">
                </el-table-column>
                <el-table-column prop="date5" label="xx">
                </el-table-column>
                <el-table-column prop="date6" label="温度">
                </el-table-column>
                <el-table-column prop="date7" label="湿度">
                </el-table-column>
                <el-table-column prop="date8" label="时间">
                </el-table-column>
              </el-table>
              <el-pagination background layout="prev, pager, next" :total="1000">
              </el-pagination>
            </div>
          </div>
        </el-collapse-item>
        <el-collapse-item name="3">
          <template slot="title">
            <div class="itemBg">
              <div class="icon"></div>
              <div class="icon1"></div>
              <div class="icon2"></div>
              <div class="title"> 大厅-摄像头</div>
              <div class="info">
                <div class="info1">所属区域</div>
                <div class="info2">大厅</div>
              </div>
              <div class="info" style="left: 70vh;">
                <div class="info1">位置:</div>
                <div class="info2">深圳</div>
              </div>
              <div class="info" style="left: 80vh;">
                <div class="info1">日期:</div>
                <div class="info2">2023-01-01 00:00:00</div>
              </div>
            </div>
          </template>
          <div>
            <div>
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-radio-group v-model="radio">
                    <el-radio-button label="日统计报表"></el-radio-button>
                    <el-radio-button label="月统计报表"></el-radio-button>
                  </el-radio-group>
                </el-col>
                <el-col :span="12">
                  <div style="position: absolute; right: 30px;">
                    <span style="color: #fff;"> 开始时间：</span>
                    <div style="display: inline-block;width: 200px;margin-right: 12px;">
                      <el-date-picker type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>
                    </div>
                    <el-button type="primary">搜索</el-button>
                    <el-button>重置</el-button>
                    <el-button>导出</el-button>

                  </div>
                </el-col>
              </el-row>
              <el-table :data="tableData" style="width: 100%;margin-top: 12px;"
                :header-cell-style="{ textAlign: 'center' }"
                :cell-style="{ textAlign: 'center',backgroundColor:'#08406f' }">
                <el-table-column prop="date1" label="设备ID">
                </el-table-column>
                <el-table-column prop="date2" label="传感器编号">
                </el-table-column>
                <el-table-column prop="date3" label="xx">
                </el-table-column>
                <el-table-column prop="date4" label="编号">
                </el-table-column>
                <el-table-column prop="date5" label="xx">
                </el-table-column>
                <el-table-column prop="date6" label="温度">
                </el-table-column>
                <el-table-column prop="date7" label="湿度">
                </el-table-column>
                <el-table-column prop="date8" label="时间">
                </el-table-column>
              </el-table>
              <el-pagination background layout="prev, pager, next" :total="1000">
              </el-pagination>
            </div>
          </div>
        </el-collapse-item>
        <el-collapse-item name="4">
          <template slot="title">
            <div class="itemBg">
              <div class="icon"></div>
              <div class="icon1"></div>
              <div class="icon2"></div>
              <div class="title"> 大厅-摄像头</div>
              <div class="info">
                <div class="info1">所属区域</div>
                <div class="info2">大厅</div>
              </div>
              <div class="info" style="left: 70vh;">
                <div class="info1">位置:</div>
                <div class="info2">深圳</div>
              </div>
              <div class="info" style="left: 80vh;">
                <div class="info1">日期:</div>
                <div class="info2">2023-01-01 00:00:00</div>
              </div>
            </div>
          </template>
          <div>
            <div>
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-radio-group v-model="radio">
                    <el-radio-button label="日统计报表"></el-radio-button>
                    <el-radio-button label="月统计报表"></el-radio-button>
                  </el-radio-group>
                </el-col>
                <el-col :span="12">
                  <div style="position: absolute; right: 30px;">
                    <span style="color: #fff;"> 开始时间：</span>
                    <div style="display: inline-block;width: 200px;margin-right: 12px;">
                      <el-date-picker type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>
                    </div>
                    <el-button type="primary">搜索</el-button>
                    <el-button>重置</el-button>
                    <el-button>导出</el-button>

                  </div>
                </el-col>
              </el-row>
              <el-table :data="tableData" style="width: 100%;margin-top: 12px;"
                :header-cell-style="{ textAlign: 'center' }"
                :cell-style="{ textAlign: 'center',backgroundColor:'#08406f' }">
                <el-table-column prop="date1" label="设备ID">
                </el-table-column>
                <el-table-column prop="date2" label="传感器编号">
                </el-table-column>
                <el-table-column prop="date3" label="xx">
                </el-table-column>
                <el-table-column prop="date4" label="编号">
                </el-table-column>
                <el-table-column prop="date5" label="xx">
                </el-table-column>
                <el-table-column prop="date6" label="温度">
                </el-table-column>
                <el-table-column prop="date7" label="湿度">
                </el-table-column>
                <el-table-column prop="date8" label="时间">
                </el-table-column>
              </el-table>
              <el-pagination background layout="prev, pager, next" :total="1000">
              </el-pagination>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
import BoardTopNav from '@/components/BoardTopNav'

export default {
  components: {
    BoardTopNav
  },
  data() {
    return {
      radio: '日统计报表',
      tableData: [{
        date1: '1233454576',
        date2: '1233454576',
        date3: 'DFHDGHJK',
        date4: '12',
        date5: 'QSD',
        date6: '111',
        date7: '222',
        date8: new Date().getDate(),
      }, {
        date1: '1233454576',
        date2: '1233454576',
        date3: 'DFHDGHJK',
        date4: '12',
        date5: 'QSD',
        date6: '111',
        date7: '222',
        date8: new Date().getDate(),
      }, {
        date1: '1233454576',
        date2: '1233454576',
        date3: 'DFHDGHJK',
        date4: '12',
        date5: 'QSD',
        date6: '111',
        date7: '222',
        date8: new Date().getDate(),
      }, {
        date1: '1233454576',
        date2: '1233454576',
        date3: 'DFHDGHJK',
        date4: '12',
        date5: 'QSD',
        date6: '111',
        date7: '222',
        date8: new Date().getDate(),
      }]
    }
  },
  mounted() {
  },
  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/senso/bg.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: calc(100vh);
  position: relative;
}

.collapse {
  position: absolute;
  top: 9%;
  left: 2%;
  width: 96%;
  height: 87%;
  overflow: auto;

  /deep/.el-collapse-item__wrap {
    background-color: #0000;
    border-color: #0000;
  }

  /deep/.el-table {
    background-color: #FFF0 !important;
    color: #fff;
  }

  /deep/.el-table tr {
    background-color: #FFF0 !important;
  }
  /deep/.el-table th.el-table__cell.is-leaf,{
    border-color: #0000;
  }
  /deep/.el-table::before, .el-table--group::after, .el-table--border::after{
    background-color: #0000;
  }
  /deep/.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{
    background-color: #0000;
  }
  /deep/.el-collapse-item__header {
    background-color: #0000;
    border-color: #0000;
    height: auto;
  }
  /deep/.el-collapse {
    border-color: #0000;
  }
  /deep/ .el-table td.el-table__cell{
    border-color: #0000;
  }

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


.itemBg {
  background-image: url("~@/assets/board/senso/itemBg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 17vh;
  position: relative;

  .icon {
    background-image: url("~@/assets/board/senso/iconBg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 2vh;
    left: 5vh;
    width: 13vh;
    height: 13vh;
  }

  .icon1 {
    background-image: url("~@/assets/board/senso/iconBottom.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 2vh;
    left: 5vh;
    width: 13vh;
    height: 13vh;
  }

  .icon2 {
    background-image: url("~@/assets/board/senso/icon.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 50%;
    left: 10vh;
    width: 2.6vh;
    height: 3.3vh;
    transform: translateY(-50%);
  }

  .title {
    position: absolute;
    left: 25vh;
    color: #1fabf3;
    line-height: 17vh;
    font-size: 2.5vh;
  }

  .info {
    position: absolute;
    left: 60vh;
    color: #1fabf3;
    font-size: 1.5vh;
    height: 100%;
    white-space: nowrap;

    .info1 {
      position: absolute;
      bottom: 55%;
      color: #fffc
    }

    .info2 {
      position: absolute;
      top: 55%;
      color: #fff
    }
  }
}
</style>
