<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.SysLocalName||scope.row.SysName||''}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="SysLocalID" :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 {
  notSyInSpaceQuery, //没有和当前空间绑定的系统
  syInSpaceCreate, //系统所在业务空间--创建关系
} from "@/api/scan/request";
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.SysID)
      })
      syInSpaceCreate(pa, res => {
        this.$message.success('关联成功');
        this.$emit('refresh');
        this.dialogVisible = false;
      })
    },
    // 获取表格数据
    getTableData() {
      let pa = {
        data: {
          PageSize: 200,
        },
        type: this.zone,
        spaceId: this.spaceId
      }
      notSyInSpaceQuery(pa, res => {
        this.tableData = res.Content;
      })
    },
    // 查看详情
    toDetail() {
      this.$message('开发中')
    }
  }
}
</script>
<style lang="less" scoped>
#addSyDialog {
  .table-box {
    height: 350px;
  }
}
</style>