<template>
  <div style="position: relative">
    <!-- 组织路由 -->
    <div class="m-crumb">
      <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" />

    <div v-show="orgLevel !== 'people'" class="g-cnt">
      <div class="m-map">
        <grid-map
          v-if="orgData.id"
          @clickAgency="clickAgencyItem"
          :srcGridData="orgData"
          :dotList="dotList"
        />

        <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="m-sidemenu">
        <cpt-card>
          <div class="title">
            <img src="@/assets/img/shuju/title-tip.png" />
            <span>指挥调度</span>
          </div>

          <div class="list">
            <sidemenu :grandIcoList="dotIcoList"></sidemenu>
          </div>
        </cpt-card>
      </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 People from "@/views/modules/visual/basicinfo/people";
import cptCard from "@/views/modules/visual/cpts/card";
import gridMap from "@/views/modules/visual/basicinfo/cpts/grid-map";
import sidemenu from "@/views/modules/visual/command/cpts/sidemenu";
import ScreenLoading from "@/views/modules/visual/cpts/loading";

let loading; //加载动画

export default {
  name: "HomeMap",

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

  props: {},

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

  data() {
    return {
      showAgencyList: false,

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

      subAgencyArray: [], //下拉框数据

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

      dotList: [],
      categoryKeys: [],

      dotIcoList: {
        anzhibangjiao: require("@/assets/img/shuju/command/ico/anzhibangjiao.png"),
        buliangqingshaonian: require("@/assets/img/shuju/command/ico/buliangqingshaonian.png"),
        shequjiaozheng: require("@/assets/img/shuju/command/ico/shequjiaozheng.png"),
        resi_xfry: require("@/assets/img/shuju/command/ico/resi_xfry.png"),
        xidurenyuan: require("@/assets/img/shuju/command/ico/xidurenyuan.png"),
        xiejiaorenyuan: require("@/assets/img/shuju/command/ico/xiejiaorenyuan.png"),
        zhaoshizhaohuojingshenbing: require("@/assets/img/shuju/command/ico/zhaoshizhaohuojingshenbing.png"),

        enterprise_patrol_unqualified: require("@/assets/img/shuju/command/ico/enterprise_patrol_unqualified.png"),

        yjdw: require("@/assets/img/shuju/command/ico/yjdw.png"),
        sr_gy: require("@/assets/img/shuju/command/ico/sr_gy.png"),
        sr_gc: require("@/assets/img/shuju/command/ico/sr_gc.png"),
        whdw: require("@/assets/img/shuju/command/ico/whdw.png"),
        sr_ggld: require("@/assets/img/shuju/command/ico/sr_ggld.png"),
        lwh: require("@/assets/img/shuju/command/ico/lwh.png"),
        sr_tyc: require("@/assets/img/shuju/command/ico/sr_tyc.png"),
        lyjlb: require("@/assets/img/shuju/command/ico/lyjlb.png"),
        sr_yjy: require("@/assets/img/shuju/command/ico/sr_yjy.png"),
        zaxld: require("@/assets/img/shuju/command/ico/zaxld.png"),
        other: require("@/assets/img/shuju/command/ico/other.png"),
        sr_jzz: require("@/assets/img/shuju/command/ico/sr_jzz.png"),
        sr_djc: require("@/assets/img/shuju/command/ico/sr_djc.png"),
        sr_rfqck: require("@/assets/img/shuju/command/ico/sr_rfqck.png"),
        ep_lg: require("@/assets/img/shuju/command/ico/ep_lg.png"),
        sr_xfz: require("@/assets/img/shuju/command/ico/sr_xfz.png"),
        pu_jgzsbm: require("@/assets/img/shuju/command/ico/pu_jgzsbm.png"),
        ep_qt: require("@/assets/img/shuju/command/ico/ep_qt.png"),

        sr_others: require("@/assets/img/shuju/command/ico/sr_others.png"),
        cm_others: require("@/assets/img/shuju/command/ico/cm_others.png"),
        ps_others: require("@/assets/img/shuju/command/ico/ps_others.png"),
        ps_nat: require("@/assets/img/shuju/command/ico/ps_nat.png"),
        ps_vaccine: require("@/assets/img/shuju/command/ico/ps_vaccine.png"),

        gr_czw: require("@/assets/img/shuju/command/ico/gr_czw.png"),
        ep_cycs: require("@/assets/img/shuju/command/ico/ep_cycs.png"),
        dc_jyz: require("@/assets/img/shuju/command/ico/dc_jyz.png"),
        ep_gwylcs: require("@/assets/img/shuju/command/ico/ep_gwylcs.png"),
        dc_jqz: require("@/assets/img/shuju/command/ico/dc_jqz.png"),
        dc_whpdw: require("@/assets/img/shuju/command/ico/dc_whpdw.png"),
        ep_wb: require("@/assets/img/shuju/command/ico/ep_wb.png"),
        ep_mrxycs: require("@/assets/img/shuju/command/ico/ep_mrxycs.png"),
        dc_yqhjz: require("@/assets/img/shuju/command/ico/dc_yqhjz.png"),
        dc_jzgd: require("@/assets/img/shuju/command/ico/dc_jzgd.png"),
        ep_scjgqy: require("@/assets/img/shuju/command/ico/ep_scjgqy.png"),

        cm_nmsc: require("@/assets/img/shuju/command/ico/cm_nmsc.png"),
        event_tdnd: require("@/assets/img/shuju/command/ico/event_tdnd.png"),
        cm_bhsc: require("@/assets/img/shuju/command/ico/cm_bhsc.png"),
        cm_cjsc: require("@/assets/img/shuju/command/ico/cm_cjsc.png"),
        ep_lssd: require("@/assets/img/shuju/command/ico/ep_lssd.png"),

        resi_szry: require("@/assets/img/shuju/command/ico/resi_szry.png"),
        ps_lyy: require("@/assets/img/shuju/command/ico/ps_lyy.png"),
        resi_snry: require("@/assets/img/shuju/command/ico/resi_snry.png"),
        ps_mzb: require("@/assets/img/shuju/command/ico/ps_mzb.png"),
        ps_zs: require("@/assets/img/shuju/command/ico/ps_zs.png"),
        ps_wss: require("@/assets/img/shuju/command/ico/ps_wss.png"),
        ps_jjz: require("@/assets/img/shuju/command/ico/ps_jjz.png"),
        ep_xx: require("@/assets/img/shuju/command/ico/ep_xx.png"),
        ep_yy: require("@/assets/img/shuju/command/ico/ep_yy.png"),

        volunteer_nengrendaren: require("@/assets/img/shuju/command/ico/volunteer_nengrendaren.png"),
        volunteer_daibanyuan: require("@/assets/img/shuju/command/ico/volunteer_daibanyuan.png"),
        volunteer_tiaojieyuan: require("@/assets/img/shuju/command/ico/volunteer_tiaojieyuan.png"),
        volunteer_caijiyuan: require("@/assets/img/shuju/command/ico/volunteer_caijiyuan.png"),
        volunteer_zhianxunluo: require("@/assets/img/shuju/command/ico/volunteer_zhianxunluo.png"),
        volunteer_others: require("@/assets/img/shuju/command/ico/volunteer_others.png"),
        volunteer_dangyuanzhongxinhu: require("@/assets/img/shuju/command/ico/volunteer_dangyuanzhongxinhu.png"),

        pu_0: require("@/assets/img/shuju/command/ico/pu_0.png"),
        pu_1: require("@/assets/img/shuju/command/ico/pu_1.png"),
        pu_2: require("@/assets/img/shuju/command/ico/pu_2.png"),
        pu_3: require("@/assets/img/shuju/command/ico/pu_3.png"),
        pu_4: require("@/assets/img/shuju/command/ico/pu_4.png"),
        pu_5: require("@/assets/img/shuju/command/ico/pu_5.png"),
        pu_6: require("@/assets/img/shuju/command/ico/pu_6.png"),
        pu_7: require("@/assets/img/shuju/command/ico/pu_7.png"),
      },
    };
  },

  watch: {
    categoryKeys() {
      this.requestMapDot();
    },
  },

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

  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);
      }
    },

    async requestMapDot() {
      const url = "/data/aggregator/coverage/dataList";
      let params = {
        coverageTypes: [],
        categoryKeys: this.categoryKeys,
        isPage: false,
      };

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

      if (code === 0) {
        this.dotList = data.list;
      } 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) {
      //点击小区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: "人员档案",
        };
      } 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.requestMapDot();
          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.requestMapDot();
    },

    //开启加载动画
    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/command.scss"
  scoped
></style>
