<template>
<!-- 未用到 -->
  <div class="mapBox">
    <div class="headerBox">
      <div class="mapBack" v-if="showMapBack" @click="goBack">
        <i class="el-icon-arrow-left"></i>
      </div>
      <div class="mapTitle">
        {{ backArr.length > 0 ? backArr[backArr.length - 1].name : "集团" }}
      </div>
    </div>

    <div class="selectContainer">
      <!-- <div class="selectBox" @click="showMapDialog=!showMapDialog" v-show="backArr.length==1">城市列表 
                            <i v-show="!showMapDialog" class="el-icon-arrow-up"></i>
                            <i v-show="showMapDialog" class="el-icon-arrow-down"></i>
                        </div> -->
      <div
        class="selectBox"
        @click="showMapDialog = !showMapDialog"
        v-show="backArr.length == 2"
      >
        项目列表
        <i v-show="!showMapDialog" class="el-icon-arrow-up"></i>
        <i v-show="showMapDialog" class="el-icon-arrow-down"></i>
      </div>
      <div class="selectContent" v-show="showMapDialog">
        <vue-scroll style="height:100%">
          <div
            class="selectItem"
            @click="mapJumpToNext(index)"
            v-for="(item, index) in mapData"
            :key="index"
          >
            <p class="title">{{ item.name }}</p>
            <div class="datas">
              <div class="numBox2">
                <p>{{ item.videoNum }}</p>
                <p>视频数</p>
              </div>
              <div class="numBox2">
                <p>{{ item.ufaceDevNum }}</p>
                <p>门禁数</p>
              </div>
              <div class="numBox2" v-show="!item.projectName">
                <p>{{ item.projectNum }}</p>
                <p>项目数</p>
              </div>
            </div>
          </div>
        </vue-scroll>
      </div>
    </div>
    <div id="map"></div>
  </div>
