<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.localName || scope.row.name || "" }}
            </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 ScanController from "@/controller/old-adm/ScanController";

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: "id",
        label: "localName",
        children: "floor",
      },
      bfData: {}, //建筑楼层id =>名称
      options: [], //级联
    };
  },
  props: {
    isAction: false, //是否显示操作按钮
    code: String,
  },
  created() {
    this.getBuilding();
  },
  methods: {
    // 显示弹窗
    showDialog(buildFloor) {
      if (buildFloor) {
        this.floor = buildFloor;
      }
      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();
    },
    // 获取项目下建筑
    async getBuilding() {
      let pa = {
        cascade: [{ name: "floor", orders: "floorSequenceID desc" }],
        orders: "localName asc",
      };
      let res = await ScanController.buildingQuery(pa);
      this.options = res.content.map((t) => {
        this.bfData[t.id] = t.localName;
        if (t.floor) {
          t.floor = t.floor.map((item) => {
            this.bfData[item.id] = item.localName;
            return item;
          });
        } else {
          t.floor = [];
        }
        t.floor.unshift(
          { id: "all", localName: "全部" },
          { id: "isNull", localName: "未明确楼层" }
        );
        return t;
      });
      this.options.unshift(
        { id: "all", localName: "全部" },
        { id: "isNull", localName: "未明确建筑" }
      );
    },
    // 查询未关联平面图的业务空间(项目下+当前分区)
    getTableData() {
      let pa = {
        zoneType: this.code,
        filters: `outline isNull`,
        orders: "createTime desc, id asc",
        pageSize: this.page.pageSize,
        pageNumber: this.page.pageNumber,
      };

      if (this.floor[0] == "isNull") {
        pa.buildingId = `isnull`;
      } else if (this.floor[0] && this.floor[0] != "all") {
        pa.buildingId = this.floor[0];
      }
      if (this.floor[1] == "isNull") {
        pa.floorId = `isnull`;
      } else if (this.floor[1] && this.floor[1] != "all") {
        pa.floorId = this.floor[1];
      }
      if (this.keycode != "") {
        pa.filters += `;localName contain "${this.keycode}" or name contain "${this.keycode}"`;
      }
      ScanController.zoneQuery(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>
