<template>
  <div class="content">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>订单热力图</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <el-card shadow="hover" style=" margin-top:10px">
      <el-form :inline="true" size="small" v-model="listQuery3">
        <el-form-item label="城市">
          <el-select v-model="listQuery3.city" clearable placeholder="请选择城市" @change="cityChange3">
            <el-option v-for="(item, index) in cityList" :key="index" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="服务站">
          <el-select v-model="listQuery3.serviceStation" clearable placeholder="请选择服务站">
            <el-option v-for="(item, index) in stationList3" :key="index" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="门店">
          <el-select v-model="listQuery3.shopName" clearable placeholder="请选择门店">
            <el-option v-for="(item, index) in shopList3" :key="index" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="开始日期">
          <el-date-picker v-model="listQuery3.createTime" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" value-format="yyyy-MM-dd" :picker-options="pickerOptions"
            @change="dateChange3"></el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="getOrderHeatMap">查询</el-button>
        </el-form-item>
      </el-form>
      <div id="container" class="map"></div>
    </el-card>
  </div>
</template>

<script>
import moment from "moment";
import Service from "../script/api/service";
import globalData from "@/components/common/globaldata/global.data.vue";
export default {
  name: "saleGmv",
  data() {
    return {
      map: "",
      count: "",
      cityList: [],
      allStationList: [],
      listQuery3: {
        city: "",
        serviceStation: "",
        shopName: "",
        createTime: []
      },
      stationList3: [],
      shopList3: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近半个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 15);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },

    };
  },
  mounted() {
    this.cityList = JSON.parse(window.localStorage.getItem("allHmCity"));

    this.listQuery3.city = this.cityList[0];
    this.allStationList = JSON.parse(
      window.localStorage.getItem("allHmStation")
    );

    this.cityChange3(this.listQuery3.city);
    let currentTime = new Date().getTime();
    let currentDate = this.formateDay(
      new Date(currentTime - 3600 * 1000 * 24 * 1)
    );

    let startDate = this.formateDay(
      new Date(currentTime - 3600 * 1000 * 24 * 14)
    );
    let startDate2 = this.formateDay(
      new Date(currentTime - 3600 * 1000 * 24 * 30)
    );
    let startDate3 = this.formateDay(
      new Date(currentTime - 3600 * 1000 * 24 * 14)
    );
    let beginMonth = this.formateMonth(
      new Date(currentTime - 3600 * 1000 * 24 * 365)
    );
    let endMonth = this.formateMonth(new Date());
    let today = new Date();
    let year = today.getFullYear();
    let month = today.getMonth() + 1;
    month = month >= 10 ? month : "0" + month;

    this.current = year + "-" + month;
    //  this.listQuery3.createTime = [startDate2, currentDate];
    this.listQuery3.createTime = [startDate3, currentDate];

    this.getOrderHeatMap();

  },
  methods: {

    formatNumber(nStr) {
      nStr += ""; //数字转换为字符
      let x, x1, x2;
      if (nStr.indexOf(".") != -1) {
        x = nStr.split("."); //按照小数点分隔
        x1 = x[0]; //整数部分
        x2 = x.length > 1 ? "." + x[1] : ""; //小数部分
      } else {
        x1 = nStr;
        x2 = "";
      }

      const rgx = /(\d+)(\d{3})/; //正则式定义
      while (rgx.test(x1)) {
        //正则式匹配
        x1 = x1.replace(rgx, "$1" + "," + "$2"); //正则式替换
      }
      return x1 + x2;
    },


    dateChange3(e) {
      if (e != null) {
        let start = new Date(e[0]).getTime();
        let end = new Date(e[1]).getTime();
        let isOvertime = end - start - 3600 * 1000 * 24 * 365 > 0;
        if (isOvertime) {
          this.$message.warning("选中时间范围不能超过一年");
          this.listQuery3.createTime = null;
        }
      }
    },


    cityChange3(value) {
      // console.log(value);
      this.listQuery3.serviceStation = "";
      this.listQuery3.shopName = "";
      let currentStation = this.allStationList.filter(item => {
        return item.city == value;
      });

      this.stationList3 = currentStation[0].station_names.split(",");
      this.shopList3 = currentStation[0].shop_names.split(",");
    },

    getCityLngLat(city) {
      let center = [121.47102, 31.229203];
      switch (city) {
        case '上海':
          center = [121.47102, 31.229203];
          break;
        case '北京':
          center = [116.720996, 39.903666];
          break;
        case '深圳':
          center = [114.05522, 22.542207];
          break;
        case '南京':
          center = [118.665131, 31.930355];
          break;
        case '苏州':
          center = [120.58053, 31.302569];
          break;
        case '杭州':
          center = [120.20805, 30.247872];
          break;
        default:
          center = [121.47102, 31.229203];
      }
      return center;

    },
    initHotMap(points, district, city) {
      var points = points;
      var district = district;
      let map;
      if (city == '') {
        map = new AMap.Map("container", {
          zoom: 9,
          animateEnable: true,
          mapStyle: "amap://styles/grey",
        });
      } else {
        let center = this.getCityLngLat(city);
        map = new AMap.Map("container", {
          zoom: 9,
          animateEnable: true,
          mapStyle: "amap://styles/grey",
          center: center,
          // center: [116.720996,39.903666],//北京
          // center: [114.05522, 22.542207],//深圳
          // center: [121.47102, 31.229203],//上海
          //  center: [118.665131, 31.930355],//南京
          //  center: [120.20805, 30.247872],//杭州
          //  center: [120.58053, 31.302569],//苏州
        });
      }

      var count = points.length;
      function clusterMarkers() {
        var markerList = [];
        var marker = new AMap.Marker({
          map: map
        });
        markerList.push(marker);
        return markerList;
      }
      var clusterIndexSet = {
        city: {
          minZoom: 2,
          maxZoom: 10
        },
        district: {
          minZoom: 10,
          maxZoom: 12
        },
        area: {
          minZoom: 12,
          maxZoom: 15
        },
        community: {
          minZoom: 15,
          maxZoom: 22
        }
      };
      function getStyle(context) {
        var clusterData = context.clusterData; // 聚合中包含数据
        var index = context.index; // 聚合的条件
        var count = context.count; // 聚合中点的总数
        var marker = context.marker; // 聚合绘制点 Marker 对象
        var color = ["8,60,156", "66,130,198", "107,174,214", "78,200,211"];
        var indexs = ["city", "district", "area", "community"];
        var i = indexs.indexOf(index["mainKey"]);
        var text = clusterData[0][index["mainKey"]];
        var size = Math.round(40 + Math.pow(count / points.length, 1 / 5) * 70);
        if (i <= 2) {
          var extra = '<span class="showCount">' + context.count + "次</span>";
          text = '<span class="showName">' + text + "</span>";
          text += extra;
        } else {
          // size = 12 * text.length + 20;
          var extra = '<span class="showCount">' + context.count + "次</span>";
          text = '<span class="showName">' + text + "</span>";
          text += extra;
          size = 140;
        }
        var style = {
          bgColor: "rgba(" + color[i] + ",.8)",
          borderColor: "rgba(" + color[i] + ",1)",
          text: text,
          size: size,
          index: i,
          color: "#ffffff",
          textAlign: "center",
          boxShadow: "0px 0px 5px rgba(0,0,0,0.8)"
        };
        return style;
      }
      function getPosition(context) {
        var key = context.index.mainKey;
        var dataItem = context.clusterData && context.clusterData[0];
        var districtName = dataItem[key];
        if (!district[districtName]) {
          return null;
        }
        var center = district[districtName].center.split(",");
        var centerLnglat = new AMap.LngLat(center[0], center[1]);
        return centerLnglat;
      }
      function _customRender(data) {
        const keys = Object.keys(data.clusterData);
        let markers = [];
        for (var i = 0; i < keys.length; i++) {
          var key = keys[i];
          var cluster = data.clusterData[key];
          var position = cluster.data[0].lnglat;
          var marker = new AMap.LabelMarker({
            position: position,
            text: {
              content: cluster.data.length.toString(),
              style: {
                fillColor: "#ffffff"
              }
            }
          });
          markers.push(marker);
        }
        return {
          type: "type",
          layer: null,
          markers: markers
        };
      }
      // 自定义聚合点样式
      function _renderClusterMarker(context) {
        var clusterData = context.clusterData; // 聚合中包含数据
        var index = context.index; // 聚合的条件
        var count = context.count; // 聚合中点的总数
        var marker = context.marker; // 聚合点标记对象
        var styleObj = getStyle(context);
        // 自定义点标记样式
        var div = document.createElement("div");
        div.className = "amap-cluster";
        div.style.backgroundColor = styleObj.bgColor;
        div.style.width = styleObj.size + "px";
        if (styleObj.index <= 2) {
          div.style.height = styleObj.size + "px";
          // 自定义点击事件
          context.marker.on("click", function (e) {
            console.log(e);
            var curZoom = map.getZoom();
            if (curZoom < 20) {
              curZoom += 1;
            }
            map.setZoomAndCenter(curZoom, e.lnglat);
          });
        }
        div.style.border = "solid 1px " + styleObj.borderColor;
        div.style.borderRadius = styleObj.size + "px";
        div.innerHTML = styleObj.text;
        div.style.color = styleObj.color;
        div.style.textAlign = styleObj.textAlign;
        div.style.boxShadow = styleObj.boxShadow;
        context.marker.setContent(div);
        // 自定义聚合点标记显示位置
        var position = getPosition(context);
        if (position) {
          context.marker.setPosition(position);
        }
        context.marker.setAnchor("center");
      }

      var cluster = new AMap.IndexCluster(map, points, {
        renderClusterMarker: _renderClusterMarker,
        clusterIndexSet: clusterIndexSet
      });
    },
    getOrderHeatMap() {
      if (this.isEmptyObjVue(this.listQuery3.createTime)) {
        this.$message.warning("请选择日期");
        return false;
      }

      let params = {
        startTime: !this.isEmptyObjVue(this.listQuery3.createTime)
          ? this.listQuery3.createTime[0]
          : "",
        endTime: !this.isEmptyObjVue(this.listQuery3.createTime)
          ? this.listQuery3.createTime[1]
          : "",
        city: this.listQuery3.city,
        serviceStation: this.listQuery3.serviceStation,
        shopName: this.listQuery3.shopName
      };

      Service.$axiosOrderHeatMap(params).then(res => {
        if (res.data.errno == 0) {
          let points = res.data.data.points;
          // let district=res.data.data.district;
          let district = JSON.parse(res.data.data.district);

          this.initHotMap(points, district, this.listQuery3.city);
        } else {
          this.$message.warning(res.data.errmsg);
        }
      });
    },
    requestFullscreen() {
      const docElm = document.documentElement
      if (docElm.requestFullscreen) {
        docElm.requestFullscreen()
      } else if (docElm.msRequestFullscreen) {
        docElm.msRequestFullscreen()
      } else if (docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen()
      } else if (docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen()
      }
    },
    exitFullScreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen()
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen()
      }
    },



  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.crumbs {
  margin: 0 0 10px 0;
}

