<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;">
        <i slot="suffix" class="el-input__icon el-icon-search" @click="getSpaceList"></i>
      </el-input>
      <label style="line-height:32px;padding: 0 10px;">所属建筑楼层:</label>
      <el-cascader v-model="Buildfloor" :options="buildingData" :props="{value: 'id', label: 'localName', children: 'floor'}" @change="handleChange"></el-cascader>
    </div>
    <div class="table-area" style="height:calc(100% - 52px)">
      <el-table :data="tableData" style="width: 100%;height:calc(100% - 48px);" v-loading="loading" :header-cell-style="headerStyle">
        <el-table-column label='业务空间建筑楼层' show-overflow-tooltip min-width="200" header-align='center' align="center">
          <template slot-scope="scope">
            {{ scope.row.buildingId && floorType[scope.row.buildingId]? ((floorType[scope.row.buildingId] || '') + (scope.row.floorId && floorType[scope.row.floorId] ? (' - ' + floorType[scope.row.floorId] || '') : '')) : ''}}
          </template>
        </el-table-column>
        <el-table-column label='业务空间类型' show-overflow-tooltip min-width="200" header-align='center' align="center">
          <template slot-scope="scope">
            {{spaceType[scope.row.classCode] || ''}}
          </template>
        </el-table-column>
        <el-table-column prop='localName' label='业务空间本地名称' show-overflow-tooltip min-width="200" header-align='center' align="center">
        </el-table-column>
        <el-table-column prop='localId' label='业务空间本地编码' show-overflow-tooltip min-width="200" header-align='center' align="center">
        </el-table-column>
        <el-table-column v-if="$route.query.onlyRead !== 'true'" 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-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;padding:20px 20px 0 0;">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { shaftSpaceQuery, spaceInShaftUnlink } from "@/api/scan/request";
export default {
  data() {
    return {
      //表格头样式
      headerStyle: {
        backgroundColor: '#e1e4e5',
        color: '#2b2b2b',
        lineHeight: '30px'
      },
      pageSizes: [10, 20, 50, 100],
      pageSize: 50,
      currentPage: 1,
      keyword: '',//关键词
      floor: '',//当前楼层
      tableData: [],//表格数据
      loading: false,//加载
      Buildfloor: ["all"],//当前选中的楼层
      page: {
        pageSize: 50,
        pageSizes: [10, 20, 50, 100],
        pageNumber: 1,
        total: 0
      },
      buildingData: [],//楼层数据
    }
  },
  components: {
  },
  methods: {
    //空间列表
    getSpaceList() {
      this.loading = true;
      let params = {
        data: {
          filters: "not id isNull",
          orders: "localName desc",
          pageNumber: this.page.pageNumber,
          pageSize: this.page.pageSize
        },
        ShaftId: this.$route.query.ShaftId
      };
      if (this.Buildfloor[0] == "noKnow") {
        params.data.filters += `;buildingId isNull`;
      } else if (this.Buildfloor[0] && this.Buildfloor[0] != "all") {
        params.data.filters += `;buildingId='${this.Buildfloor[0]}'`;
      }
      if (this.Buildfloor[1] == "noKnow") {
        params.data.filters += `;floorId isNull`;
      } else if (this.Buildfloor[1] && this.Buildfloor[1] != "all") {
        params.data.filters += `;floorId='${this.Buildfloor[1]}'`;
      }
      if (this.space) {
        params.data.filters += `;classCode='${this.space}'`;
      }
      if (this.keyword) {
        params.data.filters += `;name contain '${this.keyword}' or localName contain '${this.keyword}'`;
      }
      shaftSpaceQuery(params, res => {
        this.loading = false;
        this.tableData = res.content
      })
    },
    //切换楼层
    handleChange() {
      this.getSpaceList();
    },
    // 删除关系
    handleDelete(index, row) {
      this.$confirm("确认删除该关系？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let params = {
            data: [
              {
                shaftId: this.$route.query.ShaftId,
                spaceId: row.id
              }
            ],
            type: row.classCode
          };
          this.deleteSpInSh(params);
        })
        .catch(() => {
          this.$message("取消删除");
        });
    },
    // 删除系统所在竖井关系
    deleteSpInSh(params) {
      spaceInShaftUnlink(params, res => {
        this.$message.success("删除成功");
        this.getSpaceList();
      });
    },
    //楼层
    setFloorData(val) {
      if (val && val.length) {
        let bL = val.concat();
        bL.map(item => {
          if (!(item.floor && item.floor.length))
					item.floor = []
					item.floor.unshift({
						id: "all",
						localName: "全部"
					}, {
						id: "noKnow",
						localName: "未明确楼层"
					})
        });
				bL.unshift({
					id: "all",
					localName: "全部"
				}, {
					id: "noKnow",
					localName: "未明确建筑"
				})
        this.buildingData = bL;
      }
      else {
        this.buildingData = [];
      }
    }
  },
  props: {
    space: '',//空间id
    buildingList: {//建筑楼层
      Type: Array,
      default: []
    },
    spaceType: Object,
    floorType: Object
  },
  watch: {
    space: {
      handler() {
        this.getSpaceList();
      },
      immediate: true
    }
  }
}
</script>

<style lang="less" scoped>
.query {
  padding: 10px 0px;
}
#relatedSpaceList {
  /deep/ .el-scrollbar__wrap {
    overflow-x: hidden;
  }
  /deep/ .el-table__body-wrapper{
    overflow-x:hidden;
    overflow-y:auto;
    height:calc(100% - 47px);
    width:100%;
  }
}
</style>