<template>
  <div :id="id" class="map" ref="map" style="z-index: 0"></div>
</template>

<script>
import 'leaflet/dist/leaflet.css'
import * as L from 'leaflet'
import 'leaflet.fullscreen/Control.FullScreen'
import 'leaflet.fullscreen/Control.FullScreen.css'
import 'leaflet-measure-path/leaflet-measure-path.css'
import 'leaflet-measure-path/leaflet-measure-path.js'
import axios from 'axios'
import cun from './data/cun.geojson'
import suixianxiangzhen from './data/suixianxiangzhen.geojson'
import suixian from './data/suixian.geojson'
import zhuji from './data/zhuji.geojson'

import {
  handMeasureDistance,
  handMeasureArea,
  handMeasureClear,
} from './measure.js'

export default {
  name: 'mapShow',
  props: {
    id: 'map',
  },
  data () {
    return {
      map: null,
      typearr: [
        {
          name: '水域',
          color: '#417ffa',
          status: true,
        },
        {
          name: '人工堆掘地',
          color: '#4e7ca1',
          status: true,
        },
        {
          name: '裸地',
          color: '#d2b42c',
          status: true,
        },
        {
          name: '林地',
          color: '#40a070',
          status: true,
        },
        {
          name: '构筑物',
          color: '#497568',
          status: true,
        },
        {
          name: '耕地',
          color: '#d6a01d',
          status: true,
        },
        {
          name: '房屋建筑',
          color: '#22a2c3',
          status: true,
        },
        {
          name: '道路',
          color: '#f2b9b2',
          status: true,
        },
        {
          name: '草地',
          color: '#96c24e',
          status: true,
        },
      ],
      geojsonLayer: null,
    }
  },
  created () {
    console.log(this.id, 'zheli.id')
  },
  mounted () {
    this.initMap()
    this.initRT()
  },
  methods: {
    initRT () {
      let Chart = this.$refs.trcharts
      let myChart = this.$echarts.init(Chart)
      let xData2 = ['水域', '人工用地', '裸地', '林地', '构筑物', '耕地']
      let data1 = [200, 100, 200, 200, 100, 123]
      let option = {
        title: {
          text: '分类面积柱状图统计',
          x: 'center',
          y: '4%',
          textStyle: {
            color: '#fff',
            fontSize: '18',
          },
          subtextStyle: {
            color: '#90979c',
            fontSize: '14',
          },
        },
        tooltip: {
          trigger: 'item',
        },
        grid: {
          left: 30,
          bottom: 30,
        },
        xAxis: {
          data: xData2,
          show: true,
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              type: 'solid',
              color: 'gray',
              opacity: 1,
            },
          },
          // lineStyle: {
          //     show: true,
          //     type: 'solid'
          // },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#fff',
              fontSize: 14,
            },
            margin: 15, //刻度标签与轴线之间的距离。
          },
        },
        yAxis: {
          name: '数量',
          nameTextStyle: {
            color: 'white',
            fontSize: 14,
            align: 'right',
            lineHeight: 30,
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              opacity: 0.5,
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: 12,
            },
          },
        },
        series: [
          {
            //三个最低下的圆片
            name: '',
            type: 'pictorialBar',
            symbolSize: [15, 10],
            symbolOffset: [0, 0],
            z: 12,
            itemStyle: {
              opacity: 1,
              color: function (params) {
                var a = params.name.slice(0, 2)
                return new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#12B9DB', // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#6F8EF2', // 100% 处的颜色
                    },
                  ],
                  false
                )
              },
            },
            data: [0.5, 0.5, 0.5, 0.5, 0.5, 0.5],
          },
          //下半截柱状图
          {
            name: '2020',
            type: 'bar',
            barWidth: 16,
            barGap: '-20%',
            itemStyle: {
              //lenged文本
              opacity: 0.7,
              color: function (params) {
                var a = params.name.slice(0, 2)

                return new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#12B9DB', // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#6F8EF2', // 100% 处的颜色
                    },
                  ],
                  false
                )
              },
            },

            data: data1,
          },

          {
            // 替代柱状图 默认不显示颜色，是最下方柱图（邮件营销）的value值 - 20
            type: 'bar',
            barWidth: 15,
            barGap: '-100%',
            stack: '广告',
            itemStyle: {
              color: 'transparent',
            },
            data: data1,
          },
          {
            name: '',
            type: 'pictorialBar',
            symbolSize: [15, 10],
            symbolOffset: [0, -5],
            z: 12,
            itemStyle: {
              opacity: 1,
              color: function (params) {
                var a = params.name.slice(0, 2)

                return new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#12B9DB', // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#6F8EF2', // 100% 处的颜色
                    },
                  ],
                  false
                )
              },
            },
            symbolPosition: 'end',
            data: data1,
          },
        ],
      }
      myChart.setOption(option)
      window.addEventListener('resize', function () {
        myChart.resize()
      })

      this.$on('hook:destroyed', () => {
        window.removeEventListener('resize', function () {
          myChart.resize()
        })
      })
    },
    initMap () {
      console.log(this.id, 'this.id')
      this.map = L.map(this.id, {
        center: [31.84, 113.223],
        zoom: 14,
        zoomControl: false,
        attributionControl: false,
        crs: L.CRS.EPSG4326, // 默认3857
        fullscreenControl: true,
        maxZoom: 17,
      })
      //定义一个比例尺控件
      let scale = L.control.scale()
      scale.addTo(this.map)
      // 请确保：metric: true（默认）
      // scale._mScale.innerText = `${scale._mScale.innerText.slice(0, hou-2)} ${scale._mScale.innerText.slice(-2) === 'km' ? '公里' : '米'
      //   }`
      // 请确保：imperial: true（默认）
      // scale.getContainer().childNodes[1].innerText = `${scale.getContainer().childNodes[1].innerText.slice(0, -2)} ${scale.getContainer().childNodes[1].innerText.slice(-2) === 'mi' ? '英里' : '英尺'
      //   }`
      scale.getContainer().childNodes[0].style.cssText =
        'margin-bottom:-4px;color:#FFF;text-shadow:none;border:2px solid #FFF;background:none;border-top:0px;'
      scale.getContainer().childNodes[1].hidden = true

      // 经纬度投影
      const VEC_C =
        'http://t1.tianditu.com/vec_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=3cf92df1e46b9a576fa8d3f427030886'
      const IMG_C =
        'http://t1.tianditu.com/img_c/wmts?layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=3cf92df1e46b9a576fa8d3f427030886'
      const CIA_C =
        'http://t1.tianditu.com/cia_c/wmts?layer=cia&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=3cf92df1e46b9a576fa8d3f427030886'
      L.tileLayer(IMG_C, {
        zoomOffset: 1,
        maxZoom: 17,
        tileSize: 256,
      }).addTo(this.map)
      L.tileLayer(CIA_C, {
        zoomOffset: 1,
        maxZoom: 17,
        tileSize: 256,
      }).addTo(this.map)
      L.tileLayer(
        'http://175.6.146.33:88/server/geoserver/zhny/gwc/service/wmts?layer=zhny:yx-wrj202310&tilematrixset=EPSG:4326&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix=EPSG:4326:{z}&TileCol={x}&TileRow={y}',
        {
          zoomOffset: 0,
          maxZoom: 16,
          tileSize: 256,
        }
      ).addTo(this.map)

      L.geoJSON(cun, {
        style: { color: '#F5DEB3', weight: 3, fillOpacity: 0 },
      }).addTo(this.map)
      L.geoJSON(suixianxiangzhen, {
        style: { color: '#1E90FF', weight: 3, fillOpacity: 0 },
      }).addTo(this.map)
      L.geoJSON(suixian, {
        style: { color: '#0000CD', weight: 3, fillOpacity: 0 },
      }).addTo(this.map)
      L.geoJSON(zhuji, {
        pointToLayer: function (geoJsonPoint, latlng) {
          return L.marker(latlng, {
            icon: L.divIcon({
              html:
                '<p class="' +
                (geoJsonPoint.properties.type == '区县'
                  ? 'qx'
                  : geoJsonPoint.properties.type == '乡镇'
                    ? 'xz'
                    : '') +
                '">' +
                geoJsonPoint.properties.name +
                '</p>',
              className: 'my-div-icon',
              // iconSize: 50
            }),
          })
        },
        style: { opacity: 0 },
      }).addTo(this.map)

      // L.marker([34, 108]).addTo(map)
      //   .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
      //   .openPopup();

      // this.clickFun()
      this.position()
      // this.addDWFL()
      this.addPoint()

      let _this = this
      setTimeout(function () {
        _this.map.invalidateSize(true)
      }, 10)
    },
    addGeojson (data) {
      if (this.geojsonLayer) {
        this.map.removeLayer(this.geojsonLayer)
      }
      if (data.totalFeatures == 0) {
        return
      }
      this.geojsonLayer = L.geoJSON(data, {
        style: { color: '#ffff18', weight: 5, fillOpacity: 0 },
      })
        .addTo(this.map)
        .bindPopup(
          '<div style="text-align: left;">类型：' +
          data.features[0].properties.class_name +
          '</div><div style="text-align: left;">面积：' +
          data.features[0].properties.geo_area +
          '㎡</div>'
        )
        .openPopup()
    },
    addDWFL () {
      L.tileLayer
      L.tileLayer.wms("http://175.6.146.33:88/geoserver/zhny/wms", {
        layers: "zhny:jy-8yue-4326", //需要加载的图层
        format: 'image/png', //返回的数据格式
        transparent: true,
      })
        .addTo(this.map)
    },
    position () {
      var mousePositionControl = L.control({
        position: 'bottomright',
      })
      mousePositionControl.onAdd = function (map) {
        var div = L.DomUtil.create('div', 'mouse-position')
        return div
      }
      mousePositionControl.updatePosition = function (latlng) {
        var lat = latlng.lat.toFixed(5)
        var lng = latlng.lng.toFixed(5)
        this._container.innerHTML =
          '<div style="color:#FFF;margin-bottom:-10px;margin-right:20px;"><span>经度: ' +
          lng +
          '</span><span style="margin-left: 20px;">纬度: ' +
          lat +
          '</span></div>'
      }
      mousePositionControl.addTo(this.map)
      this.map.on('mousemove', function (e) {
        mousePositionControl.updatePosition(e.latlng)
      })
    }, // 距离量测
    jl () {
      this.map.off('click', this.clickReback)
      handMeasureDistance(this.map)
    },
    // 面积量测
    mj () {
      this.map.off('click', this.clickReback)
      handMeasureArea(this.map)
    },
    // 清空量测内容
    ql () {
      this.clickFun()
      handMeasureClear(this.map)
    },
    fw () {
      this.map.flyTo([31.841309, 113.194816])
    },
    clickFun () {
      this.map.on('click', this.clickReback)
    },
    clickReback (e) {
      let that = this
      axios.get('http://175.6.146.33:88/geoserver/zhny/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=zhny:jy-8yue-4326&maxFeatures=1&outputFormat=application/json&&cql_filter=DWITHIN(the_geom,POINT(' + e.latlng.lng + " " + e.latlng.lat + "),0.00001,meters)").then(res => that.addGeojson(res.data))
    },
    addPoint () {
      let point = {
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: [113.22, 31.84],
            },
          },
          {
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: [113.22, 31.849],
            },
          },
          {
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: [113.228, 31.831],
            },
          },
          {
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: [113.223, 31.832],
            },
          },
          {
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: [113.215, 31.839],
            },
          },
          {
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: [113.216, 31.845],
            },
          },
        ],
      }
      L.geoJSON(point, {
        pointToLayer: function (geoJsonPoint, latlng) {
          return L.marker(latlng, {
            title: '',
            icon: new L.Icon({
              iconUrl: require('../../assets/map/info.png'),
              iconSize: [40, 40],
              iconAnchor: [20, 0],
            }),
          })
        },
      })
        .addTo(this.map)
        .bindPopup(
          '<div class="infoDiv"><div>编号：XJYM006</div><div>位置：姚庙村五组</div><div>说明：建设用地</div><div>发现时间：2023年10月28日</div></div>'
        )
    },
    setCenter (lat, lng) {
      this.map.flyTo(L.latLng(lat, lng), 14)
    },
  },
  created () { },
}
</script>

