<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="900px"
    id="addEqDialog"
  >
    <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-checkbox
          style="margin-left: 10px"
          @change="getTableData"
          v-model="showType"
          label="只显示在当前业务空间中的设备"
        ></el-checkbox>
      </el-col>
    </el-row>
    <div class="table-box">
      <el-table
        :data="tableData"
        style="width: 100%"
        height="100%"
        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">
            <div>
              {{ scope.row.localName || scope.row.name || "" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="localId"
          :label="`${inSpaceType}本地编码`"
          show-overflow-tooltip
          min-width="100"
        ></el-table-column>
        <el-table-column
          prop="equipCategory.name"
          :label="`${inSpaceType}类`"
          show-overflow-tooltip
          min-width="100"
        ></el-table-column>
        <el-table-column
          prop="linkOtherSpace"
          label="已关联其他业务空间"
          show-overflow-tooltip
          min-width="100"
        ></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)"
              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>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="dialogVisible = false">取 消</el-button>
      <el-button size="small" type="primary" @click="savaRelation"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import logicConfig from "@/logicConfig";
import { businessSpaceController } from "@/controller/old-adm/businessSpaceController";
import { mapGetters } from "vuex";
import ScanController from "@/controller/old-adm/ScanController";
export default {
  components: {},
  computed: {
    ...mapGetters("layout", ["projectId"]),
  },
  data() {
    return {
      title: "添加设备",
      keycode: "", //输入查询条件
      options: [], //建筑楼层级联
      floor: [], // 选中的建筑楼层
      showType: false, //是否只显示在当前业务空间中的设备
      inSpaceType: "设备",
      dialogVisible: false,
      tableData: [],
      loading: false,
      headerStyle: {
        backgroundColor: "#e1e4e5",
        color: "#2b2b2b",
        lineHeight: "30px",
      }, // 列表样式
      selections: [], // 选中项
      page: {
        pageSize: 50,
        pageSizes: [10, 20, 50, 100],
        pageNumber: 1,
        total: 0,
      },
      props: {
        //自定义字段
        value: "id",
        label: "localName",
        children: "floor",
      },
    };
  },
  props: {
    type: {}, //Equipment--EquipmentFor
    spaceId: {},
    zone: {}, //分区类型
  },
  created() {
    this.getBuilding();
  },
  methods: {
    // 获取项目下建筑
    getBuilding() {
      var _this = this;
      let pa = {
        cascade: [{ name: "floor", orders: "floorSequenceID desc" }],
        orders: "localName asc",
      };
      (async function () {
        let res = await ScanController.buildingQuery(pa);
        _this.options = res.content.map((t) => {
          if (t.floor) {
            t.floor = t.floor.map((item) => {
              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: "未明确楼层" }
        );
      })();
    },
    // 显示弹窗
    showDialog() {
      this.dialogVisible = true;
      this.tableData = [];
      this.getTableData();
    },
    // 获取列表数据
    getTableData() {
      this.loading = true;
      let pa = {
        data: {
          cascade: [{ name: "equipCategory" }],
          filters: "",
          pageNumber: this.page.pageNumber,
          pageSize: this.page.pageSize,
          orders: "id asc",
        },
        type: this.zone,
        spaceId: this.spaceId,
      };
      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 += `;name contain "${this.keycode}" or localName contain "${this.keycode}" or localId contain "${this.keycode}"`;
      }
      // 删除首尾分号
      pa.data.filters = pa.data.filters.replace(/(^;)|(;$)/g, "");
      if (pa.data.filters == "") {
        delete pa.data.filters;
      }
      if (this.showType) {
        if (this.type == "equipment") {
          // pa.data.Cascade.push({ Name: "zoneSpaceInBase" })
          pa.data.cascade = [{ name: "equipCategory" }];
          businessSpaceController.getEqNotInSpace(pa, (res) => {
            this.loading = false;
            this.getDataSuc(res, "ZoneSpaceBaseIn");
          });
        } else {
          // pa.data.Cascade.push({ Name: "zoneSpaceForBase" })
          pa.data.cascade = [{ name: "equipCategory" }];
          businessSpaceController.getEqNotForSpace(pa, (res) => {
            this.loading = false;
            this.getDataSuc(res, "ZoneSpaceBaseFor");
          });
        }
      } else {
        if (this.type == "equipment") {
          pa.data.cascade.push({ name: "zoneSpaceInBase" });
          businessSpaceController.notEqInSpaceQuery(pa, (res) => {
            this.loading = false;
            this.getDataSuc(res, "ZoneSpaceBaseIn");
          });
        } else {
          pa.data.cascade.push({ name: "zoneSpaceForBase" });
          businessSpaceController.notEqForSpaceQuery(pa, (res) => {
            this.loading = false;
            this.getDataSuc(res, "ZoneSpaceBaseFor");
          });
        }
      }
    },
    // 获取列表成功回调
    getDataSuc(res, zonespacebase) {
      let response =
        res.content &&
        res.content.map((t) => {
          let otherSpace = [];
          if (t[zonespacebase] && t[zonespacebase].length) {
            t[zonespacebase].map((item) => {
              otherSpace.push(item.localName || item.name);
            });
          }
          t.linkOtherSpace = otherSpace.join(",");
          return t;
        });
      this.tableData = res.content;
      this.page.total = res.total;
    },
    //选中项修改
    handleSelectionChange(val) {
      this.selections = val;
    },
    // 确认 保存关系
    savaRelation() {
      let pa = {
        data: {
          spaceId: this.spaceId,
          equipIdList: [],
        },
        type: this.zone,
      };
      this.selections.map((t) => {
        pa.data.equipIdList.push(t.id);
      });
      if (this.type == "equipment") {
        businessSpaceController.eqInSpaceCreate(pa, (res) => {
          this.successCallback(res);
        });
      } else {
        businessSpaceController.eqForSpaceCreate(pa, (res) => {
          this.successCallback(res);
        });
      }
    },
    // 关联成功回调
    successCallback(res) {
      this.dialogVisible = false;
      switch (res.result) {
        case logicConfig.resultObj.success:
          this.$message.success("关联成功");
          this.$emit("refresh");
          break;
        default:
          this.$message.error("关联失败");
          break;
      }
    },
    // 改变pagesize
    handleSizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.getTableData();
    },
    // 改变pageno
    handleCurrentChange(pageNo) {
      this.page.pageNumber = pageNo;
      this.getTableData();
    },
    // 查看详情
    toDetail() {
      this.$message("开发中");
    },
  },
  watch: {
    showType(n) {},
  },
};
</script>
<style lang="less" scoped>
#addEqDialog {
  .filters {
    margin-bottom: 10px;
    /deep/ .el-input__inner {
      vertical-align: baseline;
    }
  }
  .table-box {
    height: 350px;
  }
}
</style>
