<template>
  <!-- :style="{ width: aWidth + 'px', height: aHeight + 'px' }"
        :style="{
                transform: `translate(-${translateX}px, -${translateY}px)`,
            }" -->
  <div class="amap-wai">
    <div class="amap-box" :id="amapId"></div>
    <div class="custom-info" v-show="isShowInfo">
      <div class="custom">
        <div class="title_info">
          <div class="title_name">{{ title }}</div>
          <div class="title_num">
            <div style="color: #fff">已上报</div>
            <div class="sb_num_txt">
              <span style="font-size: 28px; margin: 0 5px">{{ total }}</span
              >件
            </div>
          </div>
        </div>
        <div class="con_info">
          <!-- <el-table :data="listData" class="info_table" height="80%">
            <el-table-column  align="center" prop="firstRegTime" label="初登日期">
              <template slot-scope="scope">{{scope.row.firstRegTime.slice(0,-9)}}</template>
            </el-table-column>
            <el-table-column  align="center" prop="disputeName"  show-overflow-tooltip label="诉求类型"></el-table-column>
            <el-table-column  align="center" prop="username" label="来访人姓名"></el-table-column>
          </el-table> -->
          <div class="con_info_top">
            <div class="con_tit">初登日期 </div>
            <span class="line_tit">|</span>
            <div class="con_tit">诉求类型</div>
            <span class="line_tit">|</span>
            <div class="con_tit">来访人姓名</div>
            <span class="line_tit">|</span>
            <div class="con_tit">越级级别</div>
          </div>
          <div
            class="con_info_con"
            v-infinite-scroll="load"
            :infinite-scroll-disabled="isDisabled"
            infinite-scroll-immediate="false"
            style="overflow: auto"
          >
            <div class="con_item" v-for="item in listData" :key="item.username">
              <div class="item_txt">
                {{ item.firstRegTime ? item.firstRegTime.slice(0, -9) : "" }}
              </div>
              <div class="item_txt">
                <el-tooltip effect="dark" :content="item.disputeName" placement="top">
                  <div>
                    {{
                      item.disputeName
                        ? item.disputeName.length > 5
                          ? item.disputeName.slice(0, 5) + "..."
                          : item.disputeName
                        : ""
                    }}
                  </div>
                </el-tooltip>
              </div>
              <div class="item_txt">
                <el-tooltip effect="dark" :content="item.username" placement="top">
                  <div>
                    {{
                      item.username
                        ? item.username.length > 5
                          ? item.username.slice(0, 5) + "..."
                          : item.username
                        : ""
                    }}
                  </div>
                </el-tooltip>
              </div>
              <div class="item_txt" :class="item.skipGrantLevel == 0 ? 'center' : item.skipGrantLevel == 1 ? 'pro' : item.skipGrantLevel == 2 ? 'city' : item.skipGrantLevel == 3 ? 'district' : ''">
                {{ item.skipGrantLevel ? item.skipGrantLevel == 0 ? '中央' : item.skipGrantLevel == 1 ? '省级' : item.skipGrantLevel == 2 ? '市级' : item.skipGrantLevel == 0 ? '区县' : '' : '' }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="cancel" @click="closeInfo1">
        <img src="@/assets/img/cancel.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
let communityData = [];

import AMapLoader from "@amap/amap-jsapi-loader";
import { getZoom, callFuncInMain, ifIframe } from "@/libs/util";
import { queryImmediateList, getStreetList } from "@/api/home";
import {
  mapView1,
  mapView2,
  createAMap,
  addJiaozhouMaker,
  addQingdao,
  addJiaozhou,
  addJiedao,
  addNullJiedao,
  addWangge3,
  addWangge4,
  addJiaozhouTexts,
  addQingDaoTexts,
  addWanggeMakers,
  addWangge31,
  addWangge41,
  resetGroup3Style,
  resetGroup4Style,
  hideWanggeAll,
  resetGroup2Style,
  deleteWanggeAll,
  addJiaozhouLabelMarker,
  deleteWangge2,
  addShequ,
} from "@/libs/amap";
import {
  selectedWanggeLevel$,
  selectedJiaozhou$,
  selectedStreet$,
  selectedWangge3$,
  selectedWangge4$,
  hotMapType$,
  selectedModelInfo$,
} from "@/subjects/sub";
import { Divider } from "element-ui";

export default {
  name: "index",
  props: {
    reliData: Array,
    active: Number,
    timePicker:Array,
    timeFrame:Number
  },
  data() {
    return {
      listData: [],
      streetData: [],
      amapId: !ifIframe() ? "amap-id-click" : "amap-id",
      aWidth: 1920,
      aHeight: 1080,

      winWidth: 1920,
      winHeight: 1080,

      translateX: 0,
      translateY: 0,
      amap: null,
      ob: null,
      ob1: null,
      rankList: {},
      rankData: {},
      markersArr: [],
      total: "",
      pointMarker:[
        {name:"胶东国际机场",position:[120.093607,36.35991],right:-35},
        // {name:"上合示范区",position:[120.098588,36.168966],right:-30},
        {name:"大沽河旅游度假区",position:[120.084662,36.251657],right:-55},
      ],
      markers: [
        {
          name: "洋河镇",
          position: [119.945718, 36.136799], //洋河镇
          offset: [-100, -60],
        },
        {
          name: "铺集镇",
          position: [119.726968, 36.126774], //铺集镇
          offset: [-80, -120],
        },
        {
          name: "里岔镇",
          position: [119.788636, 36.070297], //里岔镇
          offset: [20, -150],
        },
        {
          name: "胶西街道",
          position: [119.920687, 36.26026], //胶西街道
          offset: [-80, -80],
        },
        {
          name: "九龙街道",
          position: [120.080354, 36.20667], //九龙街道
          offset: [-20, -45],
        },
        {
          name: "中云街道",
          position: [120.002198, 36.28424], //中云街道
          offset: [-110, -50],
        },
        {
          name: "阜安街道",
          position: [120.015932, 36.284843], //阜安街道
          offset: [-60, -100],
        },
        {
          name: "三里河街道",
          position: [120.003466, 36.267643], //三里河街道
          offset: [30, -65],
        },
        {
          name: "胶东街道",
          position: [120.097643, 36.310525], //胶东街道
          offset: [-100, -120],
        },
        {
          name: "胶北街道",
          position: [119.965759, 36.362683], //胶北街道
          offset: [-50, -130],
        },
        {
          name: "胶莱街道",
          position: [120.070996, 36.443059], //胶莱街道
          offset: [-40, -90],
        },
        {
          name: "李哥庄镇",
          position: [120.158927, 36.352635], //李哥庄镇
          offset: [-20, -90],
        },
      ],
      markers1: [
        {
          name: "洋河镇",
          position: [119.945718, 36.136799], //洋河镇
          offset: [-100, -60],
        },
        {
          name: "铺集镇",
          position: [119.726968, 36.126774], //铺集镇
          offset: [-80, -120],
        },
        {
          name: "里岔镇",
          position: [119.788636, 36.070297], //里岔镇
          offset: [20, -150],
        },
        {
          name: "胶西街道",
          position: [119.920687, 36.26026], //胶西街道
          offset: [-150, -60],
        },
        {
          name: "九龙街道",
          position: [120.080354, 36.20667], //九龙街道
          offset: [-20, -45],
        },
        {
          name: "中云街道",
          position: [120.002198, 36.28424], //中云街道
          offset: [-130, -50],
        },
        {
          name: "阜安街道",
          position: [120.015932, 36.284843], //阜安街道
          offset: [-70, -110],
        },
        {
          name: "三里河街道",
          position: [120.003466, 36.267643], //三里河街道
          offset: [30, -65],
        },
        {
          name: "胶东街道",
          position: [120.097643, 36.310525], //胶东街道
          offset: [-100, -120],
        },
        {
          name: "胶北街道",
          position: [119.965759, 36.362683], //胶北街道
          offset: [-50, -130],
        },
        {
          name: "胶莱街道",
          position: [120.070996, 36.443059], //胶莱街道
          offset: [-40, -100],
        },
        {
          name: "李哥庄镇",
          position: [120.158927, 36.352635], //李哥庄镇
          offset: [-20, -80],
        },
      ],
      strHtml: "",
      title: "",
      actived: 1,
      isShowInfo: false,
      isDisabled: false,
      timeArr:[],
      timeFra:1,
      current: 1,
      street: "",
    };
  },
  // 监听,当路由发生变化的时候执行
  watch: {
    $route: {
      handler: function (val, oldVal) {},
      // 深度观察监听
      deep: true,
    },
    reliData: {
      handler(newVal, oldVal) {
        this.rankData = newVal[0] ? newVal[0].dataList : [];
        this.rankList = newVal[0] ? newVal[0].levelList : [];

        this.isShowInfo = false;
        if (this.amap == null) {
          this.$nextTick(() => {
            this.newMap();
          });
        } else {
          this.selectedWanggeLevel2Event();
        }
      },
    },
    active: {
      handler(newVal, oldVal) {
        this.actived = newVal;
      },
    },
    timeFrame:{
      handler(newVal, oldVal) {
        this.timeFra = newVal;
      },
    },
    timePicker:{
      handler(newVal, oldVal) {
        this.timeArr = newVal;
      },
    }
  },
  mounted() {
    this.setZoom();
    window.clickMark = this.clickMark;
    window.closeInfo = this.closeInfo;

    window.addEventListener("resize", () => {
      this.setZoom();
    });
  },
  beforeUnmount() {
    this.ob?.unsubscribe();
    this.ob1?.unsubscribe();
  },
  created() {
    this.getStreet();
    // console.log('reliData ===>',)
  },
  methods: {
    load() {
      this.current++;
       if(this.timeArr.length == 0){
           queryImmediateList({ streetId: this.street.id, current: this.current, size: 10,timeFrame: this.timeFra }).then(
            (res) => {
             this.listData = this.listData.concat(res.data.records);
          if (res.data.records.length == 0) {
            this.isDisabled = true;
          }
          this.total = res.data.total;
            }
          );
        }else{
          queryImmediateList({ streetId: this.street.id, current: this.current, size: 10,startTime: this.timeArr[0] + " 00:00:00",
          endTime: this.timeArr[1] + " 23:59:59", }).then(
            (res) => {
             this.listData = this.listData.concat(res.data.records);
          if (res.data.records.length == 0) {
            this.isDisabled = true;
          }
          this.total = res.data.total;
            }
          );
        }
    },
    
    closeInfo() {
      console.log("点击关闭按钮");
      this.amap.clearInfoWindow();
    },
    closeInfo1() {
      this.isShowInfo = false;
    },
    getStreet() {
      getStreetList().then((res) => {
        this.streetData = res.data;
      });
    },
    // createInfo() {
    //   var info = document.createElement("div");
    //   info.className = "custom-info input-card content-window-card";

    //   // //可以通过下面的方式修改自定义窗体的宽高
    //   info.style.width = "350px";
    //   this.strHtml = "";
    //   for (let i = 0; i < this.listData.length; i++) {
    //     this.strHtml +=
    //       '<div class="con_item">' +
    //       '<div class="item_txt">' +
    //       this.listData[i].name +
    //       "</div>" +
    //       '<div class="item_txt">' +
    //       this.listData[i].name +
    //       "</div>" +
    //       '<div class="item_txt">' +
    //       this.listData[i].name +
    //       "</div>" +
    //       "</div>";
    //   }
    //   info.innerHTML =
    //     '<div class="custom">' +
    //     '<div class="title_info">' +
    //     '<div class="title_name">' +
    //     this.title +
    //     "</div>" +
    //     '<div class="title_num">' +
    //     '<div style="color:#fff">已上报</div>' +
    //     '<div class="sb_num_txt"><span style="font-size:20px">' +
    //     this.total +
    //     "</span>件</div>" +
    //     "</div>" +
    //     "</div>" +
    //     '<div class="con_info">' +
    //     ' <div class="con_info_top">' +
    //     '<div class="con_tit">初登日期</div>' +
    //     '<div class="con_tit">诉求类型</div>' +
    //     ' <div class="con_tit">来访人姓名</div>' +
    //     " </div>" +
    //     '<div class="con_info_con" id="content">' +
    //     this.strHtml +
    //     // '<div class="con_item" v-for="item in listData" :key="item.id">' +
    //     //   '<div class="item_txt">'+`${item.name}`+'</div>' +
    //     //   '<div class="item_txt">'+`${item.name}`+'</div>' +
    //     //   '<div class="item_txt">'+`${item.name}`+'</div>' +
    //     // "</div>" +
    //     "</div>" +
    //     "</div>" +
    //     "</div>" +
    //     '<div class="cancel" onclick="closeInfo()">';

    //   return info;
    // },
    clickMark(val) {
      if (this.actived == 3) {
        this.current = 1;
        let tmp = this.markers.find((item) => item.name == val);
        this.title = val;
        this.street = this.streetData.find((item) => item.dictValue == val);
        console.log(this.timeArr,this.timeFra)
        if(this.timeArr.length == 0){
           queryImmediateList({ streetId: this.street.id, current: this.current, size: 10,timeFrame: this.timeFra }).then(
            (res) => {
              this.listData = res.data.records;
              this.total = res.data.total;
              this.isShowInfo = true;
              //   var infoWindow = new AMap.InfoWindow({
              //     isCustom: true, //使用自定义窗体
              //     content: this.createInfo(),
              //     offset: new AMap.Pixel(16, -45),
              //   });
              // infoWindow.open(this.amap, tmp.position);
            }
          );
        }else{
          queryImmediateList({ streetId: this.street.id, current: this.current, size: 10,startTime: this.timeArr[0] + " 00:00:00",
          endTime: this.timeArr[1] + " 23:59:59", }).then(
            (res) => {
              this.listData = res.data.records;
              this.total = res.data.total;
              this.isShowInfo = true;
              //   var infoWindow = new AMap.InfoWindow({
              //     isCustom: true, //使用自定义窗体
              //     content: this.createInfo(),
              //     offset: new AMap.Pixel(16, -45),
              //   });
              // infoWindow.open(this.amap, tmp.position);
            }
          );
        }
        //
      }
    },
    // markerClick(e){
    //     console.log(e)
    // },
    newMap() {
      AMapLoader.load({
        key: this.config.amap.key, // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.GeoJSON"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.amap = createAMap(this.amapId);
          this.amap.setCenter([119.908327,36.224194]);
          this.amap.setZoom(11.3)
          // this.amap.setRotation(50, true);
          this.amap.on("complete", async () => {
            callFuncInMain("wanggeScreenComplete", "");

            this.ob = selectedWanggeLevel$.subscribe(async (key) => {
              console.log("key", key,mapView1);
              this.amap?.clearMap();
              this.clearModal();
              hideWanggeAll();
              if (key === 1) {
                this.amap.setZoomAndCenter(mapView1.zoom, mapView1.center, true);
                this.amap.setPitch(mapView1.pitch, true);
                this.amap.setRotation(mapView1.rotation, true);
                addQingdao(this.amap);
                addJiaozhou(this.amap);
                addJiaozhouMaker(this.amap);
                // addQingDaoTexts(this.amap)
              } else if (key === 2) {
                // deleteWangge2()
                // this.amap.setRotation({
                //     x: 90, y: 0, z: -50
                // });
                this.selectedWanggeLevel2Event(hotMapType$.value);
              }
            });
            //   this.ob1 = hotMapType$.subscribe((type) => {
            //     if (selectedWanggeLevel$.value === 2) {
            //       this.selectedWanggeLevel2Event(hotMapType$.value);
            //     }
            //   });
          });
          this.amap.on("click", (e) => {
            // console.log(this.amap.getCenter())
            // console.log(this.amap.getZoom())
            // console.log(this.amap.getPitch())
            // console.log(this.amap.getRotation())
            this.clearModal();
          });
        })
        .catch((e) => {
          console.log(e);
        });
    },
    // async getSecret() {
    //   const { data } = await this.$fetch.get("api/bs/secret", {});
    //   return RSAJieMi(data);
    // },
    /**
     *
     * @param {*} hotType  热力图 形式 0：按积分 1： 按数量
     */
    async selectedWanggeLevel2Event() {
      // 接口比较慢，先加载个空的,接口好了再填充一遍
      // this.addAMapWanggeLevel2({}, hotType)

      // let rankList = {}
      // if (hotType === 0) {
      //     // 获取镇街的诉求排名
      //     rankList = await this.qryMobileSuqiuKanbanList('zjd')
      //     // console.log('rankList',rankList)
      // } else {
      //     // 获取镇街的诉求排名
      //     // rankList = await this.getQrySqpm('zjd')
      // }
      // rankList = { 铺集镇: 1, 里岔镇: 4 };
      console.log("selectedWanggeLevel$.value", selectedWanggeLevel$.value);
      if (selectedWanggeLevel$.value === 2) {
        this.addAMapWanggeLevel2(this.rankList);
      }
    },
    /**
     * 添加二级网格的地图上的东西
     * @param {*} rankList
     * @param {*} hotType
     */
    addAMapWanggeLevel2(rankList) {
      console.log('hotType ==>',mapView2)
        // this.amap.setZoomAndCenter(11.3,[119.788636,36.070297], true);
        this.amap.setPitch(62, true);
        this.amap.setRotation(-20, true);
      // let latLng = new LatLng(119.726968,36.126774);
      if (this.markersArr.length !== 0) {
        this.amap.remove(this.markersArr);
      }

      let markerArr = [];
      if (this.active == 2) {
        for (let key in rankList) {
          this.markers1.map((item) => {
            if (key == item.name) {
              this.rankData.map(item1 =>{
                if(item1.name == key){
                  if(item1.value !== 0){
                      markerArr.push({
                      markerContent:
                        "<div class='green-content-marker resolve'" +
                        'onclick="clickMark(' +
                        "'" +
                        key + 
                        "'" +
                        ')"' +
                        "</div>" +
                        '   <div class="green-btn">' +
                        item1.value + '件' + ' ' + item1. resolveRate + 
                        "</div>" +
                        "</div>",
                      position: item.position,
                      offset: item.offset,
                    });
                    }
                }
              })
              
              // if (rankList[key] == 3) {
              //   for (let key1 in this.rankData) {
              //     if (key == key1) {
              //       markerArr.push({
              //         markerContent:
              //           "<div class='green-content-marker'" +
              //           'onclick="clickMark(' +
              //           "'" +
              //           key + 
              //           "'" +
              //           ')"' +
              //           "</div>" +
              //           '   <div class="green-btn">' +
              //           this.rankData[key] + '件' + 
              //           "</div>" +
              //           "</div>",
              //         position: item.position,
              //         offset: item.offset,
              //       });
              //     }
              //   }
              // } else if (rankList[key] == 2) {
              //   for (let key1 in this.rankData) {
              //     if (key1 == key) {
              //       markerArr.push({
              //         markerContent:
              //           "<div class='yellow-content-marker'" +
              //           'onclick="clickMark(' +
              //           "'" +
              //           key + 
              //           "'" +
              //           ')"' +
              //           "</div>" +
              //           '<div class="yellow-btn">' +
              //           this.rankData[key] + '件' +
              //           "</div>" +
              //           "</div>",
              //         position: item.position,
              //         offset: item.offset,
              //       });
              //     }
              //   }
              // } else if (rankList[key] == 1) {
              //   for (let key1 in this.rankData) {
              //     if (key1 == key) {
              //       markerArr.push({
              //         markerContent:
              //           "<div class='red-content-marker'" +
              //           'onclick="clickMark(' +
              //           "'" +
              //           key +
              //           "'" +
              //           ')"' +
              //           "</div>" +
              //           '   <div class="red-btn">' +
              //           this.rankData[key] + '件' +
              //           "</div>" +
              //           "</div>",
              //         position: item.position,
              //         offset: item.offset,
              //       });
              //     }
              //   }
              // }
            }
          });
        }
      } else {
        for (let key in rankList) {
          this.markers.map((item) => {
            if (key == item.name) {
              if(this.rankData[key] !== 0){
                markerArr.push({
                      markerContent:
                        "<div class='green-content-marker'" +
                        'onclick="clickMark(' +
                        "'" +
                        key +
                        "'" +
                        ')"' +
                        "</div>" +
                        '   <div class="green-btn">' +
                        this.rankData[key] +  '件' + 
                        "</div>" +
                        "</div>",
                      position: item.position,
                      offset: item.offset,
                    });
              }
               
              // if (rankList[key] == 1) {
              //   for (let key1 in this.rankData) {
              //     if (key == key1) {
              //       markerArr.push({
              //         markerContent:
              //           "<div class='green-content-marker'" +
              //           'onclick="clickMark(' +
              //           "'" +
              //           key +
              //           "'" +
              //           ')"' +
              //           "</div>" +
              //           '   <div class="green-btn">' +
              //           this.rankData[key] +  '件' + 
              //           "</div>" +
              //           "</div>",
              //         position: item.position,
              //         offset: item.offset,
              //       });
              //     }
              //   }
              // } else if (rankList[key] == 2) {
              //   for (let key1 in this.rankData) {
              //     if (key1 == key) {
              //       markerArr.push({
              //         markerContent:
              //           "<div class='yellow-content-marker'" +
              //           'onclick="clickMark(' +
              //           "'" +
              //           key +
              //           "'" +
              //           ')"' +
              //           "</div>" +
              //           '<div class="yellow-btn">' +
              //           this.rankData[key] +  '件' + 
              //           "</div>" +
              //           "</div>",
              //         position: item.position,
              //         offset: item.offset,
              //       });
              //     }
              //   }
              // } else if (rankList[key] == 3) {
              //   for (let key1 in this.rankData) {
              //     if (key1 == key) {
              //       markerArr.push({
              //         markerContent:
              //           "<div class='red-content-marker'" +
              //           'onclick="clickMark(' +
              //           "'" +
              //           key +
              //           "'" +
              //           ')"' +
              //           "</div>" +
              //           '   <div class="red-btn">' +
              //           this.rankData[key] +  '件' + 
              //           "</div>" +
              //           "</div>",
              //         position: item.position,
              //         offset: item.offset,
              //       });
              //     }
              //   }
              // }
            }
          });
        }
      }

      markerArr.forEach((marker) => {
        let markTmp = new AMap.Marker({
          map: this.amap,
          content: marker.markerContent,
          // icon: marker.icon,
          position: [marker.position[0], marker.position[1]],
          offset: new AMap.Pixel(marker.offset[0], marker.offset[1]),
        });
        this.markersArr.push(markTmp);
        //  markTmp.on('click', this.markerClick);
      });
      
      this.pointMarker.forEach(mark =>{
          let markPoint = new AMap.Text({
            map: this.amap,
            text:mark.name,
            // content:  '<div>' +
            //               '<img src="//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png" style="width:25px;height:34px;">' 
            //               + '</img>'
            //               + ' <span class="marker" style="right:'+ mark.right +'px">'+ mark.name +'</span> '
            //           + '</div>',
            // icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
            position: [mark.position[0], mark.position[1]],
            offset: new AMap.Pixel(-13, -30),
          });
      })
      // let marker = new AMap.Marker({
      //   icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
      //   position: [120.093607, 36.35991],
      //   offset: new AMap.Pixel(-13, -30),
      // });

      // // 自定义点标记内容
      // var markerContent = document.createElement("div");

      // // 点标记中的图标
      // var markerImg = document.createElement("img");
      // markerImg.className = "markerlnglat";
      // markerImg.src = "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png";
      // markerImg.setAttribute("width", "25px");
      // markerImg.setAttribute("height", "34px");
      // markerContent.appendChild(markerImg);

      // // 点标记中的文本
      // var markerSpan = document.createElement("span");
      // markerSpan.className = "marker";
      // markerSpan.innerHTML = "Hi，我被更新啦！";
      // markerContent.appendChild(markerSpan);

      // marker.setContent(markerContent);
      // marker.setMap(this.amap);
      addJiedao(this.amap, 2, rankList, this.actived);
      // addJiaozhouTexts(this.amap);
      addJiaozhouLabelMarker(this.amap);
    },
    clearModal() {
      // 点击空白处的时候,取消弹窗
      selectedJiaozhou$.next(null);
      // 取消二级
      selectedStreet$.next(null);
      resetGroup2Style();
      // 取消三级
      selectedWangge3$.next(null);
      resetGroup3Style();
      // 取消四级
      selectedWangge4$.next(null);

      selectedModelInfo$.next(null);
      resetGroup4Style();
    },
    setZoom() {
      const zoom = getZoom();
      this.aWidth = 1920 * zoom;
      this.aHeight = 1080 * zoom;

      // 设置偏移，把地图居中
      this.winWidth = window.innerWidth;
      this.winHeight = window.innerHeight;
      if (this.winWidth > this.aWidth) {
        this.translateX = (this.winWidth - this.aWidth) / 2;
      }
      if (this.winHeight > this.aHeight) {
        this.translateY = (this.winHeight - this.aHeight) / 2;
      }
    },
  },
};
</script>

<style scoped lang="scss">
@import "~@/assets/fonts/font.css";
.amap-wai {
  width: 100%;
  height: 100%;
}

::-webkit-scrollbar {
  width: 0px;
}
::v-deep .amap-icon {
  width: 100px !important;
  height: 100px !important;
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    width: 100%;
    height: 100%;
  }
}

