<template>
  <div class="app-container">
    <div class="scoped-top-tips">洪楼plus小程序</div>
    <div class="scoped-bg"></div>
    <div v-if="$route.query.id === '95542fdc-b542-4582-9be2-9ab8005728d3' || $route.query.id === '95542ff1-8176-4267-8344-2aa7f1034ac5'" class="scoped-tab">
      <div @click="linkChange('95542fdc-b542-4582-9be2-9ab8005728d3')" :class="$route.query.id === '95542fdc-b542-4582-9be2-9ab8005728d3' ? 'op cur' : 'op'">小学</div>
      <div @click="linkChange('95542ff1-8176-4267-8344-2aa7f1034ac5')" :class="$route.query.id === '95542ff1-8176-4267-8344-2aa7f1034ac5' ? 'op cur' : 'op'">初中</div>
    </div>
    <el-amap
      class="amap-box"
      :vid="'amap-vue'"
      :amap-manager="amapManager"
      :zoom="mapDiyObj.zoom"
      :zooms="mapDiyObj.zooms"
      :mapStyle="mapDiyObj.mapStyle"
      :center="mapDiyObj.center"
      :events="mapEvents"
      :plugin="plugin"
    >
      <template v-if="mapDiyObj.zoom > 12">
        <template v-if="mapDiyObj.isSchoolShow === '1'">
          <el-amap-marker class="scoped-m-box" v-for="(marker, index) in schoolList" :key="3000 + index"
            icon="https://img2.honglounews.com/20220110041435-6276.png"
            width="20"
            height="20"
            :position="marker.position"
            :events="schoolEvents"
            :title="marker.school_name"
            :label="{content: marker.school_name, offset: [-10 * marker.school_name.length / 2, -20]}"
            :extData="{id: marker.id}"
          >
          </el-amap-marker>
        </template>
        <template v-if="mapDiyObj.isEstateShow === '1'">
          <el-amap-marker class="scoped-m-box" v-for="(marker, index) in estateList" :key="2000 + index"
            icon="https://img2.honglounews.com/20220110041411-6675.png"
            :position="marker.position"
            :events="estateEvents"
            :title="marker.estate_name"
            :label="{content: marker.estate_name, offset: [-10 * marker.estate_name.length / 2, -20]}"
            :extData="{id: marker.id}"
          >
          <!-- https://img2.honglounews.com/20220110041534-8330.png -->
          <!-- https://img2.honglounews.com/20220110041411-6675.png -->
          </el-amap-marker>
        </template>
        <el-amap-marker v-for="(marker, index) in markerData" :key="9000 + index"
          :position="marker.position"
          :draggable="marker.draggable"
          :animation="marker.animation"
          :offset="marker.offset"
          :extData="{index}"
          :icon="marker.icon"
          :events="markersEvents">
          <div class="scoped-marker-text" v-if="!marker.icon" :style="`color: ${marker.color}`">{{marker.content}}</div>
        </el-amap-marker>
      </template>
      <template v-else>
        <template v-if="mapDiyObj.isAreaShow === '1'">
          <el-amap-marker class="scoped-m-box" v-for="(marker, index) in areaList" :key="4000 + index"
            icon="https://img2.honglounews.com/20220110041435-6276.png"
            :position="marker.position"
            :events="areaEvents"
            :offset="[-40, -40]"
            :extData="{areaName: marker.areaName, areaType: marker.area_type}"
          >
            <div class="scoped-marker-area">
              <div class="p1">{{marker.areaName}}</div>
              <div class="p2">楼盘:{{marker.estate_total}}</div>
              <div class="p2">学校:{{marker.school_total}}</div>
            </div>
          </el-amap-marker>
        </template>
      </template>
      <el-amap-polygon
        v-for="(polygon, index) in polygons"
        :key="index"
        :path="polygon.path"
        :editable="polygon.editable"
        :fillColor="polygon.fillColor"
        :fillOpacity="polygon.fillOpacity"
        :strokeColor="polygon.strokeColor"
        :strokeWeight="polygon.strokeWeight"
        :strokeOpacity="polygon.strokeOpacity"
        :strokeStyle="polygon.strokeStyle"
        :extData="{index}"
        :events="polygonEvents">
      </el-amap-polygon>
      <el-amap-polyline
        v-for="(polyline, index) in polylines"
        :key="index"
        :editable="polyline.editable"
        :fillColor="polyline.fillColor"
        :fillOpacity="polyline.fillOpacity"
        :strokeColor="polyline.strokeColor"
        :strokeWeight="polyline.strokeWeight"
        :strokeOpacity="polyline.strokeOpacity"
        :strokeStyle="polyline.strokeStyle"
        :extData="{index}"
        :events="polylineEvents"
        :path="polyline.path">
      </el-amap-polyline>
      <!-- closeWhenClickMap="true"  -->
      <el-amap-info-window :isCustom="true" :position="winObj.position" :content="winObj.content"></el-amap-info-window>
    </el-amap>
  </div>
