<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" width="900px" id="unRelateBSP">
    <el-row class="filters">
      <el-col :span="9">
        <el-input placeholder="输入业务空间名称进行查询" v-model="keycode" clearable @keyup.enter.native="getTableData">
          <i slot="suffix" class="el-input__icon el-icon-search" @click="getTableData"></i>
        </el-input>
      </el-col>
      <el-col :span="15">
        <span style="margin-left:10px;">所属楼层</span>
        <el-cascader @change="getTableData" v-model="floor" :options="options" :props="props"></el-cascader>
      </el-col>
    </el-row>
    <div class="table-box">
      <el-table :data="tableData" style="width: 100%" height="100%" v-loading="loading" :header-cell-style="headerStyle">
        <el-table-column :label="`${inSpaceType}名称`" show-overflow-tooltip min-width="100">
          <template slot-scope="scope">
            <div>
              {{scope.row.RoomLocalName||scope.row.RoomName||''}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="BNAME" label="所属建筑" show-overflow-tooltip min-width="100"></el-table-column>
        <el-table-column prop="FNAME" label="所属楼层" show-overflow-tooltip min-width="100"></el-table-column>
        <el-table-column prop="action" label="操作" min-width="100" v-if="isAction">
          <template slot-scope="scope">
            <el-button size="mini" @click="createRelation(scope.row)" type="primary" plain>关联平面图</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination class="fr" v-show="tableData && tableData.length" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="page.pageNumber" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"></el-pagination>
    </div>
  </el-dialog>
</template>

<script>
import {
  buildingQuery,
  queryZone
} from "@/api/scan/request"
export default {
  name: "unRelateBSP",
  data() {
    return {
      title: '未关联平面图的业务空间',
      inSpaceType: '业务空间',
      dialogVisible: false,
      loading: false,
      headerStyle: {
        backgroundColor: '#e1e4e5',
        color: '#2b2b2b',
        lineHeight: '30px'
      },
      keycode: '',
      tableData: [],
      page: {
        pageSize: 50,
        pageSizes: [10, 20, 50, 100],
        pageNumber: 1,
        total: 0
      },
      floor: ['all'], // 级联建筑楼层
      props: { //自定义字段
        value: "BuildID",
        label: "BuildLocalName",
        children: "Floor"
      },
      bfData: {}, //建筑楼层id =>名称
      options: [], //级联
    };
  },
  props: {
    isAction: false, //是否显示操作按钮
    code: String
  },
  created() {
    this.getBuilding()
  },
  methods: {
    // 显示弹窗
    showDialog() {
      this.dialogVisible = true;
      this.getTableData();
    },
    // 关联平面图
    createRelation(row) {
      this.$emit('createFromUnrelated', row);
      this.dialogVisible = false;
    },
    // 分页条数
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.page.pageNumber = 1;
      this.getTableData();
    },
    // 页码
    handleCurrentChange(val) { 
      this.page.pageNumber = val;
      this.getTableData();
    },
    // 获取项目下建筑
    getBuilding() {
      let pa = {
        Cascade: [{ name: 'floor', Orders: 'SequenceId desc' }],
        Orders: "BuildLocalName asc",
      }
      buildingQuery(pa, res => {
        this.options = res.Content.map(t => {
          this.bfData[t.BuildID] = t.BuildLocalName;
          if (t.Floor) {
            t.Floor = t.Floor.map(item => {
              this.bfData[item.FloorID] = item.FloorLocalName;
              item.BuildID = item.FloorID;
              item.BuildLocalName = item.FloorLocalName;
              return item;
            })
          } else {
            t.Floor = []
          }
          t.Floor.unshift({ BuildID: 'all', BuildLocalName: '全部' }, { BuildID: 'isNull', BuildLocalName: '未明确楼层' })
          return t;
        })
        this.options.unshift({ BuildID: 'all', BuildLocalName: '全部' }, { BuildID: 'isNull', BuildLocalName: '未明确建筑' })
      })
    },
    // 查询未关联平面图的业务空间(项目下+当前分区)
    getTableData() {
      let pa = {
        zone: this.code,
        data: {
          Filters: `Outline isNull`,
          Orders: "createTime desc, RoomID asc",
          PageSize: this.page.pageSize,
          pageNumber: this.page.pageNumber
        }
      }
      if (this.floor[0] == 'isNull') {
        pa.data.Filters += `;BuildingId isNull`
      } else if (this.floor[0] && this.floor[0] != 'all') {
        pa.data.Filters += `;BuildingId='${this.floor[0]}'`
      }
      if (this.floor[1] == 'isNull') {
        pa.data.Filters += `;FloorId isNull`
      } else if (this.floor[1] && this.floor[1] != 'all') {
        pa.data.Filters += `;FloorId='${this.floor[1]}'`
      }
      if (this.keycode != '') {
        pa.data.Filters += `;RoomLocalName contain "${this.keycode}" or RoomName contain "${this.keycode}"`
      }
      queryZone(pa, res => {
        this.page.total = res.Total;
        this.tableData = res.Content.map(t => {
          t.BNAME = this.bfData[t.BuildingId];
          t.FNAME = this.bfData[t.FloorId];
          return t;
        })
      })
    }
  },
};
</script>
<style lang="less" scoped>
#unRelateBSP {
  .filters {
    margin-bottom: 10px;
    /deep/ .el-input__inner {
      vertical-align: baseline;
    }
  }
  .table-box {
    height: 350px;
  }
}
</style>