<template>
  <div id="eqInSp">
    <el-row v-show="hidden">
      <el-button type="primary" @click="add">添加{{ inSpaceType }}</el-button>
      <el-tooltip
        class="item"
        effect="dark"
        :content="`可前往“全部关系总览”中，按坐标计算${typeToTips[type]}`"
        placement="right"
      >
        <el-button>按空间计算</el-button>
      </el-tooltip>
    </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="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-tooltip
              class="item"
              effect="dark"
              content="删除关系"
              placement="left"
            >
              <el-button
                size="mini"
                @click="handleDelete(scope.$index, scope.row)"
                type="danger"
                plain
                icon="el-icon-delete"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
        <template slot="empty">
          <div
            style="height: 60%; transform: translateY(50%); lineheight: 20px"
          >
            <i class="icon-wushuju iconfont"></i>
            可前往“全部关系总览”中，按坐标计算{{ typeToTips[type] }}
          </div>
        </template>
      </el-table>
    </div>
    <addSystemDialog
      ref="addSyDialog"
      :type="type"
      :spaceId="params.RoomID"
      :zone="params.zone"
      @refresh="getTableData"
    ></addSystemDialog>
  </div>
</template>

<script>
import ScanController from "@/controller/old-adm/ScanController";
import { businessSpaceController } from "@/controller/old-adm/businessSpaceController";
import logicConfig from "@/logicConfig";
import { mapGetters } from "vuex";
import addSystemDialog from "@/components/old-adm/business_space/newAddDialogs/addSystemDialog";
export default {
  components: {
    addSystemDialog,
  },
  computed: {
    ...mapGetters("layout", ["projectId"]),
  },
  data() {
    return {
      inSpaceType: "系统",
      headerStyle: {
        backgroundColor: "#e1e4e5",
        color: "#2b2b2b",
        lineHeight: "30px",
      }, // 列表样式
      loading: false, // loading
      tableData: [], //列表数据
      typeToTips: {
        generalSystem: "空间内的系统",
      },
      hidden: true,
      loading: false,
    };
  },
  props: {
    params: {},
    type: {},
  },
  created() {
    this.getTableData();
    this.changeContentStyle();
  },
  methods: {
    // 删除关系
    handleDelete(index, row) {
      this.$confirm("确认删除该关系？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let pa = {
            data: [
              {
                sysId: row.id,
                spaceId: row.spaceId,
              },
            ],
            type: this.params.zone,
          };
          this.deleteSyInSpace(pa);
        })
        .catch(() => {
          this.$message("取消删除");
        });
    },
    // 删除关系
    deleteSyInSpace(pa) {
      businessSpaceController.syInSpaceDelete(pa, (res) => {
        switch (res.result) {
          case logicConfig.resultObj.success:
            this.$message.success("删除成功");
            this.getTableData();
            break;
          default:
            this.$message.error("删除失败");
            break;
        }
      });
    },
    // 获取列表数据
    getTableData() {
      this.loading = true;
      let pa = {
        Cascade: [{ Name: "generalSystem" }],
        Filters: `id="${this.params.RoomID}"`,
        ZoneType: this.params.zone,
      };
      ScanController.zoneQuery(pa, (res) => {
        this.loading = false;
        this.tableData = res.content[0].generalSystem || [];
        this.tableData.map((t) => {
          t.spaceId = res.content[0].id;
          return t;
        });
      });
    },
    // 添加系统
    add() {
      this.$refs.addSyDialog.showDialog();
    },
    changeContentStyle() {
      // 在辅助屏不显示添加按钮，动态设置高度
      this.$route.name == "spaceLedger"
        ? (this.hidden = false)
        : (this.hidden = true);
    },
  },
  watch: {
    type() {
      this.getTableData();
    },
    params() {
      this.getTableData();
    },
  },
};
</script>
<style lang="less" scoped>
#eqInSp {
  height: 100%;
  .table-box {
    margin-top: 10px;
    height: calc(100% - 50px);
  }
}
</style>