<template>
  <div class="nav-bar">
    <div class="inner">
      <ul class="list">
        <li
          v-for="(item, index) in navList(
            componentData.list,
            componentData.selectList
          )"
          :key="index"
          class="item"
        >
          <span>{{ item.name }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
/**
 * @author: 过飞
 * @createData: 2020年09月14日 16:03:36
 * @version：v1.0
 *
 * @desc: 功能描述
 */
export default {
  name: '',

  components: {},

  mixins: [],

  props: {
    componentData: {
      type: Object,
      default: () => ({})
    }
  },

  data() {
    return {}
  },

  computed: {},

  watch: {},

  created() {},

  mounted() {},

  methods: {
    navList(list, selectList) {
      console.log('过滤的数据', list, selectList)
      return list.map(item => {
        const findItem = selectList.find(s_item => {
          return s_item.name === item
        })
        return findItem
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.nav-bar {
  .inner {
    overflow: hidden;
    .list {
      display: flex;
      width: 200%;
      justify-content: flex-start;
      list-style: none;
      margin: 0;
      padding: 0 10px 0;
      .item {
        padding: 5px;
        margin: 0 5px 0;
      }
    }
  }
}
</style>
