<template>
  <m-grid
    :template="[
      'title title title',
      'left . right',
    ]"
    columns="33.3vw auto 33.3vw"
    rows="0.4rem 1"
    gap="0.05rem"
    :complete="complete"
  >
    <m-map ref="map" @complete="mapComplete" @event="handleMapClick"/>
    <m-title area="title" :bgImg="require('@/assets/images/title-bg.png')">南京东路街道数据平台</m-title>
    <m-animate enter="fadeInLeft" leave="fadeOutLeft">
      <div v-show="themeName === '主屏'" area="left" class="wrapper">
        <HomeScreen  />
      </div>
    </m-animate>
    <m-animate enter="fadeInLeft" leave="fadeOutLeft">
      <div v-show="themeName === '智慧养老'" area="left" class="wrapper">
        <OldScreen v-if="themeName === '智慧养老'" />
      </div>
    </m-animate>
    <m-animate enter="fadeInRight" leave="fadeOutRight">
      <RightComponent area="right"/>
    </m-animate>
    <MapBtns v-model="fullView" @zoomin="zoom('in')" @zoomout="zoom('out')" />
    <MapTips />
  </m-grid>
</template>

<script>
// import LeftComponent from './components/left-component'
import HomeScreen from './components/home-screen'
import OldScreen from './components/old-screen'
import RightComponent from './components/right-component'
import MapBtns from './components/map-btns'
import MapTips from './components/map-tips'
import {mapState} from 'vuex'
export default {
  name: 'Main',
  components: {
    // LeftComponent,
    RightComponent,
    MapBtns,
    MapTips,
    HomeScreen,
    OldScreen,
  },
  data() {
    return {
      complete: false,
      fullView: true,
      boundary: null,
    }
  },
  computed: {
    ...mapState([
      'themeName',
    ])
  },
  methods: {
    mapComplete() {
      this.initMap()
      this.complete = true
    },
    initMap() {
      const {map} = this.$refs
      map.focus(97.87804679686496, -40.686071867261035, 6) // 南京东路街道
      // map.focus(41.75319496382872, -480.0854532701907, 6) // 市政府区域
      // map.focus(-189.37734542225144, 305.3152060727947, 6) // 市政府北边区域
      // map.focus(573.7817329792392, 158.7688192300202, 6) // 市政府东边区域
      // map.addPolyLine({
      //   paths: this.$store.state.areaAPath,
      //   strokeColor: 'rgba(51,145,255,1)',
      // })
      // map.addPolyLine({
      //   paths: this.$store.state.areaBPath,
      //   strokeColor: 'rgba(51,145,255,1)',
      // })
      // map.addPolyLine({
      //   paths: this.$store.state.areaCPath,
      //   strokeColor: 'rgba(51,145,255,1)',
      // })
      map.addPolygon({
        paths: this.$store.state.areaAPath,
        // fillColor: 'rgba(51,145,255,.3)',
        fillColor: 'transparent',
        attributes: {
          key: 'areaA',
          name: '区域A',
          test: 'hahahhaha'
        }
      })
      // map.addPolygon({paths: this.$store.state.areaBPath, fillColor: 'rgba(65,217,199,.3)'})
      // map.addPolygon({paths: this.$store.state.areaCPath, fillColor: 'rgba(240,72,100,.3)'})
      // map.addPolygon({paths: this.$store.state.streetPath, fillColor: 'rgba(51,145,255,.3)'})
      this.boundary = map.addBoundary({name: '南京东路街道'})
    },
    handleMapClick(data) {
      const {map} = this.$refs
      if (data.key === 'areaA') {
        this.boundary.hide()
        map.addPolyLine({
          paths: this.$store.state.areaAPath,
          strokeColor: 'rgba(51,145,255,1)',
        })
        map.focus(41.75319496382872, -480.0854532701907, 7)
      }
    },
    zoom(type) {
      const {map} = this.$refs
      if (type === 'in') map.zoomIn()
      else map.zoomOut()
    },
  }
}
</script>

<style lang="stylus" scoped>
.wrapper
  width 100%
  height 100%
  z-index 999
</style>
