<template>
  <div class="w-full h-full expressway-index">
    <div class="charglink" @click="toPath">智慧服务区</div>
    <div>
      <gis-map :config="config" @load="handleLoad">
        <span></span>
      </gis-map>
    </div>
    <div class="chargselect">
      <way-filter />
    </div>
    <div class="left-t">
      <serve-sale-ranking></serve-sale-ranking>
    </div>
    <div class="left-c">
      <sales-category></sales-category>
    </div>
    <div class="left-b">
      <carsection-flow></carsection-flow>
    </div>
    <div class="center-reve">
      <center-revenue></center-revenue>
    </div>
    <div class="right-t">
      <video-monitor></video-monitor>
    </div>
    <div class="right-c">
      <oils-sale-ranking></oils-sale-ranking>
    </div>
    <div class="right-b">
      <serve-flow-ranking></serve-flow-ranking>
    </div>
    <div v-show="custpup" class="cust-img-pup" ref="custimgpup">
      <div class="cust-img-pup-tit">
        <div class="cust-img-pup-tit-l">
          <img src="~@/assets/images/module-header-icon4.png" />
          <span>{{ popInfoData.areaName }}</span>
          <div class="pup-start-icon">
            <i class="el-icon-star-on"></i>
            <i class="el-icon-star-on"></i>
            <i class="el-icon-star-on"></i>
            <i class="el-icon-star-on"></i>
          </div>
        </div>
        <div class="cust-img-pup-tit-r" @click="colsePupwin">
          <i class="el-icon-close"></i>
        </div>
      </div>
      <div class="cust-img-pup-cont">
        <div>
          {{ pupShowText }}
          <span class="cust-img-pup-fold" v-if="isOver" @click="changeStatus">
            {{ statusText }}{{ statusText == "展开" ? ">>" : "<<" }}
          </span>
        </div>
      </div>
      <div class="cust-img-pup-imgs">
        <img
          v-if="popInfoData.pictureAerial"
          :src="popInfoData.pictureAerial"
        />
        <img v-if="popInfoData.pictureFront" :src="popInfoData.pictureFront" />
      </div>
    </div>
    <div class="road">
      <RoadStatus />
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
// 组织机构下拉
import WayFilter from "@/components/wayFilter/index.vue";
import GisMap from "@/components/GisMap/index.vue";
import serveSaleRanking from "./component/serveSaleRanking.vue";
import salesCategory from "./component/salesCategory.vue";
import carsectionFlow from "./component/carsectionFlow.vue";
import videoMonitor from "./component/videoMonitor.vue";
import oilsSaleRanking from "./component/oilsSaleRanking.vue";
import serveFlowRanking from "./component/serveFlowRanking.vue";
import RoadStatus from "../roadVisualizationCopy/component/NewLayerContrl/components/RoadStatus/index.vue";
//中间的实时数据
import centerRevenue from "./component/centerRevenue.vue";

import FWQpng from "../curingManage/component/Map/images/服务区.png";

