<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>
      <el-cascader v-model="Buildfloor" :options="buildingData" @change="handleChange"></el-cascader>
    </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 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.ObjectType] || ''}}
            </template>
          </el-table-column>
          <el-table-column prop='RoomLocalName' label='业务空间本地名称' show-overflow-tooltip min-width="200" header-align='center' align="center">
          </el-table-column>
          <el-table-column prop='RoomLocalID' label='业务空间本地编码' show-overflow-tooltip min-width="200" header-align='center' align="center">
          </el-table-column>
          <el-table-column v-if="!$route.query.onlyRead" 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 { 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: '',//当前楼层
      options: [],//楼层
      tableData: [],//表格数据
      loading: false,//加载
      Buildfloor: ["all"],//当前选中的楼层
      page: {
        pageSize: 50,
        pageSizes: [10, 20, 50, 100],
        pageNumber: 1,
        total: 0
      },
    }
  },
  components: {
  },
  methods: {
    //空间列表
    getSpaceList() {
      this.loading = true;
      let params = {
        data: {
          Filters: "not RoomID isNull",
          Orders: "RoomLocalName 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 += `;ObjectType='${this.space}'`;
      }
      if (this.keyword) {
        params.data.Filters += `;RoomName contain '${this.keyword}' or RoomLocalName 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.RoomID
              }
            ],
            type: row.ObjectType
          };
          this.deleteSpInSh(params);
        })
        .catch(() => {
          this.$message("取消删除");
        });
    },
    // 删除系统所在竖井关系
    deleteSpInSh(params) {
      spaceInShaftUnlink(params, res => {
        this.$message.success("删除成功");
        this.getSpaceList();
      });
    },
  },
  props: {
    space: '',//空间id
    buildingList: {//建筑楼层
      Type: Array,
      default: () => []
    },
    spaceType: Object,
    floorType: Object
  },
  computed: {
    buildingData() {
      let bL = this.buildingList.concat();
      bL.map(item => {
        item.value = item.BuildID;
        item.label = item.BuildLocalName;
        item.children = [];
        if (item.Floor instanceof Array) {
          item.children = item.Floor.map(fitem => {
            fitem.value = fitem.FloorID
            fitem.label = fitem.FloorLocalName
            return fitem
          })
        }
        if (!this.$route.query.onlyRead) {
          item.children.unshift({
            value: "noKnow",
            label: "未明确建筑"
          })
        }
        item.children.unshift({
          value: "all",
          label: "全部"
        })
      });
      if (!this.$route.query.onlyRead) {
        bL.unshift({
          value: "all",
          label: "全部"
        }, {
          value: "noKnow",
          label: "未明确建筑"
        });
      }
      return bL;
    }
  },
  watch: {
    space: {
      handler() {
        this.getSpaceList();
      },
      immediate: true
    }
  }
}
</script>

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