#finishCircle {
  min-width: 300px;
  min-height: 300px;
  margin: -30px auto;
  /* padding: 20px; */
}

h1,
h2 {
  font-weight: normal;
}

.el-card {
  overflow-x: scroll;
  min-width: 1200px;
  border-radius: 8px;
}

.module-wrapper {
  display: flex;
  min-width: 1200px;
  justify-content: space-between;
  margin-bottom: 10px;
}

.card-left {
  flex: 1;
  margin-right: 10px;
}

.card-right {
  flex: 1;
}

#mainChart,
#mainChart1,
#mainChart2 {
  /* min-width: 900px; */
  height: 600px;
  margin: 0 auto;
  padding: 10px;
}

.gmv-board,
.sale-board {
  margin: 0 0 10px;
  min-width: 1200px;
}

/* .sale-board {
  height: 300px;
  overflow-y: scroll;
} */
.stock-table {
  height: 300px;
  overflow-y: scroll;
}

.card-module {
  border-radius: 8px;
  background: #fff;
  padding: 20px;
  border: 1px solid #ebeef5;
}

.gmv-board {
  display: flex;
  justify-content: space-between;
}

.gmv-goal {
  margin-right: 10px;
  flex: 1;
}

.gmv-data {
  flex: 2;
}

.grey-line {
  color: #999;
  font-size: 14px;
  line-height: 30px;
  text-align: center;
}

