<!--  -->
<template>
  <div class="layout" :style="{height:showList?'100%':'0',background:isWide?`#fff url(${bg}) top center`:''}">
  <!-- background: #fff url('~@/assets/images/img_all_bg.jpg') top center; -->

    <template v-if="!isWide">
      <div class="mobile-icon">
        <template v-if="currentArea && currentArea.link">
          <span class="list-icon" @click="goto(currentArea)">
            <i class="iconfont icon-leixing_hangpai"></i>航拍
          </span>
        </template>
        <div
            @click="tapMap()"
            class="list-icon"
            v-if="!isLocal"
          >
          <i class="iconfont icon-tuceng"></i>地图
        </div>
      </div>
    </template>
    <div class="nav-top" v-if="isWide">
      <div class="nav-name">
        <div
          v-if="!isLocal"
          @click="tapMap()"
          class="go-map"
        >
          <i class="iconfont icon-left"></i>
          <span>地图模式</span>
        </div>
        <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="mobile-top" v-else>
      <div class="mobile-area">
        <div class="li-type">区域：</div>
        <div class="li-ul" ref="ularea">
          <ul>
            <li
              :class="{active:item==$route.params.title}"
              @click="$router.push({name: 'list', params: {title: item}})"
              v-for="(item,i) in area"
              :key="i"
              :ref="`areali${i}`"
            >{{item}}</li>
            <li class="tiancong"></li>
          </ul>
        </div>
      </div>
      <div class="mobile-types">
        <div class="li-type">类型：</div>
        <div class="li-ul" ref="ultype">
          <ul>
            <li
              :class="{active:item==$route.params.type}"
              @click="$router.push({name: 'list', params: {type: item}})"
              v-for="(item,i) in types"
              :ref="`typeli${i}`"
              :key="i"
            >{{item}}</li>
            <li class="tiancong"></li>
          </ul>
        </div>
      </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&&isWide}"
          :ref="`list${i}`"
          v-for="(item, i) in list"
          :key="i"
        >
          <div class="card-img">
            <img :src="item.coverImg|| defaultImg">
            <div class="card-mask" v-if="!item.link&&!item.data">
              <p>正在拍摄
                <br>敬请期待
              </p>
            </div>
            <div class="card-mask clear-mask" v-else>
              <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 :introduce="introduce" :name="name" :showAside="true" :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 = wh.width > 1085 ? 208 : 168
export default {
  // import引入的组件需要注入到对象中才能使用
  components: { imageQuery },
  data () {
    // 这里存放数据
    return {
      ismobile: browser.mobile,
      wh,
      showAside: false,
      whichitem: '',
      whichareali: '',
      whichtypeli: '',
      list: [],
      fixScroll,
      topCap,
      currentArea: {},
      screens: null,
      introduce: [],
      name: '',
      showList: false,
      timeout: null

    }
  },
  // 监听属性 类似于data概念
  computed: {
    isWide () {
      return this.wh.width > 1085
    },
    bg () {
      return this.$isLocal ? require('@/assets/images/img_all_bg.jpg') : `${data.cdnHref}img_all_bg.jpg`
    },
    defaultImg () {
      return this.$isLocal ? require('@/assets/images/default.jpg') : `${data.cdnHref}default.jpg`
    },
    area () {
      return data.modules.map(item => {
        return item.title
      })
    },
    isLocal () {
      return this.$isLocal
    },
    types () {
      return data.types.map(item => {
        return item.title
      })
    }
  },
  // 监控data中的数据变化
  watch: {
    showList (newVal) {
      if (!this.ismobile) {
        this.$bus.$emit('showaside', false)
      }
    },
    '$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.name === this.$route.params.type
              )
              this.list = children
            } else if (tempArr && this.$route.params.type === '全部') {
              this.list = children
            }
            if (this.ismobile) {
              this.paramsNavChange()
            }
          }
        })
      }
    },
    '$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.name === this.$route.params.type
              )
              this.list = children
            } else if (tempArr && newVal === '全部') {
              this.list = children
            }
            if (this.ismobile) {
              this.paramsNavChange()
            }
          }
        })
      }
    },
    '$route.params.show': {
      deep: true,
      immediate: true,
      handler (newVal, oldVal) {
        this.paramsShowChange()
      }
    }
  },
  // 方法集合
  methods: {
    tapMap () {
      let route = this.$route
      this.$router.push({
        name: route.params.show ? 'info' : 'map',
        params: {title: route.params.title, show: route.params.show}
      })
    },
    paramsNavChange () {
      let {type, title} = this.$route.params
      if (type || title) {
        this.area.find((item, i) => {
          if (item === title) {
            let areali = `areali${i}`
            this.$refs.ularea.scrollLeft = this.$refs[areali] && this.$refs[areali][0].offsetLeft
          }
        })
        this.types.find((item, i) => {
          if (item === type) {
            let typeli = `typeli${i}`
            this.$refs.ultype.scrollLeft = this.$refs[typeli] && this.$refs[typeli][0].offsetLeft
          }
        })
      }
    },
    paramsShowChange () {
      setTimeout(() => {
        let show = this.$route.params.show
        if (show) {
          this.list.find((item, i) => {
            if (show === item.name) {
              this.whichitem = i
              let l = `list${i}`
              this.$refs.listcon.scrollTop =
              this.$refs[l] && this.$refs[l][0].offsetTop - ((this.isWide ? fixScroll : 0) + topCap)
            }
          })
        }
      })
      if (this.isWide) {
        if (this.timeout) {
          clearTimeout(this.timeout)
        }
        this.timeout = setTimeout(() => {
          this.whichitem = ''
        }, 1000)
      }
    },
    goto (info) {
      if (info.link) {
        let params = this.$route.params
        let name = null
        let id = null
        Object.keys(data.data).forEach(key => {
          if (data.data[key] === info) {
            id = key
            name = data.data[key].name
          }
        })
        this.$router.push({
          name: 'external',
          params: { url: info.link, id: id },
          query: {title: params.title, type: params.type, show: name}
        })
      } else if (info.data) {
        console.log(info)
        // alert(1111111)
        this.screens = info.data
        this.introduce = info.introduce
        this.name = info.name
      }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    window.onresize = () => {
      if (this.isWide) {
        this.$router.go(0)
      }
    }
    this.$bus.$on('itemclick', data => {
      this.paramsShowChange()
    })
    setTimeout(() => {
      this.showList = true
    })
  },
  beforeDestroy () {},
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
/* 引入公共css类 */
@import "./style.css";
</style>
