<template>
  <div class="layout" :class="{wide: isWide}" @touchmove.prevent>
    <div>
      <ViewOperation height="100%" v-if="!isWide" :scale="0.7">
        <div class="address">
          <!-- <img src="@/assets/images/address.png" alt=""> -->
          <maps />
          <!-- <img :src="item.img" v-for="item in maps" :key="item.cls" class="map-item" :class="'map-' + item.cls"> -->
          <router-link v-for="item in address" :key="item.name" :class="item.name" :to="{name: 'map', params: {title: item.text}}">
            {{item.text}}<span>{{item.count}}</span>
          </router-link>
        </div>
      </ViewOperation>
      <div class="address wide" v-else>
        <!-- <img src="@/assets/images/address.png" alt=""> -->
        <maps />
        <!-- <img :src="item.img" v-for="item in maps" :key="item.cls" class="map-item" :class="'map-' + item.cls"> -->
        <router-link v-for="item in address" :key="item.name" :class="item.name" :to="{name: 'map', params: {title: item.text}}">
          {{item.text}}<span>{{item.count}}</span>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import data from '@/data'
import browser from '@/util/browser'
import ViewOperation from '@/components/ViewOperation'
import maps from '@/components/maps'

// const maps = [
//   {cls: 'bs', img: require('@/assets/images/bs.png')},
//   {cls: 'da', img: require('@/assets/images/da.png')},
//   {cls: 'gt', img: require('@/assets/images/gt.png')},
//   {cls: 'hh', img: require('@/assets/images/hh.png')},
//   {cls: 'ht', img: require('@/assets/images/ht.png')},
//   {cls: 'jf', img: require('@/assets/images/jf.png')},
//   {cls: 'js', img: require('@/assets/images/js.png')},
//   {cls: 'nt', img: require('@/assets/images/nt.png')},
//   {cls: 'nz', img: require('@/assets/images/nz.png')},
//   {cls: 'qa', img: require('@/assets/images/qa.png')},
//   {cls: 'sc', img: require('@/assets/images/sc.png')},
//   {cls: 'tj', img: require('@/assets/images/tj.png')},
//   {cls: 'tl', img: require('@/assets/images/tl.png')},
//   {cls: 'xc', img: require('@/assets/images/xc.png')},
//   {cls: 'yf', img: require('@/assets/images/yf.png')},
//   {cls: 'yx', img: require('@/assets/images/yx.png')}
// ]
const setting = [
  {name: 'yf', text: '永丰社区'},
  {name: 'bs', text: '北沙社区'},
  {name: 'sc', text: '上栅社区'},
  {name: 'jf', text: '金峰社区'},
  {name: 'nz', text: '那洲社区'},
  {name: 'gt', text: '官塘社区'},
  {name: 'ht', text: '会同社区'},
  {name: 'nt', text: '宁堂社区'},
  {name: 'xc', text: '下栅社区'},
  {name: 'da', text: '东岸社区'},
  {name: 'js', text: '鸡山社区'},
  {name: 'yx', text: '银星社区'},
  {name: 'hh', text: '后环社区'},
  {name: 'tl', text: '唐乐社区'},
  {name: 'tj', text: '唐家社区'},
  {name: 'qa', text: '淇澳社区'}
]
const wh = {width: window.innerWidth, height: window.innerHeight}

setting.forEach(item => {
  item.count = data.modules.find(m => m.title === item.text).children.length
})

window.addEventListener('resize', function () {
  wh.width = window.innerWidth
  wh.height = window.innerHeight
})

export default {
  data () {
    return {
      ismobile: browser.mobile,
      address: setting,
      wh: wh
    }
  },
  computed: {
    isWide () {
      return this.wh.width > 1085
    }
  },
  components: {
    ViewOperation,
    maps
  }
}
</script>

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