.data-progress {
  border-radius: 12px;
  min-height: 116px;
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
  margin: 20px 0 0;
  font-size: 13px;
  background: linear-gradient(315deg, #4dd99b 0%, #79d54e 100%);
  /* max-width: 800px; */
}

.progress-bottom {
  background: linear-gradient(45deg, #4dd99b 0%, #79d54e 100%);
}

.data-progress>div {
  flex: 1;
  height: 116px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 24px 0;
  box-sizing: border-box;
}

/* .progress-1 {
  background: linear-gradient(270deg, #22b7ff 0%, #09afff 100%);
}
.progress-2 {
  background: #3abfff;
}
.progress-3 {
  background: #6bcfff;
}
.progress-4 {
  background: #79D2FD;
}
.progress-5 {
  background: #84D7FF;
} */
.bold-font {
  font-weight: bold;
  font-size: 24px;
}

.up-arrow {
  color: #ef583b;
  font-size: 12px;
}

.down-arrow {
  color: #000;
  font-size: 12px;
}

.sale-detail {
  display: flex;
  align-items: center;
  justify-content: space-around;
  color: #333;
  font-size: 13px;
}

.sale-item {
  height: 70px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

.sale-item .el-button--text {
  padding-bottom: 0;
  color: #333;
}

.sale-item p:first-child {
  font-weight: bold;
  font-size: 14px;
}

.blue-font {
  color: #09afff;
  font-size: 15px;
}

.month-wrapper {
  display: flex;
  justify-content: space-between;
}

.month-select {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.month-select:hover {
  cursor: pointer;
}

.current-month {
  margin: 0 10px;
  color: #09afff;
  font-size: 16px;
}

.month-select .current-month:hover {
  cursor: default;
}

.disable-select {
  color: gray;
}

.stock-title {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #aaa;
  align-items: flex-end;
  margin-bottom: 10px;
}

.card-title {
  color: #333;
  font-size: 16px;
}

#container {
  height: 900px;
  width: 100%;
}
</style>
<style>.amap-cluster {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
}

.showName {
  font-size: 13px;
}

.showCount,
.showName {
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 90%;
}</style>
