<template>
  <div id="relatedSpaceList" style="height:100%;">
    <div class="query">
      <el-input v-model="keyword" placeholder="请输入关键词" @keyup.enter.native="getSpaceList" style="width:240px;margin:0 0 0 10px;">
        <i slot="suffix" class="el-input__icon el-icon-search" @click="getSpaceList"></i>
      </el-input>
      <floorCascader @change="changeCascader"></floorCascader>
    </div>
    <div class="table-area" style="height:calc(100% - 52px)">
      <el-scrollbar style="height:calc(100% - 40px);">
        <el-table :data="tableData" style="width: 100%;height:100%;" v-loading="loading" :header-cell-style="headerStyle">
          <el-table-column prop='MeterFunc' label='业务空间建筑楼层' show-overflow-tooltip min-width="200" header-align='center' align="center">
          </el-table-column>
          <el-table-column prop='MeterFunc' label='业务空间类型' show-overflow-tooltip min-width="200" header-align='center' align="center">
          </el-table-column>
          <el-table-column prop='MeterFunc' label='业务空间本地名称' show-overflow-tooltip min-width="200" header-align='center' align="center">
          </el-table-column>
          <el-table-column prop='MeterFunc' label='业务空间本地编码' show-overflow-tooltip min-width="200" header-align='center' align="center">
          </el-table-column>
          <el-table-column prop='' label='操作' show-overflow-tooltip min-width="90" header-align='center' align='center'>
            <template slot-scope="scope">
              <el-button size="mini" @click="handleDelete(scope.$index, scope.row)" type="danger" plain icon="el-icon-delete"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
      <!-- 分页 -->
      <el-pagination @size-change="getSpaceList" @current-change="getSpaceList" :current-page="currentPage" :page-sizes="pageSizes"
        :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="tableData.length" style="float:right;">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import floorCascader from "@/components/ledger/lib/floorCascader";
export default {
  data() {
    return {
      //表格头样式
      headerStyle: {
        backgroundColor: '#e1e4e5',
        color: '#2b2b2b',
        lineHeight: '30px'
      },
      pageSizes: [10, 20, 50, 100],
      pageSize: 50,
      currentPage: 1,
      keyword: '',//关键词
      floor: '',//当前楼层
      options: [],//楼层
      tableData: [],//表格数据
      loading: false,//加载
    }
  },
  components:{
    floorCascader
  },
  methods: {
    getSpaceList() {
      console.log(111)
    },
    changeCascader(val){
      console.log(val);
    }
  },
  props: {
    space: '',//空间id
  }
}
</script>

<style lang="less" scoped>
.query {
  padding: 10px 0px;
}
#relatedSpaceList {
  /deep/ .el-scrollbar__wrap {
    overflow-x: hidden;
  }
}
</style>