<template>
  <div>
    <div
      class="input-card content-window-card"
      ref="infoBox"
      v-if="infoBoxData"
      v-show="infoBoxData"
    >
      <div style="padding: 7px 0px 0px 0px">
        <h4>{{ infoBoxData.properties.name }}</h4>
        <p class="input-item">完成率: {{ infoBoxData.baseItem.完成率 }}%</p>
        <p class="input-item">
          移栽面积 {{ infoBoxData.baseItem.面积 }}平方米 移栽数量
          {{ infoBoxData.baseItem.已种植 }}
        </p>
      </div>
    </div>
    <div id="container" class="g-bg1"></div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
import mapOfTongren from '@/http/mapOfTongren.json'

window.map = {}

export default {
  components: {},
  props: [`baseList`],
  data() {
    return {
      infoBoxData: undefined,
    }
  },
  computed: {},
  async created() {},
  mounted() {
    this.initAMap()
  },
  unmounted() {
    window.map.destroy()
  },
  methods: {
    async initAMap() {
      const vm = this
      let infoWindow
      // 在指定位置打开信息窗体
      function openInfo() {
        const data = vm.infoBoxData
        const { center } = data.properties
        const center2 = data.baseItem.area[0] || undefined
        infoWindow = new AMap.InfoWindow({
          content: vm.$refs.infoBox,
        })

        infoWindow.open(window.map, center2 || window.map.getCenter())
      }
      window._AMapSecurityConfig = {
        securityJsCode: `a2017cdc059be6c03b430a3185098003`,
      }
      AMapLoader.load({
        key: `6260c9b9128ad802001c8a5ff18bde16`, // 申请好的Web端开发者Key，首次调用 load 时必填
        version: `2.0`, // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [`AMap.Scale`], // 需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
      })
        .then(async (AMap) => {
          function addPolygon(data) {
            // const path = data.geometry.coordinates
            const path = data.baseItem.area
            console.log(
              `datadata`,
              path,
              data.baseItem.area,
              data.geometry.coordinates
            )
            let polygon = new AMap.Polygon({
              path: path,

              strokeColor: `#00f`,
              strokeWeight: 6,
              strokeOpacity: 0.7,
              fillOpacity: 0.2,
              fillColor: `#1791fc`,
              zIndex: 50,
              bubble: true,
              // fillColor: `#ccebc5`,
              // strokeOpacity: 1,
              // fillOpacity: 0,
              // strokeColor: `#2b8cbe`,
              // strokeWeight: 4,
              // // strokeStyle: `dashed`,
              // strokeDasharray: [5, 5],
              // lineJoin: `round`,
              // lineCap: `round`,
            })
            polygon.on(`mouseover`, (e) => {
              console.log(`datadatadata`, data)
              // 如果缩放过大还变色, 万一人家是想看放大后的详细地点, 变色后反而不方便
              if (window.map.getZoom() <= 12) {
                vm.infoBoxData = data
                openInfo()
                // polygon.setOptions({
                //   fillOpacity: 0.7,
                //   fillColor: `#7bccc4`,
                // })
              }
              // polygon.setOptions({
              //   fillOpacity: 0.7,
              //   fillColor: `#7bccc4`,
              // })
            })
            polygon.on(`click`, (e) => {
              console.log(`点击了`, data.properties)
            })
            polygon.on(`mouseout`, () => {
              // polygon.setOptions({
              //   fillOpacity: 0,
              //   fillColor: `#ccebc5`,
              // })
            })
            if (path[0]) {
              // console.log(`AMap.event.addListener`, AMap.event.addListener)
              const markerContent = `
                <div class="markerContent">
                  <div>${data.properties.name}</div>
                  <img class="img" src="https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png">
                </div>
              `
              let marker = new AMap.Marker({
                content: markerContent,
                // icon: `https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png`,
                position: path[0],
              })
              marker.on(`mouseover`, () => {
                vm.infoBoxData = data
                vm.$nextTick(() => {
                  openInfo()
                })
              })
              window.map.add(marker)
              // setTimeout(() => {
              //   AMap.event.addListener(marker, `click`, function () {
              //     vm.infoBoxData = data
              //     infoWindow.open(window.map, openInfo())
              //   })
              // }, 1000)
              // // 鼠标点击marker弹出自定义的信息窗体
              // AMap.event.addListener(marker, `click`, function () {
              //   vm.infoBoxData = data
              //   infoWindow.open(window.map, openInfo())
              // })
            }
            window.map.add(polygon)
          }
          window.map = new AMap.Map(`container`, {
            // resizeEnable: true,
            // 设置地图容器id
            // viewMode: `2D`, // 2D视图
            // mapStyle: `amap://styles/whitesmoke`, // 卫星地图样式
            viewMode: `3D`, // 是否为3D地图模式
            // zoom: 7, // 初始化地图级别
            zoom: 9.22, // 初始化地图级别
            // zoom: 14, // 初始化地图级别
            // center: [107.943579, 30.131735], // 初始化地图中心点位置
            center: [108.597461, 28.047503], // 初始化地图中心点位置
            resizeEnable: true,
            layers: [
              // new AMap.TileLayer.Satellite({
              //   opacity: 1,
              // }),
              // new AMap.TileLayer.RoadNet({
              //   opacity: 1,
              // }),
              // https://wprd01.is.autonavi.com/appmaptile?x=204&y=108&z=8&lang=zh_cn&size=1&scl=1&style=8&ltype=11
              // 谷歌图
              // new AMap.TileLayer({
              //   // getTileUrl: `//mt1.google.cn/vt/lyrs=s&hl=zh-CN&gl=CN&x=[x]&y=[y]&z=[z]&s=Gali`,
              //   getTileUrl: `http://mt{1,2,3,0}.google.cn/vt/lyrs=y@142&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]&s=Galil`,
              //   zIndex: 20,
              //   zoom: 17,
              // }),
              // new AMap.TileLayer({
              //   getTileUrl: `//mt1.google.cn/vt/imgtp=png32&lyrs=h@207000000&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]&s=Galil`,
              //   zIndex: 20,
              //   zoom: 17,
              // }),
              // 天地图
              new AMap.TileLayer({
                getTileUrl: `//t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX=[z]&TILEROW=[y]&TILECOL=[x]&tk=d7fcf6db577fd86e0cc48e9169065727`,
                zIndex: 20,
                opacity: 1,
                zoom: 19,
              }),
              new AMap.TileLayer({
                getTileUrl: `//t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX=[z]&TILEROW=[y]&TILECOL=[x]&tk=d7fcf6db577fd86e0cc48e9169065727`,
                zIndex: 20,
                opacity: 0.7,
                zoom: 19,
              }),
            ],
            // zooms: [16, 20],
          })
          window.map.setFitView()
          const baseList = await this.$http.get(`/api/base`)
          let list = mapOfTongren.features.map((item) => {
            const baseItem =
              baseList.find((baseItem) =>
                String(baseItem.名称).includes(
                  String(item.properties.name.slice(0, 2))
                )
              ) || {}
            item.baseItem = baseItem
            return item
          })
          list.forEach((item) => {
            addPolygon(item)
          })
          const item = list[0]
          this.infoBoxData = item
          this.$nextTick(() => {
            openInfo()
          })
        })
        .catch((e) => {
          console.log(e)
        })
    },
    tabChange(val) {
      if (val === 0) {
        this.$router.push(`/page1`)
      }
      console.log(`val`, val)
    },
  },
}
</script>

<style label="less">
.markerContent {
  min-width: 100px;
  display: block;
  background-color: #fff;
  color: #000;
  border-radius: 10px;
  padding: 10px 10px;
  position: relative;
  line-height: 1.5em;
  .img {
    position: absolute;
    left: -10px;
    bottom: -30px;
    /* bottom: -30px; */
    /* left: -30px; */
    /* left: calc(50% - 10px); */
  }
}
.custom-input-card {
  width: 18rem;
}

.custom-input-card .btn:last-child {
  margin-left: 1rem;
}

.content-window-card {
  color: #000;
  position: relative;
  width: 23rem;
  padding: 0.75rem 0 0 1.25rem;
  box-shadow: none;
  bottom: 0;
  left: 0;
}

.content-window-card p {
  height: 2rem;
}
</style>
<style lang="less" scoped>
#container {
  position: absolute;
  padding: 0px;
  margin: 0px;
  width: 1920px;
  height: 1080px;
  z-index: 8;

  &::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 9;
    background: radial-gradient(transparent 40vh, rgba(0, 0, 0, 1));
    pointer-events: none;
  }
}
</style>
