<template>
  <div class="layout" @touchmove.prevent>
    <div id="map"></div>

    <!-- <div class="dialog" v-show="showDialog">
      <a class="close" @click="showDialog = false"></a>
      <a class="jleft" @click="slideHandle(--imgIndex)">
        <img src="@/assets/images/jiantou.png">
      </a>
      <a class="jright" @click="slideHandle(++imgIndex)">
        <img src="@/assets/images/jiantou2.png">
      </a>
    </div> -->

    <div class="map-bottom-layout" :class="{mobile: ismobile}">
      <div class="map-tabs clear" :class="{mobile: ismobile}">
        <a @click="tapList()"><i class="iconfont icon-suolve"></i></a>
        <template v-if="dmodel && dmodel.link">
            <template v-if="ismobile">
            <span v-if="mapTab === 1" @click="goto(dmodel)">
              <i class="iconfont icon-leixing_hangpai"></i>航拍
            </span>
            <span v-if="mapTab === 0" @click="mapTab = 1 && goto(dmodel)">
              <i class="iconfont icon-tuceng"></i>平面
            </span>
          </template>
          <template v-else>
            <a :class="{active: mapTab === 1}" class="rad">
              俯视整个{{$route.params.title}}
            </a>
            <a @click="goto(dmodel)" :class="{active: mapTab === 0}" class="rad">
              航拍视角
            </a>
          </template>
        </template>
      </div>

      <div class="focus-info" v-if="info && ismobile">
        <h3>{{info.name}}</h3>
        <div class="tags">
          <span>{{info.parent}}</span>
        </div>
        <div class="tags">
          <span>{{info.tagType}}</span>
        </div>
        <p>{{info.address}}</p>
        <div class="types">
          <i v-for="type in info.showType" :key="type" class="iconfont" :class="'icon-'+type"></i>
        </div>
        <a @click="goto(info)" v-if="info.link || info.data">
          <span>点击</span><span>参观</span>
        </a>
        <a class="nolink" v-else>
          <span>正在</span><span>拍摄</span>
        </a>
      </div>
    </div>

    <imageQuery :screens="screens" @exitHandle="screens = null" />
    <!-- <div class="image-dialog" v-if="screens">
      <a @click="screens = null"><i class="iconfont icon-left"></i>返回</a>
      <div class="image-layout">
        <Slide :screens="screens" :current="0">
          <i class="iconfont icon-left" slot="up"></i>
          <img slot="item" slot-scope="{data}" :src="data" class="image-item">
          <i class="iconfont icon-right" slot="next"></i>
        </Slide>
      </div>
    </div> -->
  </div>
</template>

<script>
import imageQuery from '@/pages/imageQuery'
import browser from '@/util/browser'
import data from '@/data'
const AMap = global.AMap

