<!--
    systemType 设备所属类型
-->
<template>
  <el-dialog title="所属系统实例" :visible.sync="dialog.systemType" width="900px">
    <div>
      <div id="systemType">
        <div class="title-search query-form" style="padding: 10px;margin-bottom: 10px;" v-if="type != 'read' ">
          <el-row>
            <el-col :span="10">
              <span>系统所属建筑</span>
              <el-select v-model="buildId" placeholder="请选择" @change="getTableData">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="14">
              <el-input placeholder="输入名称或编码进行查询" v-model="search" size="small" style="width:300px; margin-right:10px"
                        clearable></el-input>
              <el-button size="small" @click="getTableData">查找</el-button>
            </el-col>
          </el-row>
        </div>
        <el-table class='data-table' border :data="type == 'read'?linkSystemData:tableData"
                  @selection-change="handleSelectionChange" style="width: 100%" ref="multipleTable">
          <el-table-column v-if="type != 'read' " type="selection" :reserve-selection="true" :disabled="true"
                           width="55"></el-table-column>
          <el-table-column label="系统名称" header-align='center'>
            <template slot-scope="scope">{{ scope.row.localName || scope.row.name }}</template>
          </el-table-column>
          <el-table-column label="本地编码" header-align='center'>
            <template slot-scope="scope">{{ scope.row.localId || '--' }}</template>
          </el-table-column>
          <el-table-column label="专业" prop="MajorName" header-align='center'></el-table-column>
          <el-table-column label="详情" header-align='center' width="100" align="center">
            <template slot-scope="scope">
              <el-button @click="lookDeatils(scope.row)" type="text">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <span slot="footer" class="dialog-footer" v-if="type != 'read' ">
      <el-button type="primary" @click="getChange">确 定</el-button>
    </span>
    <el-dialog title="系统详情" :visible.sync="iframeShow" v-if="iframeShow" width="500px" append-to-body>
      <iframe id="google_ads_frame2" name="google_ads_frame2" frameborder="0" :src="iframeSrc" marginwidth="0"
              marginheight="0" vspace="0" hspace="0"
              style="width:100%;height:500px;" allowtransparency="true" scrolling="no" allowfullscreen="true"></iframe>
    </el-dialog>
  </el-dialog>
</template>
<script>
import myPagination from "@/components/ledger/lib/myPagination";
import { queryLinkSys, getSpaceFloor, equipLinkSys } from "@/api/scan/request"
import tools from "@/utils/scan/tools"
import { mapGetters } from 'vuex'

export default {
  components: {
    myPagination
  },
  props: {
    dialog: {
      type: Object,
      default: function () {
        return {
          systemType: true
        };
      }
    },
    graphyId: {
      type: String,
      default: ""
    },
    device: {},
    curDevice: {
      default: ''
    },//设备id
    type: {
      type: String,
      default: "read"
    },
    list: {
      type: [Array]
    }
  },
  data() {
    return {
      search: "", //搜索文案
      tableData: [],
      systemList: [],
      linkSystemData: [],
      multipleSelection: [],
      iframeSrc: "",
      iframeShow: false,
      buildId: 'all', //查询条件
      options: [], //系统所属建筑
    };
  },
  computed: {
    ...mapGetters("layout", ["projectId", "secret", "userId"])
  },
  mounted() {
  },
  methods: {
    //获取查询条件-建筑
    // getData() { // 物理世界 已无接口
    //   let param = {
    //     ProjId: this.projectId,
    //     secret: this.secret,
    //   }
    //   getSpaceFloor(param).then(res => {
    //     if (res.data.Result == 'success') {
    //       let data = this.changeArr(res.data.Content)
    //       data.unshift({
    //         value: "all",
    //         label: "全部"
    //       }, {
    //           value: "noKnow",
    //           label: "未明确建筑的设备"
    //         })
    //       this.options = data
    //     } else {
    //       this.$message.error(res.data.ResultMsg)
    //     }
    //   }).catch(err => {
    //     this.$message.error(err)
    //   })
    // },
    //将数组转换成optiosn格式
    changeArr(arr) {
      return arr.map(item => {
        if (item.floors && item.floors.length && this.type == "yes") {
          return {
            value: item.id,
            label: item.infos.BuildLocalName,
            children: item.floors.map(i => {
              return {
                value: i.id,
                label: i.infos.FloorLocalName,
                FloorSequenceID: i.infos.FloorSequenceID
              }
            })
          }
        } else {
          return {
            value: item.id,
            label: item.infos.BuildLocalName,
            children: null,
            isChilren: 1,
          }
        }
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //设置默认
    toggleSelection(rows) {
      this.$refs.multipleTable.clearSelection();
      if (rows.length && this.list.length) {
        rows.map(row => {
          this.list.map(t => {
            if (row.SysID == t.SysID) {
              this.$refs.multipleTable.toggleRowSelection(row)
            }
          })
        })
      }
    },
    //确认
    getChange() {
      this.createRelatSys()
      this.$emit("change", this.multipleSelection)
      this.dialog.systemType = false
      this.multipleSelection = []
    },
    //点击详情
    lookDeatils(infos) {
      this.$message("开发中...")
      // this.iframeSrc =
      //   process.env.BASE_URL +
      //   ":8889/#/details?perjectId=" +
      //   this.projectId +
      //   "&secret=" +
      //   this.secret +
      //   "&FmId=" +
      //   infos.id +
      //   "&type=1&code=" +
      //   infos.category.substring(2, 4);
      // this.iframeShow = true;
    },
    //根据设备类型-查询系统关联专业
    getTableData() {
      let param = {
        filters: `classCode="${this.device.deviceId.substring(0, 2)}"`,
        pageNumber: 1,
        pageSize: 1000
      }
      //建筑id
      if (this.buildId == "noKnow") {
        param.filters += `;buildingId isNull`
      } else if (this.buildId && this.buildId != "all") {
        param.filters += `;buildingId='${this.buildId}'`
      }
      //输入的查询条件
      if (this.search) {
        param.filters += `;localName contain "${this.search}" or localId contain "${this.search}"`
      }
      queryLinkSys(param, res => {
        this.tableData = res.content
        this.toggleSelection(res.content)
      })
    },
    //获取关联的系统
    getLinkSystemData() {
      this.linkSystemData = this.list ? JSON.parse(JSON.stringify(this.list)) : []
    },
    //添加设备关联系统关系
    createRelatSys() {
      if (this.curDevice) {//有即为编辑
        let param = {
          EquipID: this.curDevice,
          SysIdList: []
        }
        this.multipleSelection.map(t => {
          param.SysIdList.push(t.SysID)
        })
        equipLinkSys(param, res => {
          this.multipleSelection = []
        })
      }
    }
  },
  watch: {
    dialog: {
      deep: true,
      handler() {
        if (this.dialog.systemType) {
          // this.getData()
          if (this.type == 'read') {
            this.getLinkSystemData()
          } else {
            this.getTableData()
          }
        }
      }
    },
    projectId() {
      this.buildId = 'all';
      this.options = [];
      // this.getData()
    }
  }
};
</script>

<style lang="less">
#systemType {
  height: 455px;
  overflow-y: auto;

  .el-table thead {
    tr {
      th {
        background-color: #f5f7fa;
      }
    }
  }
}
</style>
