<template>
  <div id="zchjdt">
    <div id="search">
      <el-select
        v-model="classify"
        clearable
        placeholder="机构类别"
        style="width: 150px"
      >
        <el-option
          v-for="item in classifyList"
          :key="item.id"
          :label="item.name"
          :value="item.name"
        >
        </el-option>
      </el-select>
      <el-input
        v-model="queryParam.chineseName"
        suffix-icon="el-icon-search"
        placeholder="机构名称"
        style="width: 120px"
      >
      </el-input>
      <el-input
        v-model="queryParam.address"
        suffix-icon="el-icon-search"
        placeholder="机构地址"
        style="width: 120px"
      >
      </el-input>
      <div class="button-search" @click="search">搜索</div>
    </div>

    <div id="myMap" style="height: 100%"></div>
    <div id="result" v-show="visible">
      <el-drawer
        :title="'信息列表('+total+')'"
        :visible.sync="visible"
        style="position: absolute"
        direction="rtl"
        :modal="false"
        :modal-append-to-body="false"
        :before-close="handleClose"
      >
        <div class="body">
          <el-card class="box-card">
            <div
              v-for="item in data_list"
              @click="locate(item)"
              class="textitem"
              :title="item.chineseName"
            >
              {{ item.chineseName }}
            </div>
          </el-card>
          <div class="pagination-div">
            <el-pagination
              class="myPagination"
              small
              background
              layout="prev, pager, next"
              :total="total"
              :pager-count="5"
              :current-page="currentPage"
              @current-change="handleCurrentChange"
            >
            </el-pagination>
          </div>
        </div>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import { post } from "../../util/http_util";
import * as openlayer_util from "../../util/openlayer_util";
// import * as arcgis_util from '../../util/arcgis4_util'
// import * as arcgis_util from '../../util/arcgis3_util'
import Feature from "ol/Feature";
import WKT from "ol/format/WKT";
import { Fill, Stroke, Circle, Style, Text } from "ol/style";
import { MultiLineString, Point } from "ol/geom";