export default {
  components: { imageQuery },
  data () {
    return {
      cacheMakers: [],
      showDialog: false,
      imgIndex: 0,
      mapTab: 1,
      ismobile: browser.mobile,
      info: null,
      dmodel: {},
      isType: true,
      screens: null
    }
  },
  methods: {
    grentHtml (item, cls) {
      var $maker = document.createElement('div')

      if (!this.ismobile) {
        var types = item.showType.map(type => `<i class="iconfont icon-${type}"></i>`)

        if (item.link || item.data) {
          $maker.classList.add('link')
        } else {
          $maker.classList.add('nolink')
        }

        $maker.classList.add('maker-info')
        $maker.classList.add('rad')
        cls && $maker.classList.add(cls)
        $maker.innerHTML = `
          <h3>
            <i class="iconfont icon-${item.type}"></i>
            <span>${item.name}</span>
          </h3>
          <div class="content">
            <div><span>${item.parent}</span><span>${item.tagType}</span></div>
            <p>${item.address}</p>
            <div class="oper">
              <div>${types.join('')}</div>
              <a class='query-image'>${(item.link || item.data) ? '点击参观' : '正在拍摄'}</a>
            </div>
          </div>
        `

        if (item.data) {
          $maker.querySelector('.query-image').addEventListener('click', () => {
            this.queryImage(item)
          })
        }
      } else {
        console.log('???')
        $maker.classList.add('maker-info-mobile')
        $maker.innerHTML = `
          <div>
            <i class="iconfont icon-dingwei"></i>
            <i class="icon-tub iconfont icon-${item.type}"></i>
          </div>`
      }
      return $maker
    },
    loadding (item, showTitle) {
      this.cacheMakers.forEach(marker => {
        marker.seftadditional.removeSeft()
      })

      let showMaker
      let markers = item.children.map(c => {
        let maker = this.grentMakter([parseFloat(c.lng), parseFloat(c.lat)], c)
        c.name === showTitle && (showMaker = maker)
        return maker
      })

      this.cacheMakers = markers
      showMaker && showMaker.seftadditional.play()
    },
    grentMakter (point, item) {
      let infoWindow, infoDom
      let show = false
      let dom = this.grentHtml(item)
      let position = new global.AMap.LngLat(Number(point[0]), Number(point[1]))
      let marker = new global.AMap.Marker({
        position: position,
        content: dom,
        offset: new global.AMap.Pixel(-80, -30)
      })
      let clickHandle = () => {
        this.goto.bind(this)(item)
      }

      marker.seftadditional = {
        removeSeft: () => {
          marker.seftadditional.pause()
          this.map.remove(marker)
          if (!this.ismobile) {
            infoDom.querySelector('h3').removeEventListener('click', marker.seftadditional.pause)
            infoDom.querySelector('a').removeEventListener('click', clickHandle)
          }
        },
        play: () => {
          this.$bus.$emit('showMaker', dom)
          if (this.ismobile) {
            dom.classList.add('show')
            this.info = item
          } else {
            infoWindow.open(this.map, position)
          }
          this.map.setCenter(position)
          show = true
        },
        pause: () => {
          if (!this.ismobile) {
            infoWindow.close()
          } else {
            dom.classList.remove('show')
            this.info = null
          }
          show = false
        }
      }

      this.$bus.$on('showMaker', showDom => {
        if (dom !== showDom) {
          if (show) {
            marker.seftadditional.pause()
          }
          show = false
        }
      })

      global.AMap.event.addListener(marker, 'click', e => {
        if (!show) {
          this.$router.push({name: 'info', params: {title: this.$route.params.title, show: item.name}})
          // marker.seftadditional.play()
        } else {
          this.$router.push({name: 'map', params: {title: this.$route.params.title}})
          // marker.seftadditional.pause()
        }
      })

      if (!this.ismobile) {
        infoDom = this.grentHtml(item, 'show')
        infoWindow = new AMap.InfoWindow({
          content: infoDom
        })
        infoDom.querySelector('h3').addEventListener('click', () => {
          this.$router.push({name: 'map', params: {title: this.$route.params.title}})
          // marker.seftadditional.pause()
        })
        infoDom.querySelector('a').addEventListener('click', clickHandle)
      }
      this.map.add(marker)
      return marker
    },
    initial () {
      let params = this.$route.params
      let item = this.dmodel = data.modules.find(item => item.title === params.title)
      if (!item) {
        item = data.types.find(item => item.title === params.title)
      }
      this.loadding(item, params.show)
    },
    tapList () {
      let params = this.$route.params
      let items, item
      let tagType
      if (params.show) {
        items = data.modules.find(item => item.title === params.title)
        item = items ? items.children.find(item => item.name === params.show) : ''
        tagType = item.tagType
      }
      this.$router.push({
        name: params.show ? 'item' : 'list',
        params: !this.isType ? {title: params.title, type: tagType || '全部', show: params.show} : {title: '全部', type: params.title, show: params.show}
      })
    },
    goto (info) {
      if (info.link) {
        let id = null
        Object.keys(data.data).forEach(key => {
          if (data.data[key] === info) {
            id = key
          }
        })
        this.$router.push({name: 'external', params: {url: info.link, id: id}})
      } else if (info.data) {
        this.screens = info.data
      }
    },
    queryImage (item) {
      this.screens = item.data
    }
  },
  watch: {
    mapTab (newVal) {
      if (newVal) {
        this.map.remove(this.satellite)
      } else {
        this.map.add(this.satellite)
      }
    },
    '$route.params.title': {
      handler: function (newVal, oldVal) {
        setTimeout(() => {
          if (newVal !== oldVal) {
            let params = this.$route.params
            let item = data.modules.find(item => item.title === params.title)
            this.isType = false
            if (!item) {
              this.isType = true
              item = data.types.find(item => item.title === params.title)
            }
            this.map.setCenter(item.center)
            this.map.setZoom(item.zoom)
          }
          this.initial()
        })
      },
      immediate: true
    },
    '$route.params.show': function () {
      this.initial()
    }
  },
  mounted () {
    this.map = new global.AMap.Map('map', {
      mapStyle: 'amap://styles/fresh',
      zoom: 18,
      center: [113.590951, 22.359473]
    })
    this.satellite = new AMap.TileLayer.Satellite()
    this.initial()
  }
}
</script>

<style scoped>
@import url(./style);
</style>

<style>
@import url(./map_style);
</style>
