<template>
  <div class="map-view" style="height: 100%; overflow: auto">
    <div class="btns" v-if="showtype != 'home'">
      <span
        class="btn-icon"
        v-for="(item, index) in view.activities"
        :key="index"
      >
        <a
          class="1 vbtn btn btn-primary obpm-primary"
          :class="item.color"
          :title="item.name"
          autobuild="false"
          @click="handleBtn(item.type, item)"
          v-if="item.type == 2"
        >
          <i
            v-if="item.icon && item.icon.type == 'font'"
            :class="item.icon.icon"
          />
          <img
            v-else-if="item.icon"
            :src="'../../lib/icon/' + item.icon.icon"
            height="14"
          />
          <i v-else class="queryBtnicon"></i>
          {{ item.name }}
        </a>
      </span>
      <span class="routeBtn">
        <el-button
          @click.native="handleClick()"
          :type="wayValue ? 'danger' : 'success'"
          size="mini"
        >
          {{ wayValue ? $t("close_route") : $t("open_route") }}
        </el-button>
      </span>
    </div>
    <div v-if="view.mapType == 'arcgis'">
      <map_arcgis :field="undefined" id="arcgis_view" />
    </div>
    <div class="map-con" ref="mapView" v-else>
      <div class="sw">
        <el-radio-group v-model="radio" size="mini">
          <el-radio-button
            :label="$t('map')"
            @click.native="normalMap()"
          ></el-radio-button>
          <el-radio-button
            :label="$t('statellite')"
            @click.native="mixMap()"
          ></el-radio-button>
        </el-radio-group>
      </div>
      <div v-if="mapType==='tianditu'" class="mapWrap">
        <!-- <div class="localIcon" @click="locationFn"><i class="el-icon-aim"></i></div> -->
        <div id="mapDiv" class="mapBox"></div>
        <div v-if="viewDataList.data && viewDataList.data.length > 0">
          <div class="address-wrap" ref="winInfoRef">
            <div
              class="list"
              v-for="(column, inx) in view.columns"
              :key="inx"
            >
              <div class="list-item" v-if="column.fieldName == $t('addr_list')">
                {{ $t("address") }}：{{ windowInfo && windowInfo.items[column.id].value }}
              </div>
              <div class="list-item" v-else>
                {{ windowInfo && windowInfo.items[column.id].value }}
              </div>
            </div>
            <span
              class="del"
              v-if="!isReadonly"
              @click="delMarker(windowInfo)"
              >{{ $t("delete") }}</span
            >
          </div>
        </div>
      </div>
      <baidu-map
        id="box"
        :center="center"
        :zoom="zoom"
        class="bm-view"
        :mapType="currentMapType"
        @dblclick="getDbclickInfo"
        :double-click-zoom="false"
        @zoomend="zoomEnd"
        :scroll-wheel-zoom="true"
        v-else
      >
        <div v-if="viewDataList.data && viewDataList.data.length > 0">
          <div v-for="(item, index) in viewDataList.data" :key="index">
            <!-- {{item}} -->
            <!-- items[__bL2NIP9BPFEiGdFf7k2].value -->
            <bm-marker
              :position="item.local ? item.local : { lng: '', lat: '' }"
              @click="infoWindowOpen(item.id, item)"
            >
              <bm-info-window
                :show="currentShowId == item.id ? true : false"
                @close="infoWindowClose"
                style="width: 280px; height: 150px"
              >
                <div class="address-wrap">
                  <div
                    class="list"
                    v-for="(column, inx) in view.columns"
                    :key="inx"
                  >
                    <div v-if="column.fieldName == $t('addr_list')">
                      {{ $t("address") }}：{{ item.items[column.id].value }}
                    </div>
                    <div v-else>
                      {{ item.items[column.id].value }}
                    </div>
                  </div>
                  <span
                    class="del"
                    v-if="!isReadonly"
                    @click="delMarker(item)"
                    >{{ $t("delete") }}</span
                  >
                </div>
              </bm-info-window>
            </bm-marker>
          </div>
        </div>
        <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>
        <bm-geolocation
          anchor="BMAP_ANCHOR_TOP_RIGHT"
          :showAddressBar="true"
          :autoLocation="true"
          @change="change"
        >
        </bm-geolocation>

        <bm-local-search
          :keyword="location"
          :auto-viewport="true"
          style="display: none"
        >
        </bm-local-search>
        <bm-context-menu>
          <bm-context-menu-item
            :callback="setSign"
            :text="$t('sign')"
          ></bm-context-menu-item>
          <bm-context-menu-item
            :callback="cancelSign"
            :text="$t('nosign')"
          ></bm-context-menu-item>
          <bm-context-menu-item
            :callback="enlargeMap"
            :text="$t('enlarge')"
          ></bm-context-menu-item>
          <bm-context-menu-item
            :callback="reduceMap"
            :text="$t('shrink')"
          ></bm-context-menu-item>
        </bm-context-menu>
      </baidu-map>
    </div>
    <!-- :style="{ width : pendingContentW}" -->
    <div class="num" v-if="view.showTotalRow">
      {{ $t("total") }}：{{ row_count }}
    </div>
  </div>