import ClusterSource from "ol/source/Cluster";
import VectorSource from "ol/source/Vector";
import VectorLayer from "ol/layer/Vector";
import Canvaslayer from "../../util/canvaslayer";
export default {
  name: "zchjdt",
  data() {
    return {
      currentPage: 1, //当前选择的页数
      total: 0, //数据总条数
      visible: false,
      queryParam:{
        chineseName:"", address:""
      },
      data_list: [],
      classifyList: [
        { id: 1, name: "政府机构" },
        { id: 2, name: "军事单位" },
        { id: 3, name: "新闻媒体" },
        { id: 4, name: "智库机构" },
      ],
      classify: "政府机构"
    };
  },
  methods: {
    //关闭右侧
    handleClose(done) {
      done();
    },
    //地图定位
    locate(item) {
      if (item.geom != null) {
        if (item.geom.x && item.geom.y) {
          var geometry = [item.geom.x, item.geom.y];
        } else {
          var geometry = new WKT()
            .readFeature(item.geom.wkt)
            .getGeometry()
            .getFirstCoordinate();
        }
        this.map.getView().setZoom(6);
        this.map.getView().setCenter(geometry);
        this.popup(geometry, item);
      } else {
        this.$message.warning("暂无经纬度数据！");
      }
    },
    //弹出框
    popup(coordinate, properties) {
      let overlay = ol_util.getOverlay(
        "详情",
        `<ul>
               <li>名称：${properties.chineseName}</li>
               <li>地址：${properties.address}</li>
               <li>类型：${properties.organizationType}</li>
            </ul>`
      );
      overlay.setPosition(coordinate);
      this.map.addOverlay(overlay);
    },
    //查询
    search() {
      this.visible = true;
      this.query(1);
    },
    query(pageNum, pageSize = 10){
      this.currentPage = pageNum;
      post(
        `api/rest/resource/queryOpponentOrganization?pageNum=${pageNum}&pageSize=${pageSize}`,
        this.queryParam
      )
      .then((res) => {
        this.data_list = res.list;
        this.total = res.totals;
        this.addPoints(res.list);
        this.addCluster(res.list);
        this.addFlash(res.list);
      })
      .catch((err) => {
        console.log(err);
      });
    },
    //地图要素增加
    addPoints(res) {
      let source = new VectorSource({
        features: [],
      });
      for (let i = 0; i < res.length; i++) {
        if (res[i].geom != null&&res[i].geom.wkt != null) {
          let feature = new WKT().readFeature(res[i].geom.wkt);
          feature.set("data", res[i]);
          source.addFeature(feature);
        }
      }
      this.layer.setSource(source);
    },
    //聚合
    addCluster(res) {
      //定义source
      let source = new VectorSource({
        features: [],
      });
      for (let i = 0; i < res.length; i++) {
         if (res[i].geom != null && res[i].geom.x && res[i].geom.y) {
          let feature = new Feature({
            data: res[i],
            geometry: new Point([res[i].geom.x, res[i].geom.y]),
          });
          source.addFeature(feature);
         }
      }
      this.layer_Cluster.setSource(
        new ClusterSource({
          distance: 100,
          source: source,
        })
      );
    },
    //闪烁
    addFlash(res){
      this.flashLayer.clear();
      let self = this;
      let markers = [];
      for (let i = 0; i < res.length; i++) {
        if (res[i].geom != null && res[i].geom.x && res[i].geom.y) {
          markers.push({
            lnglat: [res[i].geom.x, res[i].geom.y],
            color: self.rgb(),
            type: "circle",
            speed: 0.2,
          });
        }
      }
      this.flashLayer.addMarkers(markers);
    },
    setPointStyle() {
      return new Style({
        //线
        stroke: new Stroke({
          color: "orange",
          width: 1,
        }),
        //面
        // fill: new Fill({
        //   color: "rgba(0, 0, 255, 0.4)",
        // }),
        //点
        image: new Circle({
          fill: new Fill({
            color: "blue",
          }),
          stroke: new Stroke({
            color: "#3399CC",
            width: 1.25,
          }),
          radius: 7,
        }),
        //字
        // text: new Text({
        //   font: "12px",
        //   scale: 0.64,
        //   text: res[i].name,
        //   fill: new Fill({
        //     color: "#000",
        //   }),
        //   stroke: new Stroke({
        //     color: "#fff",
        //     width: 3,
        //   }),
        // }),
      });
    },
    setClusterStyle(size) {
      return new Style({
        image: new Circle({
          radius: 15,
          stroke: new Stroke({
            color: "#fff",
          }),
          fill: new Fill({
            color: "#3399CC",
          }),
        }),
        text: new Text({
          font: "15px sans-serif",
          text: size.toString(),
          fill: new Fill({
            color: "#fff",
          }),
        }),
      });
    },
    handleCurrentChange(pageNum) {
      this.query(pageNum);
    },
    //返回颜色
    rgb(){
      let  n = parseInt(Math.random() * 10);
      return ["#ef5b9c","#f47920","#ed1941","#ea66a6","#fcf16e"
             ][n/2];
    }
  },
  mounted() {
    let self = this;
    //定义并初始化地图
    this.map = openlayer_util.initImageMap("myMap", { level: 5 });
    // this.map = openlayer_util.initTDTMap("myMap", { level: 5 });
    // this.map = openlayer_util.initTileMap("myMap", { level: 5 });
    // arcgis_util.load2DMap("myMap").then(function(evt){
    //     console.log(evt);
    // });
    //地图点击事件
    this.map.on("singleclick", function (evt) {
      let feature = self.map.forEachFeatureAtPixel(
        evt.pixel,
        function (feature, layer) {
          return feature;
        }
      );
      if (feature) {
        if (feature.getProperties().features) {
          //聚合
          feature = feature.getProperties().features[0];
        }
        self.popup(feature.getGeometry().getFirstCoordinate(), feature.get("data"));
      }
    });
    //定义并初始化区域图层
    this.layer = new VectorLayer({
      style: function (feature) {
        let features = feature.get("features");
        if (features && features.length > 1) {
          return self.setClusterStyle(features.length);
        } else {
          return self.setPointStyle();
        }
      },
    });
    this.map.addLayer(this.layer);
    //定义并初始化聚合图层
    this.layer_Cluster = new VectorLayer({
      style: function (feature) {
        let features = feature.get("features");
        if (features && features.length > 1) {
          return self.setClusterStyle(features.length);
        } else {
          return self.setPointStyle();
        }
      },
    });
    this.map.addLayer(this.layer_Cluster);
    //定义并初始化闪烁图层
    this.flashLayer = new Canvaslayer({ map: this.map });
  },
};
</script>