::v-deep .custom-info {
  width: 552px;
  height: 328px;
  display: flex;
  padding-top: 20px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .custom {
    width: 90%;
    height: 100%;
    background: url("@/assets/img/dia_bag.png") no-repeat;
    background-size: 100% 100%;

    .title_info {
      width: 96%;
      height: 14%;

      /* background: red; */
      display: flex;
      /* margin-top: 20px; */
      margin: 0 auto;
      margin-top: 20px;
      align-items: center;
      justify-content: space-between;

      .title_name {
        width: 60%;
        text-align: left;
        padding-left: 15px;
        font-size: 18px;
        color: #fff;
        font-family: "ZHJT";
      }
      .title_num {
        width: 40%;
        background: url("@/assets/img/num_bag.png") no-repeat;
        display: flex;
        height: 100%;
        align-items: center;
        padding-left: 14px;
        .sb_num_txt {
          font-size: 20px;
          background-image: linear-gradient(to bottom, #92eeff, #5bcaf5);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          font-weight: bold;
          font-family: "ZHJT";
        }
        // justify-content: center;
      }
    }
    .con_info {
      width: 90%;
      height: 75%;
      margin: 0 auto;
      margin-top: 3%;

      .con_info_top {
        width: 100%;
        height: 13%;
        display: flex;
        background: url("@/assets/img/title_bag.png") no-repeat;
        background-size: 100% 100%;
        color: #47c5f0;

        .con_tit {
          width: 33%;
          display: flex;
          align-items: center;
          justify-content: center;
          
        }
        .line_tit{
            color: #fff;
            display: flex;
            align-items: center;
          }
      }
      .con_info_con {
        width: 100%;
        height: 80%;
        margin-top: 2%;

        //  分页 前文字+分页
        .pagination {
          margin-top: 23px;
          text-align: center;
          padding: 10px;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .con_item {
          width: 100%;
          height: 30px;
          background: rgba(17, 71, 96, 0.3);
          display: flex;
          align-items: center;
          color: #fff;
          margin-bottom: 5px;

          .item_txt {
            width: 33%;
            display: flex;
            align-items: center;
            justify-content: center;

//             区县：3bfffd
// 市级：1bec2a
// 省级：ffa60b
// 中央：fd3c3c
            &.center{
              color: #fd3c3c;
            }

            &.pro{
              color: #ffa60b;
            }

            &.city{
              color: #1bec2a;
            }
            &.district{
              color: #3bfffd;
            }
          }
        }
      }
    }
  }

  .cancel {
    width: 30px;
    height: 30px;
    background: url("@/assets/img/cancel.png") no-repeat;
    background-size: 100% 100%;
  }
}

::v-deep .el-table__body tr:hover > td {
  background: rgba(17, 71, 96, 0.8) !important ;
}
::v-deep .el-pagination button {
  min-width: 20px;
}
::v-deep .el-table {
  background: transparent;
  th {
    .el-table__cell {
      background: #47c5f0;
    }
  }
  tr {
    background: transparent;
  }
}

::v-deep .el-table::before {
  height: 0;
}

::v-deep .el-table th.el-table__cell {
  background: rgba(17, 71, 96, 0.8) !important;
  color: #47c5f0;
  padding: 5px 0;
  border-bottom: none !important;
}
::v-deep .el-table .el-table__cell {
  background: transparent;
  padding: 5px 0;
  border-bottom: none;
  color: #fff;
}

::v-deep .el-table th.el-table__cell > .cell {
  border-right: 1px solid #ccc !important;
  &:last-child {
    border-right: none;
  }
}

::v-deep .green-content-marker {
  width: 66px;
  height: 90px;
  background: url("@/assets/img/map.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  // align-items: center;
  justify-content: center;

  &.resolve{
    width: 112px;
    height: 90px;
    background: url("@/assets/img/map_reso.png") no-repeat;
  }
}
::v-deep .red-content-marker {
  width: 66px;
  height: 90px;
  background: url("@/assets/img/map.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  // align-items: center;
  justify-content: center;
}
::v-deep .yellow-content-marker {
 width: 66px;
  height: 90px;
  background: url("@/assets/img/map.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  // align-items: center;
  justify-content: center;
}
::v-deep .green-btn {
  font-family: "ZHJT";
  font-size: 17px;
    color: #fff;
    margin-top: 5px
  // background-image: linear-gradient(to bottom, #caffe9, #7effbb);
  // -webkit-background-clip: text;
  // -webkit-text-fill-color: transparent;
}
::v-deep .red-btn {
  font-family: "ZHJT";
  font-size: 17px;
    color: #fff;
    margin-top: 5px
  // background-image: linear-gradient(to bottom, #ffbbbb, #ff7373);
  // -webkit-background-clip: text;
  // -webkit-text-fill-color: transparent;
  // font-size: 34px;
}
::v-deep .yellow-btn {
  font-family: "ZHJT";
  font-size: 17px;
    color: #fff;
    margin-top: 5px
  // background-image: linear-gradient(to bottom, #fff0c8, #f4e05c);
  // -webkit-background-clip: text;
  // -webkit-text-fill-color: transparent;
  // font-size: 34px;
}
.amap-box {
  // position: absolute;
  // left: 0;
  // top: 0;
  width: 100%;
  height: 100%;

  // width: 100vw;
  // height: 100vh;
}
::v-deep .amap-marker {
  color: #fff !important;

  .marker {
    position: absolute;
    top: -30px;
    right: -118px;
    color: #fff;
    padding: 4px 10px;
    box-shadow: 1px 1px 1px rgba(10, 10, 10, 0.2);
    white-space: nowrap;
    font-size: 12px;
    font-family: "";
    background-color: #25a5f7;
    border-radius: 3px;
  }
}
::v-deep .amap-overlay-text-container{
    display: block;
    width: auto;
    color: #fff;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 2px 3px;
    border-radius: 3px;
    border:none;
    background: transparent;
  }
</style>