<style scoped lang="scss">
.map {
  width: 100%;
  height: 100%;
}
</style>
<style lang="scss">
.mapboxgl-popup {
  top: -20px;
}
.mapboxgl-ctrl {
  display: none !important;
}
.dialog-container {
  width: 600px !important;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: normal;
  color: #02f6d9;
  line-height: 24px;
  background: rgba(0, 13, 14, 0.8);
  padding: 32px 21px 21px;
  border: 1px solid #036a73;
  .dialogClose {
    display: block;
    width: 32px;
    height: 32px;
    position: absolute;
    top: -25px;
    right: -16px;
    cursor: pointer;
  }
  .dialogTitle {
    height: 52px;
    padding-left: 70px;
    line-height: 46px;
    font-size: 24px;
    font-family: PingFang SC;
    font-weight: normal;
    color: #02f6d9;
    background-image: url("../../assets/bigScreenHome/ic_bg_xiaobiaoti.png");
    background-size: 100% 100%;
    margin-bottom: 18px;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .mapboxgl-popup-tip {
    background: rgba(0, 13, 14, 0.4);
    display: none;
  }
  .mapboxgl-popup-content {
    text-align: left;
    background-color: transparent !important;
    position: relative;
    padding: 0;
    .dialogList {
      display: inline-block;
      min-height: 34px;
      padding-left: 10px;
      text-align: left;
      align-items: center;
      line-height: 26px;
      font-size: 18px;
      color: #ffffff;
      &:nth-child(odd) {
        width: 52%;
      }
      &:nth-child(even) {
        width: 48%;
      }
      .dialogLabel {
        color: #02f6d9;
      }
      .dialogDesc {
        line-height: 26px;
      }
    }
    .dialogList-line {
      width: 100% !important;
      display: flex;
      align-items: flex-start;
      .dialogLabel {
        min-width: auto;
      }
      .dialogDesc {
        flex: 1;
      }
    }
  }
  .userList {
    display: inline-block;
    overflow-x: scroll;
    width: 100%;
    .table {
      margin-top: 10px;
      width: 1120px;
      padding: 10px;
      padding-left: 10px;
      box-sizing: border-box;
      .thead,
      .tbody .tr {
        width: 100%;
        display: flex;
        align-items: center;
        span {
          display: inline-block;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          text-align: center;
          line-height: 20px;
          font-size: 18px;
        }
        .tableXh {
          width: 50px;
        }
        .tableBh {
          width: 120px;
        }
        .tableTm {
          width: 250px;
        }
        .tableMc {
          width: 80px;
        }
        .tableDz {
          // flex: 1;
          width: 600px;
        }
      }
      .tbody {
        height: 100px;
        overflow: auto;
        .tr {
          span {
            color: #ffffff;
            line-height: 32px;
            font-size: 18px;
          }
        }
      }
    }
  }

  .tpList {
    display: flex;
    align-items: center;
    .tpListLabel {
      display: inline-block;
      padding-right: 6px;
    }
    .tpListImg {
      display: inline-block;
      width: 40px;
      height: 40px;
      margin-right: 10px;
    }
  }
}
.dialog-container::after {
  display: block;
  content: "";
  // background: rgba(0, 13, 14, 0.4);
  width: 0;
  height: 0;
  border-top: 14px solid rgba(0, 13, 14, 0.8);
  border-right: 14px solid transparent;
  border-left: 14px solid transparent;
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-28px);
}
// 详情=》表格
.table_wrap {
  max-width: 1258px; // 1300-42
  max-height: 500px;
  overflow: auto;
  padding: 0 10px;
  .table-item-box {
    width: 100%;
    overflow: auto;
    margin-top: 20px;
    &:last-child {
      margin-bottom: 20px;
    }
    .table-title {
      margin-bottom: 10px;
      font-size: 18px;
      font-weight: 600;
    }
    .table-con {
      .tr,
      .td {
        display: flex;
        div {
          border: 1px solid #02f6d9;
          flex-shrink: 0;
          width: 200px;
          line-height: 40px;
          font-size: 18px;
          padding: 4px 8px;
          box-sizing: border-box;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
      .td {
        div {
          color: #fff;
        }
      }
    }
  }
  .zskg-bar {
    width: 50%;
    float: left;
  }
  .pdzf-bar {
    width: 50%;
    display: inline-block;
  }
}
.dialog-container-auto {
  width: auto !important;
  .dialogTitle {
    padding-left: 150px;
  }
}
/* 滚动条宽度 */
.scroll-bar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background: #000e0f;
}
/* track滚动条未覆盖区域 */
.scroll-bar::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.2);
}
/* thumb滚动条覆盖区域 */
.scroll-bar::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #03fcad 0%, #02f3f7 100%);
}
.my-div-icon {
  p {
    width: 80px;
    font-size: 20px;
    font-weight: bold;
    color: #303133;
    text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
      1.4px 1.4px #fff, 1.4px -1.4px #fff, -1.4px 1.4px #fff, -1.4px -1.4px #fff;
  }
  .qx {
    font-size: 22px;
  }
  .xz {
    font-size: 20px;
  }
}
.infoDiv {
  border: 1px solid #c0c4cc;
  border-radius: 5px;
  background-color: rgba(241, 241, 241, 0);
  width: 200px;
  height: 140px;
  padding: 10px;
  resize: none;
  div {
    line-height: 30px;
    color: #c0c4cc;
  }
}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background-color: rgba(21, 51, 115, 0.7);
}
</style>
