<template>
  <div id="footers">
    <van-grid :column-num="list.length" clickable>
      <van-grid-item v-for="(i, index) in list" :key="`menu-${index}`" :text="i.label" :to="i.router" />
    </van-grid>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, createNamespacedHelpers } from 'vuex';
const { mapActions: column } = createNamespacedHelpers('column');
export default {
  name: 'footers',
  props: {},
  components: {},
  data: function () {
    return {
      list: [],
    };
  },
  mounted() {
    this.initMenu();
  },
  methods: {
    ...column(['query']),
    ...mapMutations(['setMenu']),
    async initMenu() {
      let columns = sessionStorage.getItem('columns');
      if (!columns) {
        let res = await this.getColumns();
        columns = res;
      }
      columns = JSON.parse(columns);
      this.setMenu(columns);
      this.$set(this, `list`, this.getMenu(this.keyWord));
    },
    async getColumns() {
      const res = await this.query();
      if (this.$checkRes(res)) {
        sessionStorage.setItem('columns', JSON.stringify(res.data));
        return JSON.stringify(res.data);
      }
    },
  },
  computed: {
    ...mapState(['user', 'menuParams']),
    ...mapGetters(['getMenu']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
    keyWord() {
      return this.$route.meta.key;
    },
  },
  watch: {
    $route: {
      handler(to, form) {
        this.initMenu();
      },
      deep: true,
      immediate: true,
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
/deep/.van-grid-item__content {
  padding: 11px 8px;
}
</style>
