<template>
  <div class="pc-container">
    <NavigationBar
      :mainTitle="xiaoquIntroduce.deptName + '人口数据管理系统'"
      :showStreet="false"
    ></NavigationBar>
    <mapSearchBox />
    <mars-map ref="map" :xiaoquId="queryParamsXiaoqu.xiaoquId"></mars-map>

    <foldpanelLeft :title="filterTitle()">
      <!-- 左侧显示逻辑 1.小区简介 < 2.网格简介 < 3.楼栋统计分析  -->
      <xiaoquInfo
        v-if="
          queryParamsXiaoqu.xiaoquId &&
          !queryParamsXiaoqu.parentid &&
          !queryParamsXiaoqu.buildingId
        "
      />
      <networkInfo
        v-if="queryParamsXiaoqu.parentid && !queryParamsXiaoqu.buildingId"
      />
      <buildingStatistics v-if="queryParamsXiaoqu.buildingId" />
    </foldpanelLeft>
    <foldpanelRight>
      <xiaoquRight v-if="!queryParamsXiaoqu.buildingId" />
    </foldpanelRight>
    <foldPaneBottom>
      <bottomList />
    </foldPaneBottom>
    <building />
    <house />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import NavigationBar from "@/components/NavigationBar/index.vue";
import MarsMap from "@/views/components/xiaoqu/map/index.vue";
import {
  foldpanelLeft,
  foldpanelRight,
  foldPaneBottom,
  xiaoquInfo,
  xiaoquRight,
  networkInfo,
  buildingStatistics,
  mapSearchBox,
  bottomList,
  building,
  house,
} from "@/views/components/index.js";
export default {
  data() {
    return {};
  },
  components: {
    MarsMap,
    NavigationBar,
    foldpanelLeft,
    foldpanelRight,
    foldPaneBottom,
    xiaoquInfo,
    xiaoquRight,
    networkInfo,
    buildingStatistics,
    mapSearchBox,
    bottomList,
    building,
    house,
  },
  computed: {
    ...mapGetters(["xiaoquIntroduce", "queryParamsXiaoqu"]),
  },
  created() {
    this.$store.commit("RESET_QUERY"); //重置参数
    let id = this.$route.query.xiaoquId;
    this.$store.commit("CHANGE_QUERY", { xiaoquId: parseInt(id) }); //存储全局参数
    this.$store.commit("SET_QUERY_PARAMS", {
      xiaoquId: parseInt(id),
    });
    this.$store.dispatch("GetYjtotal", {
      xiaoquId: id,
    }); //预警总数
  },
  methods: {
    filterTitle() {
      return !this.queryParamsXiaoqu.parentid &&
        !this.queryParamsXiaoqu.buildingId
        ? "小区简介"
        : this.queryParamsXiaoqu.parentid && !this.queryParamsXiaoqu.buildingId
        ? "网格简介"
        : "统计分析";
    },
    handle3D() {
      this.$refs.map.handle3dPoint();
    },
  },
};
</script>

<style scoped lang="scss">
.pc-container {
  position: relative;
  height: 100%;
  box-sizing: border-box;
  background-size: 100% 100%;
  overflow: hidden;
}

.buttom-group {
  position: absolute;
  z-index: 20;
  bottom: 0;
  left: 0;
}
</style>