</template>
<script>
import { AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap'
const amapManager = new AMapManager()
import { arrToObj } from '@/utils'
export default {
  name: 'map',
  components: {},
  data() {
    const that = this
    return {
      isImgShow: false,
      polylines: [],
      estateList: [],
      schoolList: [],
      medium_school_list: [],
      small_school_list: [],
      areaList: [],
      isDbShow: true,
      isMapSetShow: false,
      formData: [],
      isMteShow: false,
      mapDiyObj: {
        center: [115.852386, 28.684076],
        zoom: 17,
        zooms: [15, 19],
      },
      amapManager,
      winObj: {
        position: [115.852386, 28.684076],
        content: '',
      },
      polygons: [
        // {
        //   path: [[115.823481,28.702359],[115.861933,28.672241],[115.812838,28.629609],[115.793784,28.657179]],
        //   strokeWeight: 2,
        //   fillColor: '#f00',
        //   strokeStyle: 'solid',
        // },
        // {
        //   path: [[115.859015,28.654919],[115.93386,28.630212],[115.841849,28.606101]],
        //   editable: true,
        //   strokeWeight: 1,
        //   fillColor: '#ffffff',
        //   strokeStyle: 'dashed',
        // },
      ],
      markerData: [],
      mapEvents: {
        init(map) {
          // map.setFeatures(['road', 'point', 'bg', 'building']); // 多个种类要素显示
          map.setFeatures(['road', 'bg', 'building']); // 多个种类要素显示
          // map.setMapStyle('amap://styles/647a4a7f773b3c7143b46e7c3e499f1f');
          AMapUI.loadUI(['control/BasicControl'], function(BasicControl) {
            //图层切换控件
            var layerControl = new BasicControl.LayerSwitcher({
              baseLayers: [
                {
                  id: 'Satellite',//图层id，需唯一
                  enable: true, //是否启用
                  name: '卫星图',//显示名称，html
                  layer: new AMap.TileLayer.Satellite()
                },
                {
                  id: 'basic',//图层id，需唯一
                  enable: false, //是否启用
                  name: '基础地图',//显示名称，html
                  layer: new AMap.TileLayer()
                },
              ],
              overlayLayers:[
              ],
              position: {
                left:'0',
                top:'40px',
              },
            });
            map.addControl(layerControl);
          })
        },
        zoomchange (e) {
          const curMap = amapManager.getMap()
          that.mapDiyObj.zoom = curMap.getZoom() || 17
        },
        complete () {
          that.setCurFeatures(that.mapDiyObj.features)
        },
        // click(e) {
        //   const { lng, lat } = e.lnglat
        //   console.log(lng, lat)
        // },
      },
      markersEvents: {
        dragend(e) {
          const eData = e.target.getExtData()
          that.curMarkersIndex = eData.index
          const { lng, lat } = e.lnglat
          let markerData = JSON.parse(JSON.stringify(that.markerData))
          markerData[that.curMarkersIndex].position = [lng, lat]
          that.markerData = [...markerData]
        },
        click(e) {
          const eData = e.target.getExtData()
          that.curMarkersIndex = eData.index
        },
      },
      polygonEvents: {
        click(e) {
          const eData = e.target.getExtData()
          that.polygonIndex = eData.index
          const lnglatObj = e.lnglat
          const cObj = that.polygons[that.polygonIndex]
          const estateObj = cObj.estateObj ? JSON.parse(cObj.estateObj) : {}
          const schoolObj = cObj.schoolObj ? JSON.parse(cObj.schoolObj) : {}
          const typeObj = {
            '#fb6557': '专本科',
            '#ff9149': '幼儿园',
            '#ff0': '新楼盘',
            '#9f7df4': '二手房',
            '#ff7fbf': '教育用地',
            '#ff003f': '商业用地',
            '#007299': '公用设施',
            '#00ff3f': '公园用地',
            '#4da4ee': '医院用地',
          }
          that.winObj.position = [lnglatObj.lng, lnglatObj.lat]
          if (estateObj.id) {
            const ptObj = {
              bs: "别墅",
              cgc: "超高层",
              dc: "低层",
              dpc: "大平层",
              ds: "叠墅",
              gc: "高层",
              gy: "公寓",
              other: "其它",
              ptyf: "普通洋房",
              ttyf: "退台洋房",
              xgc: "小高层",
              xsdyf: "新时代洋房"
            }
            const ptArr = estateObj.product_type.split(',')
            let ptStrArr = []
            ptArr.forEach(n => {
              ptStrArr.push(ptObj[n])
            })
            const productTypeStr = ptStrArr.join(',')
            that.winObj.content = `
              <div style="border-radius: 6px;overflow:hidden;background:#fff;box-shadow: 0 0 3px #ccc;">
                <div style="font-weight: bold;color:#fff;padding: 10px 10px;background:#409eff;user-select: none;margin-bottom: 10px;text-align: left;">${cObj.text}</div>
                <div style="display: flex;padding-left: 10px;">
                  <div style="width: 100px;">
                    <img style="width: 100px;height: auto;" src="${estateObj.pri_image}_xs" />
                  </div>
                  <div style="width: 160px;">
                    <div style="padding: 0 10px 6px;color: #999;font-size: 12px;color: #f00;font-weight: bold;">价格：￥${estateObj.price_range}</div>
                    <div style="padding: 0 10px 6px;color: #999;font-size: 12px;">类型：${typeObj[cObj.fillColor] || '其它'}</div>
                    <div style="padding: 0 10px 6px;color: #999;font-size: 12px;">物业：${estateObj.property_type}</div>
                    <div style="padding: 0 10px 6px;color: #999;font-size: 12px;">产品：${productTypeStr}</div>
                  </div>
                </div>
              </div>
            `
          } else if (schoolObj.id) {
            const saObj = arrToObj(that.$dictData.school_attrib)
            const stObj = arrToObj(that.$dictData.school_type)
            that.winObj.content = `
              <div style="border-radius: 6px;overflow:hidden;background:#fff;box-shadow: 0 0 3px #ccc;">
                <div style="font-weight: bold;color:#fff;padding: 10px 10px;background:#409eff;user-select: none;margin-bottom: 10px;text-align: left;">${cObj.text}</div>
                <div style="display: flex;padding-left: 10px;">
                  <div style="width: 100px;">
                    <img style="width: 100px;height: auto;" src="${schoolObj.pri_image}_xs" />
                  </div>
                  <div style="width: 260px;">
                    <div style="padding: 0 10px 6px;color: #999;font-size: 12px;color: #f00;font-weight: bold;">${saObj[schoolObj.school_attrib]}、${stObj[schoolObj.school_type]}</div>
                    <div style="padding: 0 10px 6px;color: #999;font-size: 12px;">备注：${schoolObj.remarked}</div>
                  </div>
                </div>
              </div>
            `
          } else {
            that.winObj.content = `
              <div style="border-radius: 6px;overflow:hidden;background:#fff;box-shadow: 0 0 3px #ccc;">
                <div style="font-weight: bold;color:#fff;padding: 10px 10px;background:#409eff;user-select: none;margin-bottom: 10px;text-align: center;">${cObj.text}</div>
                <div style="padding: 0 10px 10px;color: #999;">类型：${typeObj[cObj.fillColor] || '其它'}</div>
                <div style="padding: 0 10px 10px;color: #999;">状态：${cObj.strokeStyle === 'dashed' ? '规划中' : '已规划'}</div>
              </div>
            `
          }
        },
      },
      polylineEvents: {
        click(e) {
          const eData = e.target.getExtData()
          that.polylineIndex = eData.index
        },
      },
      estateEvents: {
        click(e) {
          const eData = e.target.getExtData()
          wx.miniProgram.navigateTo({url: `/pagesHouse/indexDtl?id=${eData.id}`})
        },
      },
      schoolEvents: {
        click(e) {
          const eData = e.target.getExtData()
          wx.miniProgram.navigateTo({url: `/pagesSchool/indexDtl?id=${eData.id}`})
        },
      },
      areaEvents: {
        click(e) {
          const eData = e.target.getExtData()
          wx.miniProgram.navigateTo({url: `/pagesSchool/index?areaName=${eData.areaName}&areaType=${eData.areaType}`})
        },
      },
      polygonIndex: 0,
      polylineIndex: 0,
      curMarkersIndex: 0,
      plugin: [{
        pName: 'MouseTool',
      }],
      mteStr: 'polygonAdd',
      mteObj: {},
      dictData: {
        sys_yesno: [
          {key: '是', val: '1'},
          {key: '否', val: '2'},
        ],
        area_type: [
          {
            "key": "红谷滩中心区",
            "val": "hgt"
          },
          {
            "key": "红角洲",
            "val": "hjz"
          },
          {
            "key": "朝阳新城",
            "val": "cyxc"
          },
          {
            "key": "九龙湖",
            "val": "jlh"
          },
          {
            "key": "凤凰洲",
            "val": "fhz"
          },
          {
            "key": "西湖区",
            "val": "xhq"
          },
          {
            "key": "东湖区",
            "val": "dhq"
          },
          {
            "key": "象湖滨江",
            "val": "xhbj"
          },
          {
            "key": "青山湖区",
            "val": "qshq"
          },
          {
            "key": "新建区",
            "val": "xjq"
          },
          {
            "key": "湾里区",
            "val": "wlq"
          },
          {
            "key": "青云谱区",
            "val": "qypq"
          },
          {
            "key": "高新区",
            "val": "gxq"
          },
          {
            "key": "欣悦湖",
            "val": "xyh"
          },
          {
            "key": "经开区",
            "val": "jkq"
          },
          {
            "key": "象湖新城",
            "val": "xhxc"
          },
          {
            "key": "望城",
            "val": "wcxq"
          },
          {
            "key": "南昌县",
            "val": "ncx"
          },
          {
            "key": "赣江新区",
            "val": "gjxq"
          }
        ],
        map_area_lnglat: [
          {
            "option1": "望城",
            "key": "115.74219,28.622854",
            "val": "wcxq"
          },
          {
            "option1": "湾里区",
            "key": "115.781385,28.709504",
            "val": "wlq"
          },
          {
            "option1": "欣悦湖",
            "key": "115.787513,28.685376",
            "val": "xyh"
          },
          {
            "option1": "九龙湖",
            "key": "115.792951,28.587435",
            "val": "jlh"
          },
          {
            "option1": "新建区",
            "key": "115.818441,28.692623",
            "val": "xjq"
          },
          {
            "option1": "红角洲",
            "key": "115.824219,28.63926",
            "val": "hjz"
          },
          {
            "option1": "经开区",
            "key": "115.830506,28.747641",
            "val": "jkq"
          },
          {
            "option1": "象湖滨江",
            "key": "115.847217,28.582374",
            "val": "xhbj"
          },
          {
            "option1": "红谷滩中心区",
            "key": "115.852886,28.683902",
            "val": "hgt"
          },
          {
            "option1": "朝阳新城",
            "key": "115.858884,28.633789",
            "val": "cyxc"
          },
          {
            "option1": "凤凰洲",
            "key": "115.875846,28.709236",
            "val": "fhz"
          },
          {
            "option1": "西湖区",
            "key": "115.889966,28.664366",
            "val": "xhq"
          },
          {
            "option1": "东湖区",
            "key": "115.901112,28.680259",
            "val": "dhq"
          },
          {
            "option1": "青云谱区",
            "key": "115.908247,28.623327",
            "val": "qypq"
          },
          {
            "option1": "南昌县",
            "key": "115.932183,28.550813",
            "val": "ncx"
          },
          {
            "option1": "赣江新区",
            "key": "115.93303,28.803368",
            "val": "gjxq"
          },
          {
            "option1": "青山湖区",
            "key": "115.949679,28.701298",
            "val": "qshq"
          },
          {
            "option1": "高新区",
            "key": "116.033624,28.697981",
            "val": "gxq"
          }
        ]
      },
    }
  },
  computed: {},
  created() {
    this.getData()
    // this.$api.base.apiareainfolist().then(areaArr => {
    //   const arr = areaArr.map((a, aIndex) => {
    //     return {
    //       key: aIndex,
    //       val: a.option1,
    //       longitude: a.longitude,
    //       latitude: a.latitude,
    //       areaName: a.area_name,
    //     }
    //   })
      // this.$api.base.admmapcoordinall().then(res => {
      //   let estateList = res.estate_list || []
      //   estateList.map(item => {
      //     item.position = [item.longitude, item.latitude]
      //   })
      //   this.estateList = [...estateList]

      //   const query = this.$route.query
      //   if (query.id === '95542fdc-b542-4582-9be2-9ab8005728d3') {
      //     let small_school_list = res.small_school_list || []
      //     small_school_list.map(item => {
      //       item.position = [item.longitude, item.latitude]
      //     })
      //     this.schoolList = [...small_school_list]
      //   } else if (query.id === '95542ff1-8176-4267-8344-2aa7f1034ac5') {
      //     let medium_school_list = res.medium_school_list || []
      //     medium_school_list.map(item => {
      //       item.position = [item.longitude, item.latitude]
      //     })
      //     this.schoolList = [...medium_school_list]
      //   } else {
      //     let schoolList = res.school_list || []
      //     schoolList.map(item => {
      //       item.position = [item.longitude, item.latitude]
      //     })
      //     this.schoolList = [...schoolList]
      //   }


      //   let areaList = res.area_total || []
      //   let newAreaList = []
      //   areaList.forEach(item => {
      //     // let lnglatArr = arrToObj(this.dictData.map_area_lnglat)[item.area_type].split(',')
      //     // item.position = [lnglatArr[0], lnglatArr[1]]
      //     // item.areaName = arrToObj(this.dictData.area_type)[item.area_type]
      //     const areaIndex = arrToObj(arr)[item.area_type]
      //     if (arr[areaIndex] && arr[areaIndex].longitude) {
      //       newAreaList.push({
      //         ...item,
      //         position: [arr[areaIndex].longitude, arr[areaIndex].latitude],
      //         areaName: arr[areaIndex].areaName
      //       })
      //     }
      //   })
      //   this.areaList = [...newAreaList]
      // })
    // })
  },
  mounted() {},
  methods: {
    linkChange (str) {
      const query = this.$route.query
      if (query.e) {
        this.$router.push(`/map/dtl?e=${query.e}&id=${str}`)
      } else {
        this.$router.push(`/map/dtl?id=${str}`)
      }
      this.$router.go(0)
    },
    setCurFeatures (data) {
      const curMap = this.amapManager.getMap()
      curMap.setFeatures(data)
    },
    getData () {
      const query = this.$route.query
      this.$api.base.admmapcoordindetail({
        uuid: query.id
      }).then(res => {
        if (res.data) {
          const data = JSON.parse(res.data)
          this.winObj = {
            content: `
            <div style="font-weight: bold;color:#409eff;padding: 10px 10px;background:#fff;border-radius: 6px;user-select: none;">${data.mapDiyObj.title}</div>
            `,
            position: [data.mapDiyObj.center[0], data.mapDiyObj.center[1]],
          }
          this.polylines = data.polylines && data.polylines.length > 0 ? [...data.polylines] : []
          this.polygons = [...data.polygons]
          this.markerData = [...data.markerData]
          this.mapDiyObj = {
            ...data.mapDiyObj,
            title: res.title,
          }
        } else {
          this.mapDiyObj = {
            mapStyle: 'normal',
            zoom: 13,
            zooms: [11, 19],
            center: [115.852386, 28.684076],
            isEstateShow: '2',
            isSchoolShow: '2',
            isAreaShow: '2',
            title: res.title,
            features: ['road', 'bg', 'building']
          }
        }
        document.title = res.title || '洪楼地图1'
      })
    },

  }
}
</script>
<style lang="scss" scoped>
.app-container {
  height: 100%;
  padding: 0;
  margin: 0;
  position: relative;
  .amap-box {
    height: 100%;
  }
}

.scoped-marker-text {
  color: #fff;
  min-width: 100px;
  font-weight: bold;
  box-shadow: 0 0 2px #fff;
  text-align: center;
  padding: 2px 6px;
  border-radius: 6px;
  background: #369af7;
}

.scoped-select-center {
  position: absolute;
  left: -75px;
  top: 0px;
  cursor: pointer;
  width: 60px;
  line-height: 14px;
  color: #313131;
  .s {
    color: #f00;
    font-size: 12px;
  }
}


::v-deep .amap-marker-label {
  border-color: #dcdcdc;
  border-radius: 2px;
  padding: 3px 5px;
  color: #666;
  background: #fff;
  box-shadow: 0 0 3px #ccc;
}
::v-deep .amap-logo{
    display: none!important;;
}
::v-deep .amap-copyright {
  opacity:0;
}
::v-deep .amap-icon img {
  width: 20px !important;
  height: 20px !important;
}

.scoped-marker-area {
  background: #369af7;
  box-shadow: 0 0 5px #369af7;
  color: #fff;
  width: 80px;
  height: 80px;
  text-align: center;
  font-size: 12px;
  border-radius: 50%;
  padding-top: 20px;
  box-sizing: border-box;
}



.scoped-bg {
  width: 180px;
  height: 30px;
  background: url(./img/bg.png);
  background-size: 100%;
  position: fixed;
  z-index: 999999;
  // left: 50%;
  // top: 50%;
  // margin-left: -150px;
  // margin-top: -25px;
  // transform: rotate(-45deg);
  left: 10px;
  bottom: 0;
}

.scoped-top-tips {
  position: fixed;
  z-index: 999999;
  top: 0;
  left: 0;
  width: 100%;
  color: #5caac1; //#de8c17;
  background: #fcf6ed;
  font-size: 12px;
  padding: 10px;
  opacity: .8;
  font-weight: bold;
}



.scoped-tab {
  position: fixed;
  right: 0;
  top: 50%;
  background: #fff;
  z-index: 9999999;
  cursor: pointer;
  padding: 10px;
  border-radius: 20px 0 0 20px;
  box-shadow: 0 0 10px #ccc;
  .op {
    color: #313131;
    height: 30px;
    line-height: 30px;
    padding: 0 2px;
    font-size: 14px;
    &:last-child {
      border-top: 1px solid #dcdcdc;
    }
    &.cur {
      color: #409eff;
      font-weight: bold;
    }
  }
}




</style>