<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" border>
        <el-table-column label="业务空间名称" 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 label="所属建筑" show-overflow-tooltip min-width="100" class-name="mutiCol">
          <template slot-scope="scope">
            <div>
              <div v-for="(t,i) in scope.row.floorList" :key="i" class="muti">
                {{t.building.localName||t.building.name}}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="SysLocalID" label="所属楼层" show-overflow-tooltip min-width="100" class-name="mutiCol">
          <template slot-scope="scope">
            <div>
              <div v-for="t in scope.row.floorList" :key="t.id" class="muti">
                {{t.localName||t.name}}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="action" label="操作" min-width="50" align='center' class-name="mutiCol">
          <template slot-scope="scope">
            <div>
              <div v-for="t in scope.row.floorList" :key="t.id" class="muti">
                <el-radio v-model="scope.row.selected" :label="t">{{''}}</el-radio>
              </div>
            </div>
          </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 {
  getSpaceBdFlData, // 属于多建筑楼层的空间数据
  updateRelateInSpAndBuild, //保存业务空间与建筑楼层关系
} 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();
    },
    // 确认
    savaRelation() {
      let arr = [];
      this.tableData.forEach(t => {
        if (t.selected) {
          arr.push({
            spaceId: t.id,
            id: t.selected.floorId,
            type: t.classCode
          })
        }
      })
      if (arr.length) {
        updateRelateInSpAndBuild(arr, res => {
          this.$emit('relaSuc');
          this.$message.success('关联成功');
          this.dialogVisible = false;
        })
      } else {
        this.$message.warning('请选择关联建筑楼层');
      }
    },
    // 获取表格数据
    getTableData() {
      let pa = {
        cascade: [
          { Name: "floorList", cascade: [{ name: 'building' }] }
        ],
        pageSize: 1000
      }
      getSpaceBdFlData(pa, res => {
        this.tableData = res.content;
      })
    }
  }
}
</script>
<style lang="less" scoped>
#addSyDialog {
  .table-box {
    height: 350px;
    /deep/ .mutiCol {
      padding: 0;
      & > div {
        padding: 0;
      }
    }
    .muti {
      line-height: 32px;
      padding: 0 10px;
      & + .muti {
        border-top: 1px solid #ebeef5;
      }
    }
  }
}
</style>