<style lang="scss">
#zchjdt {
  width: calc(100% - 70px);
  height: calc(100% - 90px);
  margin: 40px;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  #search {
    position: absolute;
    top: 15px;
    right: 5px;
    width: 521px;
    height: 30px;
    padding-right: 10px;
    z-index: 10;
  }
  .button-search {
    width: 100px;
    height: 30px;
    line-height: 30px;
    float: right;
    margin-left: 20px;
    text-align: center;
    cursor: pointer;
    background-image: url(../../assets/img/yqjc/40.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .el-input__icon {
    line-height: 30px;
  }

  //弹出
  .ol-popup {
    position: absolute;
    background-color: rgba(47, 57, 90, 0.678);
    color: white;
    min-width: 280px;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 12px;
    left: -50px;
    .popup-title {
      display: none;
      font-size: 18px;
    }
    .popup-content {
      font-size: 15px;
      ul li {
        height: 30px;
        font-family: cursive;
        list-style: none;
      }
    }
    //关闭
    .ol-popup-closer:after {
      color: white;
      content: "✖";
    }
    .ol-popup-closer {
      text-decoration: none;
      position: absolute;
      top: 2px;
      right: 8px;
    }
    .ol-popup-closer:hover {
      color: rgba(255, 255, 255, 0.719);
    }
  }
  // 弹出框箭头
  .ol-popup:after,
  .ol-popup:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }
  .ol-popup:after {
    border-top-color: rgba(47, 57, 90, 0.8);
    border-width: 10px;
    left: 48px;
    margin-left: -10px;
  }
  .ol-popup:before {
    border-top-color: #cccccc;
    border-width: 11px;
    left: 48px;
    margin-left: -11px;
  }
  #result {
    position: absolute;
    top: 65px;
    right: 5px;
    width: 300px;
    height: calc(100% - 80px);
    opacity: 0.9;
    .el-drawer {
      width: 100% !important;
      background-color: #1d2d46;
      .el-drawer__header {
        color: #ecf5ff;
      }
      .el-card {
        border: 1px solid #1d2d46;
        background-color: #1d2d46;
        box-shadow: unset;
        color: #ffff;
      }
      .textitem {
        width: 100%;
        height: 30px;
        line-height: 30px;
        padding-left: 10px;
        padding-right: 10px;
        margin-bottom: 20px;
        font-size: 12px;
        box-sizing: border-box;
        text-align: center;
        cursor: pointer;
        background-color: cadetblue;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        // background-image: url("../../assets/img/zchj/01.png");
        // background-size: 100% 100%;
      }
      .textitem:hover {
        background-color: rgb(64, 89, 90);
      }

      .pagination-div {
        width: 100%;
        height: 50px;
        .el-pagination {
          margin-top: 9px;
          text-align: right;
          .el-pagination__jump{
            color: white;
          }
          .el-pagination__total{
            color: white;
          }
        }
        .myPagination.is-background .el-pager li:not(.disabled).active {
          color: #fff;
          border: 1px solid #146a80;
          box-shadow: 0 0 10px #1b6097;
          background-color: #1d2d46;
        }
      }
    }
  }

  .ol-viewport canvas {
    pointer-events: none;
  }
  .el-dialog{
    .el-input__inner {
      color: white !important;
      background: none !important;
      border: 1px solid #146a80 !important;
      box-shadow: 0 0 10px #1b6097;
    }
    .el-textarea__inner {
      color: white !important;
      background: none !important;
      border: 1px solid #146a80 !important;
      box-shadow: 0 0 10px #1b6097;
    }
  }
}
</style>