<template>
  <div class="search-layout">
    <div class="search mobileSearch" @touchmove.prevent>
      <a  @click="$router.back()"><i class="iconfont icon-left"></i></a>
      <input placeholder="搜索" v-model="keyword">
      <a><i class="iconfont icon-sousuo"></i></a>
    </div>

    <ul class="list">
      <li  @click="tapSearch(item)" v-for="(item, i) in listData" :key="i">
        <svg class="icon" aria-hidden="true">
          <use :xlink:href="'#icon-'+item.type"></use>
        </svg>
        <div class="info">
          <h3>{{item.name}}</h3>
          <div>
            <span v-for="(tag, idx) in item.tags" :key="idx">{{tag}}</span>
          </div>
        </div>
        <a>
          <span><i class="iconfont icon-jiantou"></i></span>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
import data from '@/data'

export default {
  data () {
    return {
      keyword: ''
    }
  },
  computed: {
    listData () {
      let list = []

      data.modules.forEach(m => {
        if (m.title === '全部') {
          return
        }
        m.children.forEach(item => {
          if (~item.name.indexOf(this.keyword)) {
            list.push({...item, title: m.title})
          }
        })
      })
      return list
    }
  },
  methods: {
    tapSearch (item) {
      let {type} = this.$route.query
      if (type === 'map' || type === 'info' || type === 'home') {
        this.$router.push({name: 'info',
          params: {
            title: item.title,
            show: item.name
          }
        })
      } else {
        this.$router.push({
          name: 'item',
          params: type === 'type' ? {title: '全部', type: item.title, show: item.name} : {title: item.title, type: '全部', show: item.name}
        })
      }
    }
  }
}
</script>

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