import { serviceareaInfo } from "@/api/curingManage";
import { serviceareaBaseinfo } from "@/api/expressway.js";
import { generateKey } from "@/api/operation";
export default {
  components: {
    WayFilter,
    centerRevenue,
    serveSaleRanking,
    salesCategory,
    carsectionFlow,
    videoMonitor,
    oilsSaleRanking,
    serveFlowRanking,
    GisMap,
    RoadStatus,
  },
  computed: {
    ...mapState({
      map: (state) => state.map.map,
      config: (state) => state.map.config,
      boundaryLineFace: (state) => state.map.boundaryLineFace,
    }),
    selectRoadId() {
      return this.$store.state.road.selectRoadId;
    },
  },
  watch: {
    map() {
      this.map.setZoom(5.2);
      const qmz = JSON.parse(localStorage.getItem("mapCLkmz"));
      this.map.setLayoutProperty(qmz.ROUTE, "visibility", "none"); //隐藏所有路段
      this.getServePoint();
      this.popup = new minemap.Popup({ closeButton: false, offset: [0, 0] });
      const str = this.$refs.custimgpup;
      this.popup.setDOMContent(str).setLngLat([0, 0]).addTo(this.map);
    },
    selectRoadId(newVal) {
      const level = this.$store.state.road.selectLevel;
      const roadId = newVal ? newVal[level - 1] : "";
      this.query.level = level;
      this.query.dimension = roadId;
      this.getChangeRoads(newVal[0]);
      this.getServePoint();
    },
  },
  data() {
    return {
      mapConfig: {},
      center: [106.55, 29.57],
      provinceMarker: [
        {
          zb: [107.569855, 30.367095],
          id: "CQ",
          zoom: 6.5,
        },
        {
          zb: [102.928995, 30.52487],
          id: "SC",
          zoom: 5.4,
        },
        {
          zb: [101.593103, 25.353375],
          id: "YN",
          zoom: 5.5,
        },
        {
          zb: [106.641243, 27.10797],
          id: "GZ",
          zoom: 6.3,
        },
        {
          zb: [117.229929, 32.325398],
          id: "AH",
          zoom: 6,
        },
      ],
      popup: null,
      query: {
        level: 0,
        dimension: "",
      },
      popInfoData: {},
      isOver: false, // pup弹窗上的简介是否需要展开收起
      pupShowText: "", //展示在pup弹窗上的简介文字，根据展开/收起变化
      statusText: "展开",
      custpup: false,
    };
  },
  created() {
    this.$store.dispatch("map/getMapConfig");
  },
  mounted() {
    // this.mapConfig = this.$store.state.map?.config
  },
  methods: {
    //如果默认展示哪个省
    // 路段切换
    getChangeRoads(name) {
      if (!this.map) {
        return;
      }
      if (name) {
        this.provinceClick(name);
      } else {
        //高亮所有省份
        // this.map.setZoom(4.8);
        // this.map.setCenter([107.85585, 28.465908]);
        this.map.setZoom(5.2);
        this.map.setCenter([104.07751, 28.55365]);
        this.boundaryLineFace.forEach((el) => {
          this.map.setLayoutProperty(el.layerIdl, "visibility", "visible");
          this.map.setLayoutProperty(el.layerIdf, "visibility", "visible");
        });
        const qmz = JSON.parse(localStorage.getItem("mapCLkmz"));
        this.map.setLayoutProperty(qmz.ROUTE, "visibility", "visible");
      }
    },
    // 单独高亮某个省份
    provinceClick(name) {
      this.provinceMarker.forEach((el) => {
        if (name === el.id) {
          this.$nextTick(() => {
            this.map.flyTo({
              center: el.zb,
              zoom: el.zoom,
            });
          });
        }
      });
      this.boundaryLineFace.forEach((el) => {
        const state = name == el.code ? "visible" : "none";
        this.map.setLayoutProperty(el.layerIdl, "visibility", state);
        this.map.setLayoutProperty(el.layerIdf, "visibility", state);
      });
      const qmz = JSON.parse(localStorage.getItem("mapCLkmz"));
      this.map.setLayoutProperty(qmz.ROUTE, "visibility", "none"); //所有路段
    },
    // gis地图加载
    handleLoad(data) {
      this.$store.commit("map/setMap", data.map);
      this.getChangeRoads(this.selectRoadId[0]);
    },
    // 服务区点标注
    async getServePoint() {
      // this.map.removeSource('servePointSource')
      // this.map.removeLayer('servepagepoint')
      if (this.map && this.map.getLayer("servepagepoint")) {
        this.map.removeSource("servePointSource");
        this.map.removeLayer("servepagepoint");
        this.map.removeImage("servepage");
      }
      let dataArr = [];
      const data = await serviceareaInfo(this.query);
      data.msgContent.forEach((ele) => {
        dataArr.push({
          id: ele.id,
          name: ele.areaName,
          pegk: ele.pegk,
          type: "服务区",
          longitude: ele.lng,
          latitude: ele.lat,
        });
      });
      this.reorgData(dataArr);
    },
    reorgData(arr) {
      const pres = {
        type: "FeatureCollection",
        features: [],
      };
      arr.forEach((item, index) => {
        if (item.longitude && item.latitude) {
          const itemtext = JSON.stringify(item);
          let nametext = item.areaName || item.supplyName || item.pointName;
          pres.features.push({
            geometry: {
              type: "Point",
              coordinates: [item.longitude, item.latitude],
            },
            properties: {
              title: item.name,
              kind: item.id,
              itemcont: itemtext,
            },
            type: "Feature",
          });
        }
      });
      this.addSource(pres);
    },
    addSource(arr) {
      let { map } = this;
      const _that = this;
      if (map) {
        map.addSource("servePointSource", {
          type: "geojson",
          data: arr,
        });
        map.loadImage(FWQpng, function (error, image) {
          if (error) throw error;
          // 添加自定义图标
          map.addImage("servepage", image);
          map.addLayer({
            id: "servepagepoint",
            type: "symbol",
            source: "servePointSource",
            filter: ["!has", "point_count"],
            layout: {
              "icon-image": "servepage",
              "icon-size": 1,
              // visibility: "none",
            },
          });
        });
        map.on("mouseenter", "servepagepoint", function (e) {
          var features = map.queryRenderedFeatures(e.point, {
            layers: ["servepagepoint"],
          });
          console.log(features);
          if (features.length > 0) {
            const obj = JSON.parse(features[0].properties.itemcont);
            _that.getPointInfo(obj);
          }
        });

        map.on("mouseleave", "servepagepoint", function () {
          // _that.popShow = false
          _that.custpup = true;
          //   _that.popup.setLngLat([0, 0]).addTo(map);
        });
      }
    },
    //获取点详情
    async getPointInfo(obj) {
      const datas = await serviceareaBaseinfo({ serviceareaid: obj.id });
      this.popInfoData = datas.msgContent[0];
      if (this.popInfoData.baseinfo && this.popInfoData.baseinfo.length > 78) {
        this.popInfoData.subBaseinfo =
          this.popInfoData.baseinfo.substring(0, 70) + "...";
        this.isOver = true;
        this.pupShowText = this.popInfoData.subBaseinfo;
        this.statusText = "展开";
      } else {
        this.isOver = false;
        this.pupShowText = this.popInfoData.baseinfo;
      }
      const str = this.$refs.custimgpup;
      this.popup
        .setDOMContent(str)
        .setLngLat([obj.longitude, obj.latitude])
        .addTo(this.map);
    },
    //关闭弹窗
    colsePupwin() {
      this.popup.setLngLat([0, 0]).addTo(this.map);
    },
    // 弹框文字展开收起
    changeStatus() {
      if (this.statusText == "展开") {
        this.pupShowText = this.popInfoData.baseinfo;
        this.statusText = "收起";
      } else {
        this.pupShowText = this.popInfoData.subBaseinfo;
        this.statusText = "展开";
      }
    },
    toPath() {
      generateKey().then((res) => {
        const { data } = res;
        if (!data) {
          return;
        }
        // window.open("http://183.64.175.153:28880/#/QXGL/highway/oil");
        window.open(
          //   `http://183.64.175.153:21080/cloud-portal/login/login4ztj?tokenKey=${data}`
          `http://183.64.175.153:21080/servicearea/index.html#/cqHome?tokenKey=${data}`
        );
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~/styles/viewport-convert.scss";
div {
  box-sizing: border-box;
}
.expressway-index {
  padding-top: 55px;
  padding-bottom: 40px;
  display: flex;
}
.chargselect {
  position: absolute;
  top: 2px;
  left: 40px;
  z-index: 999;
}
.left-t {
  position: absolute;
  left: vw(32);
  top: vh(60);
  width: vw(460);
  height: vh(393);
  background: rgba(28, 46, 61, 0.5);
}
.left-c {
  position: absolute;
  left: vw(32);
  top: vh(463);
  width: vw(460);
  height: vh(330);
  background: rgba(28, 46, 61, 0.5);
}
.left-b {
  position: absolute;
  left: vw(32);
  bottom: vh(60);
  width: vw(460);
  height: vh(250);
  background: rgba(28, 46, 61, 0.5);
}

.center-reve {
  position: absolute;
  left: vw(485);
  top: vh(80);
  width: vw(950);
  height: vh(227);
  background: rgba(28, 46, 61, 0.5);
}

.right-t {
  position: absolute;
  right: vw(32);
  top: vh(60);
  width: vw(460);
  height: vh(290);
  background: rgba(28, 46, 61, 0.5);
}
.right-c {
  position: absolute;
  right: vw(32);
  top: vh(360);
  width: vw(460);
  height: vh(290);
  background: rgba(28, 46, 61, 0.5);
  // background: wheat;
}
.right-b {
  position: absolute;
  right: vw(32);
  bottom: vh(110);
  width: vw(460);
  height: vh(300);
  background: rgba(28, 46, 61, 0.5);
}
::v-deep(.minemap-popup) {
  z-index: 999;
}

::v-deep(.minemap-popup-content:before) {
  border-image: none !important;
  background-image: url("@/assets/images/expressway/popbg.png");
  background-size: 100% 100%;
  border-width: 0 !important;
}
::v-deep(.minemap-popup-content) {
  max-width: 440px !important;
  border-image: none !important;
  background-image: url("@/assets/images/expressway/popbg.png");
  background-size: 100% 100%;
  border-width: 0 !important;
  background-color: transparent !important;
}
::v-deep(.minemap-popup-tip) {
  border-top-color: #0c233c;
}
.cust-img-pup {
  width: 400px;
  padding: 20px 24px 24px 14px;
}
.cust-img-pup-tit {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cust-img-pup-tit-l {
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 1px;
  font-style: oblique;
  img {
    width: 14px;
    height: 16px;
    margin-right: 15px;
    position: relative;
    top: -1px;
  }

  .pup-start-icon {
    color: #ffc03c;
    margin-left: 15px;
  }
}
.cust-img-pup-tit-r {
  font-size: 22px;
  cursor: pointer;
}
.cust-img-pup-cont {
  margin-top: 12px;
  font-size: 14px;
}
.cust-img-pup-fold {
  color: #00b9ff;
  cursor: pointer;
}
.cust-img-pup-imgs {
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
  img {
    width: 49%;
    border: 1px solid #00b9ff;
  }
}
.road {
  position: absolute;
  left: vw(520);
  top: vh(300);
  z-index: 1;
}
.charglink {
  position: absolute;
  top: 10px;
  right: vw(310);
  width: vw(106);
  height: vh(40);
  background: url("@/assets/images/ChargeInfo/sfgzttz.png");
  background-size: 100% 100%;
  font-size: 13px;
  text-align: center;
  line-height: vh(38);
  z-index: 999;
  cursor: pointer;
}
</style>
