<!--
    系统清单
-->
<template>
  <div id="deviceList">
    <saga-title :mess="mess"></saga-title>
    <div class="table-main">
      <div class="search-header">
        <floor-cascader :type="'no'" @change="changeFloor"></floor-cascader>
        <my-cascader ref="cascader" @change="changeDevice"></my-cascader>
      </div>
      <hanson-table @close="close" ref="tableMain"></hanson-table>
    </div>
    <table-transfers></table-transfers>
  </div>
</template>
<script>
import sagaTitle from "@/components/ledger/lib/title";
import floorCascader from "@/components/ledger/lib/floorCascader";
import myCascader from "@/components/ledger/lib/system";
import hansonTable from "@/components/ledger/handsontables/system";
import tableTransfers from "@/components/ledger/tableTransfers";
import { mapGetters } from "vuex";
import { countGeneralSys } from "@/api/scan/request"
import 'handsontable-pro/dist/handsontable.full.css'

export default {
  components: {
    sagaTitle,
    floorCascader,
    myCascader,
    hansonTable,
    tableTransfers
  },
  data() {
    return {
      mess: {
        perjectName: "",
        name: [
          {
            key: "系统",
            num: 0
          }
        ]
      },
      param: {
        buildId: "",
        floorId: "",
        deviceId: "",
        ProjId: '',
        secret: ''
      }
    };
  },
  computed: {
    ...mapGetters("layout", ["projectId", "secret", "userId"])
  },
  created() {
    this.param.ProjId = this.projectId
    this.param.secret = this.secret
    this.countGeneralSys()
    let SysType = this.$route.params.SysType;
    if (SysType) {
      this.$nextTick(() => {
        this.$refs.cascader.changeVal(SysType)
      })
    }
  },
  watch: {
    projectId() {
      this.param.ProjId = this.projectId
      this.param.secret = this.secret
      this.countGeneralSys()
    }
  },
  methods: {
    close(val) {
      this.countGeneralSys()
      if (!!val && !!val.Category) {
        if (this.$refs.cascader)
          this.$refs.cascader.changeVal(val.Category)
      }
      this.$refs.cascader.getData()
    },
    //获取系统统计信息
    countGeneralSys() {
      let param = {}
      countGeneralSys(param, res => {
        this.mess.name[0].num = res.Count
      })
    },
    //修改楼层
    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) {
        if (this.$refs.tableMain)
          this.$refs.tableMain.getHeaderData(this.param);
      }
    },
    //修改设备族
    changeDevice(value) {
      this.param.deviceId = value.Category
      if (value) {
        if (this.$refs.tableMain)
          this.$refs.tableMain.getHeaderData(this.param);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
#deviceList {
  overflow: hidden;
  height: 100%;
  background-color: #fff;
  position: relative;
  .table-main {
    position: absolute;
    top: 87px;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    // border-radius: 5px;
    // padding: 10px 0;
  }
  .search-header {
    overflow: hidden;
    padding-bottom: 10px;
    margin: 0 10px;
    border-bottom: 1px solid #bcbcbc;
  }
}
</style>
