<!--
    设备清单
-->
<template>
  <div id="deviceList">
    <saga-title :mess="mess"></saga-title>
    <div class="table-main">
      <div class="search-header">
        <floor-cascader @change="changeFloor"></floor-cascader>
        <my-cascader ref="cascader" @change="changeDevice"></my-cascader>
      </div>
      <hanson-table @close="close" :graphyId="graphyId" ref="tableMain"></hanson-table>
    </div>
    <!-- <table-transfers></table-transfers> -->
  </div>
</template>
<script>
import sagaTitle from "@/components/list/title";
import floorCascader from "@/components/lib/floorCascader";
import myCascader from "@/components/cascader";
import hansonTable from "@/components/handsontables/device";
import tableTransfers from "@/components/transfers/tableTransfers";

import { getNumber, getFamilyList, getSpaceName, getGraphyId, getEquipmentFamily } from "@/api/request"

export default {
  components: {
    sagaTitle,
    floorCascader,
    myCascader,
    hansonTable,
    tableTransfers
  },
  data() {
    return {
      mess: {
        perjectName: "",
        name: [
          {
            key: "设备",
            num: 0
          },
          {
            key: "资产",
            num: 0
          }
        ]
      },
      param: {
        buildId: "",
        floorId: "",
        deviceId: "",
        ProjId: this.$route.query.projId,
        secret: this.$route.query.secret
      },
      assetGroupList: [],
      graphyId: null
    };
  },
  created() {
    this.getProjName()
  },
  mounted() { },
  methods: {
    getProjName() {
      let param = {
        list: [{ id: this.param.ProjId }],
        perjectId: this.param.ProjId,
        secret: this.param.secret,
      }
      getSpaceName(param).then(res => {
        if (res.data.Result == "success") {
          this.mess.perjectName = res.data.Content[0].infos.ProjLocalName
          this.getEqCode()
        } else {
          this.$message.error("请求失败：" + res.data.ResultMsg)
        }
      }).catch(_ => {
        this.$message.error("请求失败")
      })
    },
    close(val) {
      this.getEqCode()
      console.log(val)
      this.$refs.cascader.changeVal([val.code])
      //   this.$refs.tableMain.getHeaderData(this.param);
    },
    getEqCode() {
      getEquipmentFamily(res => {
        this.assetGroupList = res.Content
        this.getGraphyId()
      })
    },
    getFamilyList() {
      let param = {
        ProjId: this.param.ProjId,
        secret: this.param.secret,
        data: { type: "Eq" }
      }
      getFamilyList(param, res => {
        this.$refs.cascader.pushData(res.Content)
      })
    },
    //获取header的list
    getNumber() {
      let param = {
        ProjId: this.param.ProjId,
        secret: this.param.secret,
        data: { type: "Eq" }
      }
      getNumber(param, res => {
        console.log(res)
        this.mess.name[0].num = res.content.count
        this.mess.name[1].num = res.content.bindingCount
        this.getFamilyList()
      })
    },

    getGraphyId() {
      let param = {
        ProjId: this.param.ProjId,
        secret: this.param.secret,
        type: "SystemEquip"
      }
      getGraphyId(param).then(res => {
        if (res.data.Result == "success") {
          this.graphyId = res.data.graph_id
          this.$refs.tableMain.setGraphyId(this.graphyId, this.assetGroupList);
          this.getNumber()
        } else {
          this.$message.error("请求错误：" + res.data.ResultMsg)
        }
      }).catch(_ => {
        this.$message.error("请求错误")
      })
    },
    //修改楼层
    changeFloor(value) {
      if (value[0]) {
        this.param.buildId = value[0]
      }
      if (value[1]) {
        this.param.floorId = value[1]
      } else {
        this.param.floorId = null
      }
      if (!!this.param.deviceId) {
        this.$refs.tableMain.getHeaderData(this.param);
      } else {
        return;
      }
    },

    //修改设备族
    changeDevice(value) {
      this.param.deviceId = value.code
      this.param.name = value.facility
      if (!!value) {
        this.$refs.tableMain.getHeaderData(this.param);
      } else {
        return;
      }

    }
  }
};
</script>
<style lang="less" scoped>
#deviceList {
  overflow: hidden;
  height: 100%;
  background-color: #f6f6f6;
  .table-main {
    position: absolute;
    top: 140px;
    bottom: 10px;
    left: 10px;
    right: 10px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
  }
  .search-header {
    overflow: hidden;
    padding-bottom: 10px;
    border-bottom: 1px solid #bcbcbc;
  }
}
</style>