</template>

<script>
import gcoord from "gcoord";
import map_arcgis from "@/components/map_arcGIS.vue";
export default {
  inject: ["reload"],
  name: "view-mapview",
  props: ["view", "info", "openParams", "showtype", "includeDisplayType"],
  components: {
    map_arcgis,
  },
  data: function () {
    return {
      mapType: 'tianditu',
      tiandiMap: null,
      windowInfo: null,
      center: {
        lng: 113.261503,
        lat: 23.131377,
      },
      zoom: 14,
      isActive: false,
      currentMapType: "BMAP_NORMAL_MAP",
      currentLongitude: "",
      currentLatitude: "",
      keyword: "",
      location: "",
      show: false,
      markerPoint: {},
      markerAdress: "",
      adressTitle: "",
      adressContent: "",
      markerHidden: true,
      viewDataList: "",
      markerList: [],
      localDetail: "",
      id: "",
      pendingContentH: "",
      pendingContentW: "",
      row_count: "",
      wayValue: false,
      tableData: [],
      currentShowId: "",
      radio: "地图",
      isReadonly: false,
    };
  },

  mounted() {
    let view = this.view;
    if (view.mapType != "arcgis") {
      let iType = this.includeDisplayType;
      if (
        view.readonly ||
        (iType &&
          (iType == Constant.PermissionType_READONLY ||
            iType == Constant.PermissionType_DISABLED))
      ) {
        //只读或者包含元素为只读，视图都要只读
        this.isReadonly = true;
      }
      this.getData();
      this.$nextTick(function () {
        if (this.$refs.mapView) {
          this.pendingContentH =
            document.documentElement.clientHeight -
            this.$refs.mapView.getBoundingClientRect().top;
          this.pendingContentW =
            document.getElementsByClassName("map-view")[0].offsetWidth + "px";
        }
      });
    }
  },
  methods: {
    // 天地图初始化
    initTiandiMap() {
      this.tiandiMap = new T.Map('mapDiv');
      const lnglat = new T.LngLat(116.40969,39.89945);
      this.tiandiMap.centerAndZoom(lnglat,12);
      const control = new T.Control.Zoom();
      control.setPosition(T_ANCHOR_BOTTOM_RIGHT);
      this.tiandiMap.addControl(control);
      this.addTiandiMarker();
    },
    // 添加天地图marker
    addTiandiMarker() {
      const data_info = this.viewDataList.data;
      for(let i=0; i<data_info.length; i++){
        const { local } = data_info[i];
        const result = gcoord.transform(
          [local.lng, local.lat],   // 经纬度坐标
          gcoord.BD09,                   // 当前坐标系
          gcoord.WGS84,                   // 目标坐标系
        );
        const marker = new T.Marker(new T.LngLat(result[0], result[1]));
        this.tiandiMap.addOverLay(marker);
        const _this = this;
        marker.addEventListener("click", function(e){
          _this.windowInfo = data_info[i];
          _this.$refs.winInfoRef.style.display = 'block';
          const point = e.lnglat;
          const markerInfoWin = new T.InfoWindow(_this.$refs.winInfoRef, {offset: new T.Point(0, -30)});
          _this.tiandiMap.openInfoWindow(markerInfoWin, point);
        });
      }
    },
    // 定位
    locationFn() {
      const lo = new T.Geolocation();
      lo.getCurrentPosition(function (e) {
          console.log("🚀 ~ fn ~ e:", e, this.getStatus())
          if (this.getStatus() == 0){
            console.log("获取定位坐标："+e.lnglat.lat + "," + e.lnglat.lng)
          }
          if(this.getStatus() == 1){
            console.log("获取定位坐标："+e.lnglat.lat + "," + e.lnglat.lng)
          }
      });
    },
    handleClick() {
      this.wayValue = !this.wayValue;
    },
    delMarker(item) {
      let docIds = [];
      docIds.push(item.id);
      this.$confirm(this.$t("msg.delConfirm"), this.$t("tip"), {
        confirmButtonText: this.$t("msg.confirm"),
        cancelButtonText: this.$t("btns.cancel"),
        type: "warning",
      })
        .then(() => {
          this.$api.batchRemoveDocuments(this.openParams.appId, docIds, {
            onSucess: (res) => {
              if (res.data.errcode == 0) {
                this.$notify({
                  title: this.$t("success"),
                  message: "",
                  type: "success",
                });
                this.getData();
              }
            },
          });
        })
        .catch(() => {});
    },
    reloadListView() {
      this.getData();
    },
    change() {},
    handleBtn(type, item) {
      let params = {
        linkType: "00",
        appId: this.openParams.appId,
        active: true,
        name: this.$t("view.mapview"),
        actionContent: item.onActionForm,
        refreshId: this.openParams.id,
      };
      this.$emit("add-tab", params);
    },
    getData() {
      // debugger
      let view = this.view;
      let currentLocation = view.town + view.city + view.province;
      if (!currentLocation) {
        this.zoom = 4;
      }
      let that = this;
      setTimeout(() => {
        if(this.mapType !== 'tianditu') { 
          var ls = new BMap.LocalSearch("北京", {
            renderOptions: {
              map: "",
              autoViewport: true,
              selectFirstResult: false,
            },
          });
          ls.search(currentLocation);
          ls.setSearchCompleteCallback(function (rs) {
            console.log(rs);
            if (rs.Hr) {
              let point = rs.Hr[0].point;
              that.center = {
                lng: point.lng,
                lat: point.lat,
              };
            }
          });
        }

        console.log(
          this.openParams.appId,
          this.view.id,
          "_____________________"
        );

        this.$api.getViewData(
          this.openParams.appId,
          this.view.id,
          {},
          {},
          {
            onSucess: (res) => {
              let viewData = res.data.data;
              this.row_count = viewData.row_count;
              // let map = new BMap.Map();
              // let myGeo = new BMap.Geocoder();
              let view = this.view;
              console.log(
                view,
                viewData,
                "###################################"
              );

              let jk = "",
                wk = "";

              try {
                for (let j = 0; j < view.columns.length; j++) {
                  if (view.columns[j].fieldName == "ATTENDANCESITELONGITUDE") {
                    jk = view.columns[j].id;
                  }
                  if (view.columns[j].fieldName == "ATTENDANCESITELATITUDE") {
                    wk = view.columns[j].id;
                  }
                }

                if (jk && wk) {
                  for (let j = 0; j < viewData.data.length; j++) {
                    viewData.data[j].local = {
                      lng: viewData.data[j].items[jk].value,
                      lat: viewData.data[j].items[wk].value,
                    };
                  }
                }
              } catch (error) {
                console.log(error);
              }

              if(this.mapType === 'tianditu') {
                this.viewDataList = viewData;
                this.initTiandiMap();
              }else{
                this.$nextTick(() => {
                  setTimeout(() => {
                    this.viewDataList = viewData;
                    console.log(
                      this.viewDataList,
                      "###############%@#%@#%@#%@#%#@"
                    );
                    this.$forceUpdate();
                  }, 2000);
                });
              }

            },
          }
        );
      }, 500);
    },

    //地图定位精确方法
    /**
     * WGS84转GCj02
     * @param lng
     * @param lat
     * @returns {*[]}
     */
    wgs84togcj02(lng, lat) {
      let that = this;
      // let x_PI = 3.14159265358979324 * 3000.0 / 180.0;
      let PI = 3.1415926535897932384626;
      let a = 6378245.0;
      let ee = 0.00669342162296594323;
      if (that.out_of_china(lng, lat)) {
        return [lng, lat];
      } else {
        let dlat = that.transformlat(lng - 105.0, lat - 35.0);
        let dlng = that.transformlng(lng - 105.0, lat - 35.0);
        let radlat = (lat / 180.0) * PI;
        let magic = Math.sin(radlat);
        magic = 1 - ee * magic * magic;
        let sqrtmagic = Math.sqrt(magic);
        dlat = (dlat * 180.0) / (((a * (1 - ee)) / (magic * sqrtmagic)) * PI);
        dlng = (dlng * 180.0) / ((a / sqrtmagic) * Math.cos(radlat) * PI);
        let mglat = lat + dlat;
        let mglng = lng + dlng;
        return [mglng, mglat];
      }
    },
    /**
     * 火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的转换
     * 即谷歌、高德 转 百度
     * @param lng
     * @param lat
     * @returns {*[]}
     */
    gcj02tobd09(lng, lat) {
      // let that = this
      let x_PI = (3.14159265358979324 * 3000.0) / 180.0;
      // let PI = 3.1415926535897932384626;
      // let a = 6378245.0;
      // let ee = 0.00669342162296594323;
      let z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * x_PI);
      let theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * x_PI);
      let bd_lng = z * Math.cos(theta) + 0.0065;
      let bd_lat = z * Math.sin(theta) + 0.006;
      return [bd_lng, bd_lat];
    },

    transformlat(lng, lat) {
      // let x_PI = 3.14159265358979324 * 3000.0 / 180.0;
      let PI = 3.1415926535897932384626;
      // let a = 6378245.0;
      // let ee = 0.00669342162296594323;
      let ret =
        -100.0 +
        2.0 * lng +
        3.0 * lat +
        0.2 * lat * lat +
        0.1 * lng * lat +
        0.2 * Math.sqrt(Math.abs(lng));
      ret +=
        ((20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) *
          2.0) /
        3.0;
      ret +=
        ((20.0 * Math.sin(lat * PI) + 40.0 * Math.sin((lat / 3.0) * PI)) *
          2.0) /
        3.0;
      ret +=
        ((160.0 * Math.sin((lat / 12.0) * PI) +
          320 * Math.sin((lat * PI) / 30.0)) *
          2.0) /
        3.0;
      return ret;
    },

    transformlng(lng, lat) {
      // let x_PI = 3.14159265358979324 * 3000.0 / 180.0;
      let PI = 3.1415926535897932384626;
      // let a = 6378245.0;
      // let ee = 0.00669342162296594323;
      let ret =
        300.0 +
        lng +
        2.0 * lat +
        0.1 * lng * lng +
        0.1 * lng * lat +
        0.1 * Math.sqrt(Math.abs(lng));
      ret +=
        ((20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) *
          2.0) /
        3.0;
      ret +=
        ((20.0 * Math.sin(lng * PI) + 40.0 * Math.sin((lng / 3.0) * PI)) *
          2.0) /
        3.0;
      ret +=
        ((150.0 * Math.sin((lng / 12.0) * PI) +
          300.0 * Math.sin((lng / 30.0) * PI)) *
          2.0) /
        3.0;
      return ret;
    },

    /**
     * 判断是否在国内，不在国内则不做偏移
     * @param lng
     * @param lat
     * @returns {boolean}
     */
    out_of_china(lng, lat) {
      return (
        lng < 72.004 || lng > 137.8347 || lat < 0.8293 || lat > 55.8271 || false
      );
    },

    handler({ BMap, map }) {
      this.center.lng = 113.261503;
      this.center.lat = 23.131377;
      this.zoom = 9;
    },
    zoomEnd(e) {
      console.log(e);
      this.zoom = e.target.getZoom();
    },
    //右键放大
    enlargeMap(e) {
      this.center = {
        lng: e.point.lng,
        lat: e.point.lat,
      };
      this.zoom = this.zoom + 2;
      if (this.zoom >= 19) {
        this.zoom = 19;
      }
      console.log(this.zoom);
    },
    //右键缩小
    reduceMap(e) {
      this.center = {
        lng: e.point.lng,
        lat: e.point.lat,
      };
      this.zoom = this.zoom - 2;
      if (this.zoom <= 0) {
        this.zoom = 1;
      }
    },
    setSign(e) {
      let mLng = e.point.lng,
        mLat = e.point.lat;
      this.setMark(mLng, mLat);
    },
    cancelSign({ BMap, map }) {
      //有问题，隐藏
      this.markerHidden = false;
      console.log(BMap);
      console.log(map);
    },
    infoWindowClose() {
      this.currentShowId = "";
      // this.show = false;
    },
    infoWindowOpen(id) {
      this.currentShowId = id;
      this.show = true;
    },
    getDbclickInfo(e) {
      let mLng = e.point.lng,
        mLat = e.point.lat;
      this.setMark(mLng, mLat);
    },
    normalMap() {
      if (this.currentMapType == "BMAP_HYBRID_MAP") {
        this.currentMapType = "BMAP_NORMAL_MAP";
        this.tiandiMap.setMapType(window.TMAP_NORMAL_MAP);
      }
    },
    mixMap() {
      if (this.currentMapType == "BMAP_NORMAL_MAP") {
        this.currentMapType = "BMAP_HYBRID_MAP";
        this.tiandiMap.setMapType(window.TMAP_HYBRID_MAP);
      }
    },
    searchLocation() {
      this.location = this.keyword;
    },
    searchBox(e) {
      this.isActive = !this.isActive;
      console.log(e);
    },
    Delete(id) {
      let that = this;
      console.log("删除", id);
      let arr = [];
      arr.push(id);
      this.$api.batchRemoveDocuments(this.openParams.appId, arr, {
        onSucess: () => {
          Toast({
            message: this.$t("msg.es"),
            iconClass: "fa fa-check fa-2x",
          });
          that.reload();
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.mapBox {
  width: 95%;
  height: 555px;
  margin: auto;
  z-index: 1;
}
.address-wrap {
  display: none;
}
::v-deep .tdt-infowindow-content {
  min-width: 360px !important;
}
.list-item {
  // height: auto !important;
  white-space: normal !important;
  line-height: normal !important;
}
.mapWrap {
  position: relative;
  .localIcon{
    position: absolute;
    right: 60px;
    top: 30px;
    z-index: 2;
    i {
      font-size: 24px;
      cursor: pointer;
    }
  } 
}
</style>
