<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 v-for="item in listData" :key="item.name">
        <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 in item.tags" :key="tag">{{tag}}</span>
          </div>
        </div>
        <a @click="$router.push({name: 'info', params: {title: item.title, show: item.name}})">
          <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 => {
        m.children.forEach(item => {
          if (~item.name.indexOf(this.keyword)) {
            list.push({...item, title: m.title})
          }
        })
      })
      console.log(list)
      return list
    }
  }
}
</script>

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