<template>
  <div class="main-menu">
    <q-list no-border>
      <div
        v-for="colls in menuData"
        :key="colls.menu_id"

      >
      <!-- v-if = "colls.menu_id !='admin'" -->
        <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: "area",
    },
  },
  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) {
      if (itm.jump) {
        this.$root.FnPageSwitch(itm.another_url, null, true);
      } else {
        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;
          // console.log(this.menuData);
        }
      });
    }
  }
}
</script>

<style scoped>

.main-menu {
  background-image: linear-gradient(-45deg, rgb(36, 103, 201), rgb(36, 103, 201), rgb(36, 90, 211), rgb(36, 75, 193), rgb(35, 75, 203));
  color: #fff;
  height: 100%;
  font-size: 20pt !important;
}

.main-menu .q-list {
/*  background: transparent !important;*/
  background: linear-gradient(-45deg, rgb(36, 103, 201), rgb(36, 103, 201), rgb(36, 90, 211), rgb(36, 75, 193), rgb(35, 75, 203));
}

.q-collapsible .q-collapsible-inner .q-collapsible-sub-item .q-list.no-border {
  background: transparent !important;
}

.main-menu .q-list .q-item {
  font-weight: 600;
}

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

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

.main-menu .select-color {
  background-image: linear-gradient(rgb(255, 255, 255) 0%, rgb(250, 249, 252) 30%, rgb(223, 229, 254) 60%, rgb(208, 218, 255) 100%);
  color: rgb(0, 0, 0);
  border-radius: 3px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 20px 25px -5px;
  font-weight: 600 !important;
  width: 95%;
  margin: auto;
}

.q-item-side {
  color: rgb(36, 75, 195);
}

.main-menu .select-color .q-item-section .q-item-icon {
  color: rgb(0, 0, 0);
  margin: auto !important;
}

</style>