</template>
<script>
import { getComapnyStatisticsListApi } from "@/assets/js/api/company/project";
import { getProjectDetail } from "@/assets/js/api/baseInfo.js";
export default {
  data() {
    return {
      mapObj: null,
      mapName: "",
      mapData: [],
      backArr: [],
      searchsn: "",
      showMapDialog: false,
      showMapBack: false,
      userInfo: null,
    };
  },
  mounted() {
    // console.log("sessionStorage.getItem('userInfo')",sessionStorage.getItem('userInfo'))
    // this.userInfo=sessionStorage.getItem('userInfo')
    // this.getQuery("data");
    // this.initMap();
    this.$nextTick(()=>{
        setTimeout(()=>{
            if (window.UniAppJSBridge){
                console.log("556564646464666")
            }else{
                document.addEventListener('UniAppJSBridgeReady', function() {  
                    console.log("jsbridge")
                    // uni.getEnv(function(res) {  
                    //   console.log('当前环境：' + JSON.stringify(res));  
                    // });  
                });
            }
        },2000)
    })
  },
  methods: {
    getQuery(name) {
      console.log("getQuery");
      // console.log(window.location.href)
      var data = window.location.href.split("data=")[1];
      // console.log(decodeURIComponent(data))
      this.userInfo = JSON.parse(decodeURIComponent(data));
      console.log(this.userInfo);
      this.$store.commit("setUserInfo", this.userInfo);
      this.$http.defaults.headers.common["Authorization"] =
        "Bearer" + " " + this.userInfo.token;
      // 

      //获取地图数据
      this.initData(true);
    },
    //获取所有企业下区域数据
    loadData(type) {
      //type：true代表第一调用
      // console.log('type,',type)
      getComapnyStatisticsListApi({
        sn: this.searchsn,
      }).then((res) => {
        this.mapData = res.result.companyList
          ? res.result.companyList
          : res.result.projectList;
        if (type) {
          // this.showMapBack=false
          this.backArr = [];
          // if(this.userInfo.accountType==4){
          if (res.result.parentCompany) {
            this.backArr.push({
              name: res.result.parentCompany.companyName,
              sn: res.result.parentCompany.companySn,
            });
          }
          // }
          // if(this.userInfo.accountType==3||this.userInfo.accountType==4){
          if (res.result.companyInfo) {
            this.backArr.push({
              name: res.result.companyInfo.companyName,
              sn: res.result.companyInfo.companySn,
            });
          }
          // }
          if (
            (this.backArr.length == 0 && this.userInfo.accountType == 2) ||
            (this.backArr.length == 1 && this.userInfo.accountType == 3) ||
            (this.backArr.length == 2 && this.userInfo.accountType == 4)
          ) {
            this.showMapBack = false;
          } else {
            this.showMapBack = true;
          }
        }
        if (this.mapData.length > 0) {
          this.mapObj.clearMap();
          this.setAreaMarker();
        } else {
          this.$message("该区域下没有数据！");
        }
      });
    },
    initData(type) {
      // 
      if (this.backArr.length > 0) {
        this.searchsn = this.backArr[this.backArr.length - 1].sn;
      } else {
        switch (Number(this.userInfo.accountType)) {
          case 2:
            this.searchsn = this.userInfo.headquartersSn;
            break;
          case 3:
            this.searchsn = this.userInfo.sn;
            break;
          case 4:
            this.searchsn = this.userInfo.sn;
            break;
        }
      }
      if (
        (this.backArr.length == 0 && this.userInfo.accountType == 2) ||
        (this.backArr.length == 1 && this.userInfo.accountType == 3) ||
        (this.backArr.length == 2 && this.userInfo.accountType == 4)
      ) {
        this.showMapBack = false;
      } else {
        this.showMapBack = true;
      }
      if (this.backArr.length == 3) {
        this.getProjectDetail();
      } else {
        this.loadData(type);
      }
    },
    //获取项目详细
    getProjectDetail() {
      let data = {
        projectSn: this.searchsn,
      };
      getProjectDetail(data).then((res) => {
        if (res.code == 200) {
          if (res.result) {
            this.mapData = [res.result];
            this.mapObj.clearMap();
            this.setAreaMarker();
          }
        }
      });
    },
    initMap() {
      //地图加载
      this.mapObj = new AMap.Map("map", {
        resizeEnable: true,
      });
    },
    goBack() {
      // 
      if (this.backArr.length == 1) {
        this.backArr = [];
      } else {
        this.backArr = this.backArr.splice(0, this.backArr.length - 1);
      }
      this.initData();
    },
    setAreaMarker() {
      var _this = this;
      this.mapData.forEach((element) => {
        var marker = new AMap.Marker({
          position: [element.longitude, element.latitude],
          size: new AMap.Size(230, 43), //图标大小
          imageSize: new AMap.Size(230, 43),
        });
        var htmls = "";
        if (!element.projectName) {
          htmls = `<div class='datas'>
                            <p class='num'>${element.projectNum} 项目</p>
                        </div>`;
        }
        marker.setLabel({
          offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
          // content: `<div class='mapInfo'>
          //                <div class='areaName datas'>${element.name}</div>${htmls}
          //                     <div class='datas'><p class='num'>${element.videoNum}</p>
          //                     <p class='text'>${this.$t('message.firmProject.marker.videoNum')}</p>
          //                     </div>
          //                     <div class='datas'><p class='num'>${element.ufaceDevNum}</p>
          //                     <p class='text'>${this.$t('message.firmProject.marker.guardNum')}</p>
          //                </div>
          //            </div>`,
          content: `<div class='mapInfo'>
                                       <div class='areaName datas'>${element.name}</div>${htmls}
                                   </div>`,
          direction: "center", //设置文本标注方位
        });
        marker.setMap(this.mapObj);
        this.mapObj.setFitView();
      });
      this.$nextTick(() => {
        setTimeout(() => {
          var infoList = document.getElementsByClassName("mapInfo");
          infoList.forEach((element, index) => {
              if (!_this.mapData[0].projectName) {
                  element.addEventListener("click", function () {
                        _this.mapJumpToNext(index);
                    });
              }else{
                //   document.addEventListener('UniAppJSBridgeReady', function() {
                     element.addEventListener("click", function () {
                        console.log("点击项目名称");
                        uni.navigateTo({
                            url: "/pages/projectManage/projectManage",
                        });
                    
                    });
                //   });
              }
            
          });
        }, 1000);
      });
    },
    //地图跳转到下一级
    mapJumpToNext(index) {
      var _this = this;
      if (_this.mapData[index].list) {
        var json = {
          sn: _this.mapData[index].companySn,
          name: _this.mapData[index].name,
        };
        _this.backArr.push(json);
        _this.showMapDialog = false;
        _this.initData();
      } else {
        if (_this.mapData[index].projectName && _this.backArr.length < 3) {
          var json = {
            sn: _this.mapData[index].projectSn,
            name: _this.mapData[index].name,
          };
          _this.backArr.push(json);
          _this.showMapDialog = false;
          _this.initData();
        } else {
          _this.$message("该区域下没有数据！");
        }
      }
    },
  },
};
</script>
<style lang="less" scoped>
.mapBox {
  height: calc(100% - 52px);
}
#map {
  height: 100%;
}
/deep/ .amap-marker-label {
  background-color: @--color-primary;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  max-width: 230px;
  min-width: 120px;
  .mapInfo {
    background-color: @--color-primary;
    // display: flex;
    text-align: center;
    padding: 5px 0;
    cursor: pointer;
    // .datas {
    //     flex: 1;
    //     text-align: center;
    //     align-self: center;
    // }
    .areaName {
      // display: block;
      // align-items: center;
      // justify-content: center;
      // border-right: 1px solid #ddd;
      padding-bottom: 5px;
      white-space: normal;
      font-size: 15px;
      font-weight: bold;
    }
  }
}
.mapTitle {
  font-size: 18px;
  background-color: rgb(255, 255, 255);
  color: #262d47;
  text-align: center;
  line-height: 48px;
}
.mapBack {
  width: 30px;
  height: 30px;
  // border-radius: 50%;
  font-size: 25px;
  color: #262d47;
  padding: 9px;
  position: absolute;
  // background-color: rgba(0, 0, 0, 0.5);
  // z-index: 9999;
  text-align: center;
  // line-height: 30px;
  cursor: pointer;
}
.selectBox {
  position: absolute;
  right: 10px;
  top: 9px;
  color: @--color-primary;
  font-size: 12px;
  background-color: #fff;
  text-align: center;
  width: 80px;
  height: 30px;
  line-height: 30px;
  border-radius: 10px;
  z-index: 9999;
  cursor: pointer;
}
.selectContent {
  padding: 10px;
  box-sizing: border-box;
  font-size: 14px;
  background-color: #fff;
  width: 230px;
  height: calc(100% - 60px);
  top: 50px;
  right: 10px;
  position: absolute;
  z-index: 9999;
  .selectItem {
    cursor: pointer;
  }
  .title {
    margin: 10px 0 5px;
    font-weight: 600;
  }
  .datas {
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 12px;
    height: 40px;
    background-color: #fbfbfb;
    .numBox2 {
      p:first-child {
        color: @--color-primary;
      }
    }
  }
}
</style>