<template>
  <div>
    <q-btn
      v-for="itm in menuData"
      :key="itm.menu_id"
      flat
      dense
      @click="OnClick(itm)"
      :icon="itm.icon"
      :label="itm.name"
      size="lg"
      :class="$root.VarMenuPage==itm.menu_id || selectMenuItemParent.menu_id==itm.menu_id ? 'w3-dark-grey w3-text-white' : 'w3-text-black'"
    >
      <q-popover v-if="!_.isEmpty(itm.children)">
        <q-list
          separator
          link
        >
          <q-item
            v-for="child in itm.children"
            :key="child.menu_id"
            v-close-overlay
            @click.native="OnClick(child)"
            :class="'w3-large '+($root.VarMenuPage==child.menu_id?'w3-dark-grey w3-text-white':'')"
          >
            <q-item-side
              :icon="child.icon"
              :class="($root.VarMenuPage==child.menu_id?'w3-dark-grey w3-text-white':'')"
            ></q-item-side>
            <q-item-main :label="child.name"></q-item-main>
          </q-item>
        </q-list>
      </q-popover>
    </q-btn>
  </div>
  <!--icon fontAwesome 4.7 URL：https://fontawesome.com/v4/icons/ -->
</template>

<script>
/*
usage:
  
*/
module.exports = {
  props: {
    "page-name": String,
  },
  data () {
    return {
      "menuData": [],
      "ok": true,
    }
  },
  computed: {
    selectMenuItemParent () { // 目前頁面選單的父層(放在html判斷用)
      if (this.$root.VarMenuPage == "" || this.$root.VarMenuPage == 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.$root.VarMenuPage;
              });
              if (childItem != null) {
                return this.menuData[idx];
              }
            }
          } catch (e) { }
        }
        return false;
      }
    }
  },
  mounted () {
    this.GetMenu();
  },
  methods: {
    OnClick (itm) {
      if (_.isString(itm.url) && itm.url == "") return;
      if (!_.isEmpty(itm.children)) return;
      this.$root.FnPageSwitch(itm.url);
    },
    GetMenu () {
      return this.$root.FnWebAPIGet({
        Action: "MenuLoad",
        menu_page: "sys_component",
        Datas: { "menu": this.$root.VarMenu },
      }).then((res) => {
        if (res.data.result) {
          this.menuData = res.data.data;
        }
      });
    }
  }
}
</script>

<style scoped>
</style>