<template>
   <div class="menu-con" :style="{ padding: loading ? '0 30rpx' : '0' }">
    <div class="menu-list flex-default">
      <div
        class="flex-item flex-default"
        v-for="(item, index) of menuList"
        :key="'menu-item-' + index"
        @click="handleClick(item)"
      >
        <img class="menu-icon" :src="item.functionImage" />
        <div class="text">{{ item.functionName }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      menuList: [],
    };
  },
  methods: {
    requestData() {
      this.loading = true;
      this.$api({
        apiName: "getMenuList",
        success: (res) => {
          this.menuList = res;
          setTimeout(() => {
            this.loading = false;
            this.$emit("loadSuccess");
          }, 500);
        },
      });
    },
    handleClick(item) {
      if (item.url == "develop") {
        return this.$toast("功能正在开发中~");
      }

      let query = {};
      if (item.param) {
        let params = JSON.parse(item.param);
        for (let param of params) {
          query[param.name] = param.val;
        }
      }
      this.$router.push({ name: item.url, query });
    },
  },
};
</script>

<style lang="less">
.menu-con .menu-list {
  flex-wrap: wrap;
  padding-bottom: 16px;

  .flex-item {
    width: 20%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 12px;
  }

  .flex-item > .text {
    font-size: 12px;
    color: #707070;
  }

  .flex-item > .menu-icon {
    text-align: center;
    height: 58px;
    width: 58px;
    line-height: 58px;
    border-radius: 16px;
    margin-bottom: 7px;
    // background-color: #d8d8d8;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }
}
</style>
