<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="800px"
    id="addSyDialog"
  >
    <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="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>
    </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 { businessSpaceController } from "@/controller/old-adm/businessSpaceController";
import logicConfig from "@/logicConfig";
export default {
  data() {
    return {
      title: "添加空间内的系统",
      inSpaceType: "系统",
      dialogVisible: false,
      tableData: [],
      loading: false,
      headerStyle: {
        backgroundColor: "#e1e4e5",
        color: "#2b2b2b",
        lineHeight: "30px",
      }, // 列表样式
      selections: [], // 选中项
    };
  },
  props: {
    type: {}, //equipment--equipmentFor
    spaceId: {},
    zone: {}, //分区类型
  },
  methods: {
    // 显示
    showDialog() {
      this.dialogVisible = true;
      this.tableData = [];
      this.getTableData();
    },
    // 选中项修改
    handleSelectionChange(val) {
      this.selections = val;
    },
    // 确认
    savaRelation() {
      let pa = {
        data: {
          spaceId: this.spaceId,
          sysIdList: [],
        },
        type: this.zone,
      };
      this.selections.map((t) => {
        pa.data.sysIdList.push(t.id);
      });
      businessSpaceController.syInSpaceCreate(pa, (res) => {
        this.dialogVisible = false;
        switch (res.result) {
          case logicConfig.resultObj.success:
            this.$message.success("关联成功");
            this.$emit("refresh");
            break;
          default:
            this.$message.error("关联失败");
            break;
        }
      });
    },
    // 获取表格数据
    getTableData() {
      let pa = {
        data: {
          pageSize: 200,
          orders: "id asc",
        },
        type: this.zone,
        spaceId: this.spaceId,
      };
      businessSpaceController.notSyInSpaceQuery(pa, (res) => {
        this.tableData = res.content;
      });
    },
    // 查看详情
    toDetail() {
      this.$message("开发中");
    },
  },
};
</script>
<style lang="less" scoped>
#addSyDialog {
  .table-box {
    height: 350px;
  }
}
</style>