<template>
  <div style="position: relative">
    <!-- 组织路由 -->
    <div class="div_top">
      <div class="router_line"></div>
      <div class="div_router">
        <span
          class="router_parents"
          v-for="(item, index) in runAgencyArray"
          @click="handleClickAgency(index)"
          :key="index"
          >{{ item.name }}<span class="arrow">></span></span
        >

        <span class="router_child">{{ orgData.name }}</span>
      </div>
    </div>

    <people
      v-if="orgLevel === 'people'"
      :uid="selUserId"
      ref="ref_people"
    ></people>

    <div v-show="orgLevel !== 'people'" class="div_content">
      <basic-info-community
        v-show="orgLevel === 'neighborHood'"
        @toSubAgency="toSubAgency"
        ref="ref_community"
        @refreshInfoList="refreshInfoList"
      ></basic-info-community>

      <div
        v-show="orgLevel !== 'people' && orgLevel !== 'neighborHood'"
        class="div_map"
      >
        <grid-map
          v-if="orgData.id"
          @clickAgency="clickAgencyItem"
          :srcGridData="orgData"
        />
        <div class="m-sidebar">
          <div class="wrap" :class="[{ 'wrap-hidden': !showAgencyList }]">
            <div @click="hideAgencyList" class="arrow_tip">
              <img src="@/assets/img/modules/visual/popup.png" alt />
            </div>

            <div class="div_agency_list">
              <div class="agency_main">
                <el-scrollbar
                  style="height: 98%"
                  wrap-style="overflow-x:hidden"
                >
                  <div v-if="subAgencyArray.length > 0" class="agency_list">
                    <div
                      v-for="(item, index) in subAgencyArray"
                      :key="index"
                      @click="clickAgencyItem(item, index)"
                      :class="[
                        'agency_item',
                        { agency_item_on: index % 2 == 0 },
                      ]"
                    >
                      <div class="agency_item_name">{{ item.name }}</div>
                    </div>
                  </div>
                  <div v-else>
                    <img
                      src="@/assets/img/modules/visual/noData.png"
                      alt=""
                      srcset=""
                      class="no-data-img"
                    />
                  </div>
                </el-scrollbar>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="div_data">
        <div class="div_info">
          <el-scrollbar style="height: 98%">
            <div class="info_tip">
              <img src="../../../../assets/img/shuju/title-tip.png" alt />
              <div class="tip_title">分类列表</div>
            </div>

            <div class="info_loading" v-if="infoLoading">
              <screen-loading>加载中</screen-loading>
            </div>

            <div v-if="!infoLoading" class="info_list">
              <div
                v-for="(item, index) in listDatashow"
                :key="index"
                class="item"
              >
                <div class="list_item">
                  <div
                    v-for="(colItem, colIndex) in item"
                    :key="colIndex"
                    class="list_item_col"
                    @click="handleTo(colItem)"
                  >
                    <img :src="colItem.dataIcon" alt />
                    <div class="item_content">
                      <div class="item_label">{{ colItem.label }}</div>
                      <div class="item_count">{{ colItem.count }}</div>
                    </div>
                  </div>
                </div>
                <div
                  :class="[
                    'item_line',
                    { last_line: index == listDatashow.length - 1 },
                  ]"
                ></div>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import nextTick from "dai-js/tools/nextTick";
import { mapGetters } from "vuex";
import { Loading } from "element-ui"; //引入Loading服务
import { requestPost } from "@/js/dai/request";
import BasicInfoCommunity from "./basicInfoCommunity";

import People from "./people";
import cptCard from "@/views/modules/visual/cpts/card";
import gridMap from "@/views/modules/visual/cpts/map/index";
import ScreenLoading from "@/views/modules/visual/cpts/loading";

let loading; //加载动画

