<template>
  <div class="main-menu">
    <q-list no-border>
      <div
        v-for="colls in menuData"
        :key="colls.menu_id"
      >
        <q-collapsible
          :icon="colls.icon"
          :label="$t('menu.'+colls.menu_id)"
          v-if="colls.children"
          :opened="selectMenuItemParent && selectMenuItemParent.menu_id==colls.menu_id"
        >
          <q-list no-border>
            <q-item
              v-for="itm in colls.children"
              :key="itm.menu_id"
              :class="pageName==itm.menu_id ? 'select-color' : ''"
              style="cursor:pointer;"
              @click.native="onClick(itm,event)"
            >
              <q-item-side :icon="itm.icon"></q-item-side>
              <q-item-main :label="$t('menu.'+itm.menu_id)"></q-item-main>
            </q-item>
          </q-list>
        </q-collapsible>
        <div v-if="!colls.children">
          <q-item
            :class="pageName==colls.menu_id ? 'select-color' : ''"
            style="cursor:pointer;"
            @click.native="onClick(colls,event)"
          >
            <q-item-side :icon="colls.icon"></q-item-side>
            <q-item-main :label="$t('menu.'+colls.menu_id)">
          </q-item>
        </div>
      </div>
    </q-list>
  </div>
  <!--icon fontAwesome 4.7 URL：https://fontawesome.com/v4/icons/ -->
</template>

<script>
module.exports = {
  props: {
    "page-name": String,
    "menu": {
      default: "shopee",
    },
  },
  data () {
    return {
      "menuData": []
    }
  },
  computed: {
    selectMenuItemParent () { // 目前頁面選單的父層(放在html判斷用)
      if (this.pageName == "" || this.pageName == null) {
        return false;
      } else {
        for (let idx in this.menuData) {
          try {
            if (!_.isUndefined(this.menuData[idx].children) && _.isArray(this.menuData[idx].children)) {
              let childItem = this.menuData[idx].children.find((item) => {
                return item.menu_id == this.pageName;
              });
              if (childItem != null) {
                return this.menuData[idx];
              }
            }
          } catch (e) { }
        }
        return false;
      }
    }
  },
  mounted () {
    this.GetMenu();
  },
  methods: {
    onClick (itm) {
      this.$root.FnPageSwitch(itm.url);
    },
    async GetMenu () {
      await this.$root.FnWebAPIGet({
        Action: "MenuLoad",
        menu_page: "sys_component",
        Datas: { "menu": this.menu },
      }).then((res) => {
        if (res.data.result) {
          this.menuData = res.data.data;
        }
      });
    }
  }
}
</script>

<style scoped>
.main-menu {
  background-color: #334048;
  color: #fff;
  height: 100%;
  font-size: 14pt !important;
}

.main-menu .q-list {
  background-color: #334048;
}

.main-menu .q-list .q-item {
  font-size: 13pt;
}

.main-menu .q-item-side {
  color: #fff !important;
}

.main-menu .q-list-header {
  color: #f7e6cc;
  font-size: 12pt;
}

.main-menu .select-color {
  background-color: #676f76;
  color: #fff;
}
</style>