<template>
  <el-dialog :title="title" :visible.sync="dialog" :before-close="handleClose" width="900px" id="addEqDialog">
    <el-row class="filters">
      <el-col :span="7" style="width:268px;padding:0px;">
        <el-input style 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="8.5" style="padding:0 0;margin-left:-2px">
        <floor-cascader ref="floorcas" @change="changeFloor"></floor-cascader>
      </el-col>
      <el-col :span="7.5" style="padding:0 0;">
        <space-select ref="spacesel" @change="changeSpace"></space-select>
      </el-col>
    </el-row>
    <el-row class="filters" :gutter="20"></el-row>
    <div class="table-box">
      <el-table :data="tableData" style="width: 100%" height="350" v-loading="loading" :header-cell-style="headerStyle" ref="multipleTable"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column :label="`${inSpaceType}本地名称`" show-overflow-tooltip min-width="100">
          <template slot-scope="scope">
            {{scope.row.RoomLocalName||scope.row.RoomName||''}}
          </template>
        </el-table-column>
        <el-table-column prop="localId" :label="`${inSpaceType}本地编码`" show-overflow-tooltip min-width="100"></el-table-column>
        <el-table-column prop :label="`所属建筑楼层`" show-overflow-tooltip min-width="100">
          <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 prop="ObjectType" :label="`空间类型`" show-overflow-tooltip min-width="100">
          <template slot-scope="scope">
            {{spaceType[scope.row.ObjectType] || ''}}
          </template>
        </el-table-column>
        <el-table-column prop="action" label="操作" min-width="100">
          <template slot-scope="scope">
            <el-button size="mini" @click="toDetail(scope.$index, scope.row)" 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>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleClose">取 消</el-button>
      <el-button size="small" type="primary" @click="savaRelation">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  unSysZoneSpace,
  linkSysSp,
  queryDictionaryHead
} from "@/api/scan/request";
import floorCascader from "@/components/ledger/lib/floorCascader";
import dictionaryCas from "@/components/config_point/dictionaryCascader";
import spaceSelect from "@/components/ledger/lib/spaceSelect";
import { mapGetters } from "vuex";
export default {
  components: {
    floorCascader,
    dictionaryCas,
    spaceSelect
  },
  computed: {
    ...mapGetters("layout", ["projectId"]),
    dialog() {
      return this.dialogVisible;
    }
  },
  data() {
    return {
      title: "添加系统所在业务空间",
      keycode: "", //输入查询条件
      inSpaceType: "业务空间",
      Buildfloor: ["all"], // 选中的建筑楼层
      Spacecategory: null, // 选中的业务空间类型
      tableData: [],
      floorData: {}, //楼层
      spaceData: {}, //业务空间分区
      loading: false,
      selections: [], // 选中项
      page: {
        pageSize: 50,
        pageSizes: [10, 20, 50, 100],
        pageNumber: 1,
        total: 0
      },
      headerStyle: {
        backgroundColor: "#e1e4e5",
        color: "#2b2b2b",
        lineHeight: "30px"
      } // 列表样式
    };
  },
  props: {
    type: String, //选中的tab页
    params: Object, //查看的竖井关系信息
    spaceType: Object,
    dialogVisible: Boolean,
    floorType: Object
  },
  mounted() { },
  methods: {
    // 显示弹窗
    showDialog() {
      this.dialogVisible = true;
    },
    //修改建筑楼层
    changeFloor(value) {
      this.Buildfloor = value;
      this.getTableData();
    },
    //修改空间类型
    changeSpace(value) {
      this.Spacecategory = value;
      this.getTableData();
    },
    getTableData() {
      let params = {
        data: {
          filters: "not id isNull",
          orders: "localName desc",
          pageNumber: this.page.pageNumber,
          pageSize: this.page.pageSize
        },
        shaftId: this.params.ShaftID,
        sysId: this.$route.query.SysID
      };
      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.Spacecategory) {
        params.data.filters += `;objectType='${this.Spacecategory}'`;
      }
      if (this.keycode != "") {
        params.data.filters += `;name contain '${this.keycode}' or localName contain '${this.keycode}'`;
      }

      unSysZoneSpace(params, res => {
        this.tableData = res.content;
        this.page.total = res.total;
      });
    },
    handleClose() {
      this.$emit("update:dialogVisible", false);
    },
    //选中项修改
    handleSelectionChange(val) {
      this.selections = val;
    },
    savaRelation() {
      if (this.selections.length) {
        let params = {
          Content: this.selections.map(item => {
            return {
              SpaceID: item.RoomID,
              SysID: this.$route.query.SysID,
              ObjectType: item.ObjectType
            };
          })
        };
        linkSysSp(params, res => {
          this.$message.success("关联成功！");
          this.$emit("refresh");
        });
      } else {
        this.$message("请选择要关联的设备");
      }
    },
    //改变pagesize
    handleSizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.getTableData();
    },
    //改变pageno
    handleCurrentChange(pageNo) {
      this.page.pageNumber = pageNo;
      this.getTableData();
    },
    // 查看详情
    toDetail() {
      this.$message("开发中");
    }
  },
  watch: {
    dialogVisible: {
      handler() {
        if (this.dialogVisible) {
          this.page.pageNumber = 1;
          this.tableData = [];
          this.getTableData();
        }
      },
      immediate: true
    }
  }
};
</script>
<style lang="less" scoped>
#addEqDialog {
  .filters {
    margin: 0 0 10px 0;
  }
  .table-box {
    height: 370px;
    .fr {
      margin-top: 10px;
    }
  }
}
</style>