export default {
  name: "HomeMap",

  components: { BasicInfoCommunity, People, cptCard, ScreenLoading, gridMap },

  props: {
    // vueFlag: {
    //   type: String,
    //   default: "alarm"
    // }
  },

  computed: {
    ...mapGetters(["clientHeight"]),
  },

  data() {
    return {
      showAgencyList: false,
      agencyFadeIn: true,

      orgData: {}, //当前组织对象
      orgId: "",
      orgLevel: "",

      subAgencyArray: [], //下拉框数据
      iconCoordinators: [],
      currentCoordinate: null,
      overlay: null,

      //右侧搜索
      searchName: "",

      //右侧列表
      infoLoading: true,
      listData: [], //得到的数据
      listDatashow: [], //处理成一行两列的数据

      //下钻层级记录
      runNum: 0,
      runAgencyArray: [],
      selUserId: "",
      center: [],
      zoom: null,
      parentPolygon: [],

      centerFlag: "point", //定义中心点的flag  point点 fit 自适应
    };
  },

  async mounted() {
    //加载组织数据
    await this.loadOrgData();
    await this.loadList();
  },

  methods: {
    handleTo(item) {
      this.$router.push({
        path: `/main-shuju/visual-basicinfo-people-list`,
        query: {
          columnName: item.columnName,
          label: item.label,
          id: this.orgId,
          level: this.orgLevel,
        },
      });
    },
    hideAgencyList() {
      this.showAgencyList = !this.showAgencyList;
    },

    //加载组织数据
    async loadOrgData() {
      const url = "/gov/org/agency/maporg";
      let params = {
        orgId: this.orgId,
        level: this.orgLevel,
      };

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        this.orgData = data;
        this.orgId = this.orgData.id;
        this.orgLevel = this.orgData.level;
        if (data.children && data.children.length > 0) {
          this.subAgencyArray = data.children;
        } else {
          this.subAgencyArray = [];
        }
      } else {
        this.$message.error(msg);
      }
    },

    //获取右侧infolist数据
    async loadList() {
      this.infoLoading = true;
      const url = "/epmetuser/statsresiwarn/list";
      // const url = "http://yapi.elinkservice.cn/mock/245/epmetuser/statsresiwarn/list"
      let params = {
        id: this.orgId,
        level: this.orgLevel,
      };

      const { data, code, msg } = await requestPost(url, params);
      this.infoLoading = false;
      if (code === 0) {
        this.listData = data;
        // this.listData = this.listData1
        this.listDatashow = [];
        let itemArray = [];
        this.listData.forEach((item, index) => {
          if (!item.dataIcon) {
            item.dataIcon = require("../../../../assets/img/modules/visual/dibao.png");
          }

          if (index % 2 === 0) {
            //偶数
            itemArray.push(item);
            if (index + 1 === this.listData.length) {
              this.listDatashow.push(itemArray);
            }
          } else {
            itemArray.push(item);
            this.listDatashow.push(itemArray);
            itemArray = [];
          }
        });
      } else {
        this.$message.error(msg);
      }
    },

    //子组件点击房间，刷新右侧list
    refreshInfoList(selId, type) {
      this.orgId = selId;
      this.level = "";
    },

    //返回所选组织
    handleClickAgency(index) {
      //如果是从小区返回，清空一下小区的人员显示列表
      if (this.orgLevel === "neighborHood") {
        this.$nextTick(() => {
          // 小区id，小区名称
          this.$refs.ref_community.handleCloseAllUser();
        });
      }
      const cutNum = this.runAgencyArray.length - index; //要减去的长度
      this.runNum = this.runNum - cutNum;

      this.orgData = this.runAgencyArray[index];

      for (let i = 0; i < cutNum; i++) {
        this.runAgencyArray.pop();
      }

      this.orgId = this.orgData.id;
      this.orgLevel = this.orgData.level;

      if (this.orgLevel === "people") {
      } else if (this.orgLevel === "neighborHood") {
        //显示小区
      } else {
        this.$nextTick(() => {
          this.refreshMap(true);
          this.$forceUpdate();
        });
      }
    },

    //点击组织列表数据
    clickAgencyItem(item, index) {
      let e = {
        selected: [],
      };
      let one = {
        values_: item,
      };
      e.selected.push(one);

      this.toSubAgency("polygon", e);
    },

    //下钻到下一级 type点击的类型:polygon 点击多边形（分为点击组织/小区）    people 点击详情
    async toSubAgency(type, e, searchName) {
      //点击小区neighborHood显示楼栋，点击非小区，进入下一级地图
      if (type === "people") {
        this.runNum++;
        this.runAgencyArray.push(this.orgData);
        this.orgLevel = "people";
        this.selUserId = e;
        this.orgId = "";
        this.orgData = {
          id: "",
          level: "people",
          name: "人员档案",
        };
        this.searchName = searchName;
      } else {
        if (!e) {
          return false;
        }
        if (!e.selected[0]) {
          return false;
        }
        this.runNum++;

        this.runAgencyArray.push(this.orgData);

        this.subAgencyArray.forEach((item) => {
          if (item.id === e.selected[0].values_.id) {
            this.orgId = item.id;
            this.orgLevel = item.level;
            this.orgData = item;
          }
        });

        if (this.orgLevel === "neighborHood") {
          this.loadList();
          this.$nextTick(() => {
            // 小区id，小区名称
            this.$refs.ref_community.initData(
              this.orgData.id,
              this.orgData.name
            );
          });
        } else {
          this.refreshMap(true);
        }
      }
    },

    //刷新地图
    async refreshMap(isRefreshView) {
      //加载组织数据
      await this.loadOrgData();

      await this.loadList();
    },

    //开启加载动画
    startLoading() {
      loading = Loading.service({
        lock: true, //是否锁定
        text: "正在加载……", //加载中需要显示的文字
        background: "rgba(0,0,0,.7)", //背景颜色
      });
    },

    //结束加载动画
    endLoading() {
      //clearTimeout(timer);
      if (loading) {
        loading.close();
      }
    },
  },
};
</script>

<style
  lang="scss"
  src="@/assets/scss/modules/visual/basicInfoMain.scss"
  scoped
></style>

<style lang="scss">
.div_content {
  .ol-viewport {
    border-radius: 5px;
  }
}
.ol-overlaycontainer-stopevent {
  display: none;
}
</style>

<style lang="scss" scoped></style>
