<template>
  <el-dialog title="本次对应记录" :visible.sync="dialogVisible" width="70%" @close="handleClose" id="historyAction" custom-class="act-history">
    <span>提示：可使用Contorl+F 搜索关键字</span>
    <div>
      <el-table :data="tableData" style="width: 100%;" :show-header="showheader" height="400px">
        <el-table-column>
          <el-table-column label="数据源" align="right">
            <template slot-scope="scope">
              <div v-for="t in scope.row.leftList" :key="t.id">
                <el-tooltip :content="t.Datasource" placement="top">
                  <div>{{t.Datasource}}</div>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="位置标签" align="right">
            <template slot-scope="scope">
              <div v-for="t in scope.row.leftList" :key="t.id">
                <el-tooltip :content="t.LocationFlag.toString()" placement="top">
                  <div>{{t.LocationFlag.toString()}}</div>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="设备标识" width="200px" class-name="bgf5" align="right">
            <template slot-scope="scope">
              <div v-for="t in scope.row.leftList" :key="t.id">
                <el-tooltip :content="t.EquipmentMark" placement="top">
                  <div>{{t.EquipmentMark}}</div>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column>
          <el-table-column label="设备实例名称" width="200px" class-name="bgf5 border-l">
            <template slot-scope="scope">
              <div v-for="t in scope.row.rightList" :key="t.id">
                <el-tooltip :content="t.EquipLocalName" placement="top">
                  <div>{{t.EquipLocalName}}</div>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="设备实例编码">
            <template slot-scope="scope">
              <div v-for="t in scope.row.rightList" :key="t.id">
                <el-tooltip :content="t.ObjectID" placement="top">
                  <div>{{t.ObjectID}}</div>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="所在建筑楼层">
            <template slot-scope="scope">
              <div v-for="t in scope.row.rightList" :key="t.id">
                <el-tooltip :content="t.BuildLocalName&&t.FloorLocalName?t.BuildLocalName+'-'+t.FloorLocalName:''" placement="top">
                  <div>{{t.BuildLocalName&&t.FloorLocalName?t.BuildLocalName+'-'+t.FloorLocalName:''}}</div>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="所在业务空间">
            <template slot-scope="scope">
              <div v-for="t in scope.row.rightList" :key="t.id">
                <el-tooltip :content="t.RoomLocalName" placement="top">
                  <div>{{t.RoomLocalName}}</div>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="操作" width="100px">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleDelete(scope.$index, scope.row)" type="danger" plain>清除对应</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>
<script>
import { dynamicDeleteRelation } from "@/api/scan/request";
export default {
  data() {
    return {
      dialogVisible: false, //弹窗显示与隐藏
      showheader: false,
      tableData: [] //数据list
    };
  },
  methods: {
    showDialog(data) {
      this.tableData = data;
      this.dialogVisible = true;
    },
    handleClose(done) { },
    //清除关系
    handleDelete(i, t) {
      let param = [];
      let object = {
        Objs: t.rightList,
        Points: t.leftList
      };
      param.push(object);
      dynamicDeleteRelation(param, res => {
        if (res.Result == "success") {
          this.$message.success("清除关联成功");
          this.tableData.splice(i, 1);
          this.$emit("delSuc");
        }
      });
    }
  },
  mounted() { },
  created() { }
};
</script>
<style lang="scss" scoped>
#historyAction {
  /deep/ .act-history.el-dialog {
    max-height: 60%;
    overflow-y: auto;
    overflow-x: hidden;
    td.bgf5 {
      background-color: #f5f7fa;
    }
    td {
      border-bottom: 1px solid #ccc;
      border-top: 1px solid #ccc;
      div {
        line-height: 34px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
    .border-l {
      border-left: 2px solid #ccc;
    }
  }
}
</style>
