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

    <foldpanelLeft :title="filterTitle()" :isShare="true">
      <!-- 左侧显示逻辑 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 :isShare="true">
      <xiaoquRight v-if="!queryParamsXiaoqu.buildingId" />
    </foldpanelRight>
    <!-- 森茂汽配城不展示 -->
    <foldPaneBottom>
      <template v-slot:header>
        <bottomListHeader />
      </template>
      <bottomList />
    </foldPaneBottom>
    <!-- 森茂汽配城不展示 -->
    <building v-if="queryParamsXiaoqu.xiaoquId != 267" />
    <house />

    <!-- 森茂二维地图build -->
    <el-dialog
      :visible.sync="erweiBuild.open"
      custom-class="taicang-dialog dialog-zindex"
      :before-close="handleClose"
      destroy-on-close
      z-index="2005"
    >
      <div class="dialog-main">
        <div class="dialog-title"><span></span> {{ erweiBuild.title }}</div>
        <sm-build v-if="erweiBuild.open == true"></sm-build>
      </div>
    </el-dialog>
  </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,
  bottomListHeader,
  bottomList,
  building,
  house,
  smBuild,
} from "@/views/components/index.js";

export default {
  data() {
    return {};
  },
  components: {
    MarsMap,
    NavigationBar,
    foldpanelLeft,
    foldpanelRight,
    foldPaneBottom,
    xiaoquInfo,
    xiaoquRight,
    networkInfo,
    buildingStatistics,
    mapSearchBox,
    bottomListHeader,
    bottomList,
    building,
    house,
    smBuild,
  },
  computed: {
    ...mapGetters(["xiaoquIntroduce", "queryParamsXiaoqu", "erweiBuild"]),
  },
  created() {
    this.pageCreated();
  },
  methods: {
    handleClose(done) {
      this.$store.commit("CHANGE_QUERY", { buildingId: undefined });
      this.$store.commit("SET_ERWEI_BUILD", { open: false, title: "" });
      done();
    },

    pageCreated() {
      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,
      }); //预警总数
    },
    clickReset() {
      this.$store.commit("SET_RESET", true);
      this.pageCreated();
      setTimeout(() => {
        this.$store.commit("SET_RESET", false);
      }, 1500);
    },
    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>
