<template>
  <q-btn
    flat
    square
    unelevated
    padding="0"
    :ripple="false"
    @click="onClickFunction"
    :to="routerTo"
  >
    <div class="left-menu-button-content">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="48"
        height="48"
        fill="none"
        viewBox="0 0 48 48"
      >
        <path
          :fill="color.outerColor"
          fill-rule="evenodd"
          d="M0 33.659 14.344 48h29.982L48 44.324v-30.03L33.7 0 3.674.009 0 3.682V33.66Z"
          clip-rule="evenodd"
        />
        <path
          :fill="color.innerColor"
          fill-opacity=".9"
          fill-rule="evenodd"
          d="m1.959 32.828 13.224 13.221h28.29L46 43.523V37.09l-2.16-2.45V20.516l2.16-2.45V15.19L32.776 1.969H4.486L1.959 4.493v6.89l2.159 2.448v14.126l-2.16 2.449v2.421Z"
          clip-rule="evenodd"
        />
      </svg>

      <div class="absolute-full flex flex-center mybutton">
        <q-avatar square text-color="white" :icon="icon" />
      </div>
    </div>
    <q-tooltip>
      {{ item.tooltip }}
    </q-tooltip>
  </q-btn>
</template>

<script>
export default {
  name: "LeftMenuButton",
  props: {
    item: {
      type: Object,
      default: () => {
        return {
          name: "NAME",
          innerColor: "#5F8CEA",
          outerColor: "#6666FF",
          color: "blue",
          icon: "simpleCircleIcon.svg",
          tooltip: "NAME",
          action: "",
        };
      },
    },
    color: {
      type: Object,
      default: () => {
        return {
          innerColor: "#8282BF",
          outerColor: "#4A4AFF",
          color: "blue",
        };
      },
    },
  },
  setup() {
    return {};
  },
  computed: {
    routerTo() {
      if (this.item.action) {
        if (typeof this.item.action === "string") {
          return this.item.action;
        }
      }
      return "";
    },
    onClickFunction() {
      if (this.item.action) {
        if (typeof this.item.action === "function") {
          return this.item.action;
        }
      }
      return "";
    },
    icon() {
      if (this.item.icon) {
        const arr = this.item.icon.split(".");
        if (arr.length === 1) {
          return this.item.icon;
        }
        if (arr.length > 1) {
          return "img:" + this.item.icon;
        }
      }
      return null;
    },
  },
};
</script>
<style scoped>
.left-menu-button-content {
  display: grid;
}
.left-menu-button-content > svg,
.left-menu-button-content > div {
  grid-area: 1/-1;
}
.left-menu-button-wide {
  padding-right: 14px;
}

.left-menu-button-text {
  margin: auto;
}
svg * {
  transition: all 1s;
}
</style>
