<!--  -->
<template>
<div class='layout' @touchmove.prevent>
  <div class="nav-top">
    <div class="nav-name">
      <router-link :to="{name:'map',params:{title:$route.params.title}}" class="go-map" >
        <i class="iconfont icon-left"></i><span>地图模式</span>
      </router-link>
      <div class="nav-tag"  v-if="currentArea.link">
        <span class="fs">俯视整个{{currentArea.title}}</span>
        <span @click="goto(currentArea)" class="hpsj">航拍视角</span>
      </div>
    </div>
    <div class="area">
      <span class="txt-bold">区域：</span>
      <ul>
        <li :class="{active:item==$route.params.title}" @click="$router.push({name: 'list', params: {title: item}})" v-for="(item,i) in area" :key="i">{{item}}</li>
      </ul>
    </div>
    <div class="types">
      <span class="txt-bold">类型：</span>
       <ul>
        <li :class="{active:item==$route.params.type}"  @click="$router.push({name: 'list', params: {type: item}})" v-for="(item,i) in types" :key="i">{{item}}</li>
      </ul>
    </div>
  </div>
  <div class="list-body" >
    <div class="list-con" ref="listcon" :style="{height: (wh.height - topCap)+ 'px'}">
      <div @click="goto(item)" :class="{card:true,'card-animation':i===whichitem}" :ref="`list${i}`" v-for="(item, i) in list" :key="i">
        <div class="card-img">
          <img src="https://pro.modao.cc/uploads4/images/3099/30999897/v2_pnhd3s.jpg" alt="">
          <div class="card-mask" v-if="!item.link&&!item.data">
            <p>正在拍摄<br/>敬请期待</p>
            <div class="show-type">
              <i v-for="(iType,idxT) in item.showType" :key="idxT" class="iconfont" :class="'icon-'+iType"></i>
            </div>
          </div>
        </div>
        <div class="card-txt">
          <div class="title">
            <i class="iconfont" :class="'icon-'+item.type"></i>
            <span>{{item.name}}</span>
          </div>
          <div class="tag">
            <span class="tag-span" v-for="(sub,idx) in item.tags" :key="idx">{{sub}}</span>
          </div>
          <div class="address">
            <span>{{item.address}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <imageQuery :screens="screens" @exitHandle="screens = null" />

</div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import browser from '@/util/browser'
import data from '@/data'
import imageQuery from '@/pages/imageQuery'

const wh = {width: window.innerWidth, height: window.innerHeight}
const fixScroll = 40
const topCap = 168
export default {
// import引入的组件需要注入到对象中才能使用
  components: {imageQuery},
  data () {
    // 这里存放数据
    return {
      ismobile: browser.mobile,
      wh,
      showAside: false,
      whichitem: '',
      list: [],
      fixScroll,
      topCap,
      currentArea: {},
      screens: null
    }
  },
  // 监听属性 类似于data概念
  computed: {
    area () {
      return data.modules.map(item => {
        return item.title
      })
    },
    types () {
      return data.types.map(item => {
        return item.title
      })
    }
  },
  // 监控data中的数据变化
  watch: {
    '$route.params.title': {
      deep: true,
      immediate: true,
      handler (newVal, oldVal) {
        setTimeout(() => {
          if (newVal !== oldVal) {
            let tempArr = data.modules.find(item => item.title === newVal)
            this.currentArea = tempArr
            let children = [...tempArr.children]
            if (tempArr && this.$route.params.type !== '全部') {
              children = children.filter(item => item.tagType === this.$route.params.type)
              this.list = children
            } else if (tempArr && this.$route.params.type === '全部') {
              this.list = children
            }
          }
        })
      }
    },
    '$route.params.type': {
      deep: true,
      immediate: true,
      handler (newVal, oldVal) {
        setTimeout(() => {
          if (newVal !== oldVal) {
            let tempArr = data.modules.find(item => item.title === this.$route.params.title)
            let children = [...tempArr.children]
            if (tempArr && newVal !== '全部') {
              children = children.filter(item => item.tagType === this.$route.params.type)
              this.list = children
            } else if (tempArr && newVal === '全部') {
              this.list = children
            }
          }
        })
      }
    },
    '$route.params.show': {
      deep: true,
      immediate: true,
      handler (newVal, oldVal) {
        setTimeout(() => {
          if (newVal) {
            this.list.find((item, i) => {
              if (newVal === item.name) {
                this.whichitem = i
                let l = `list${this.whichitem}`
                this.$refs.listcon.scrollTop = this.$refs[l][0].offsetTop - (fixScroll + topCap)
              }
            })
          }
        })
        setTimeout(() => {
          this.whichitem = ''
        }, 1200)
      }
    }
  },
  // 方法集合
  methods: {
    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
      }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
  },
  beforeDestroy () {
  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
/* 引入公共css类 */
@import './style.css';

</style>
