<template>
  <div class="menu-content">
    <Title :title="title" />
    <div class="menu-wrapper">
      <div class="menu-item" v-for="(item, index) in menuList" :key="index" v-show="item.isShowItem" @click="clickItem(item)">
        <img :src="item.url" :alt="item.name" />
        <span>{{ item.name }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    menuList: {
      type: Array,
      default: () => []
    }
  },
  name: 'homeMenu',
  data() {
    return {
      showTitle: true
    }
  },
  methods: {
    clickItem(val) {
      console.log('clickItem', val)
      // 跳转页面 val.path
      if (val.path) {
        uni.navigateTo({
          url: val.path
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.menu-content {
  margin-top: 20px;
  margin-bottom: 28px;
  width: 100%;

  .menu-wrapper {
    padding-left: 16px;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-wrap: wrap;
    .menu-item {
      width: 25%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      padding: 10px 0;
      img {
        width: 40px;
        height: 40px;
      }
      span {
        font-weight: 400;
        font-size: 12px;
        color: #0f274b;
        margin-top: 6px;
      }
    }
  }
}
</style>
