<template>
  <q-item
    clickable
    v-ripple
    class="q-pa-none"
    @click="onClickFunction"
    :to="routerTo"
    exact
    exact-active-class="my-exact-active-class"
  >
    <q-item-section avatar>
      <div class="right-menu-button-content">
        <svg
          width="48"
          height="48"
          viewBox="0 0 48 48"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M0 14.341L14.3441 0L44.3255 0.000850677L48 3.67445L47.9997 33.7041L33.701 48L3.67425 47.9912L0 44.3176C0 33.5459 0 25.2147 0 14.341Z"
            :fill="color.outerColor"
          />
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M1.95898 15.172L15.1834 1.95047L43.4731 1.95047L46.0001 4.4771V10.9103L43.8407 13.3593L43.8407 27.4846L45.9999 29.9341V32.8105L32.7757 46.032L4.48606 46.0328L1.95898 43.5062L1.95898 36.6167L4.11813 34.1675L4.11813 20.0419L1.95898 17.5932L1.95898 15.172Z"
            :fill="color.innerColor"
            fill-opacity="0.9"
          />
        </svg>

        <div class="absolute-full flex flex-center mybutton">
          <q-avatar text-color="white" :icon="icon" square />
        </div>
      </div>
    </q-item-section>
    <q-item-section>
      <q-item-label text-color="white" style="user-select: none">{{
        item.name
      }}</q-item-label>
    </q-item-section>
  </q-item>
</template>

<script>
export default {
  name: "RightMenuButton",
  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",
        };
      },
    },
  },
  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;
    },
  },
  setup() {
    return {};
  },
};
</script>
<style scoped>
.right-menu-button-content {
  display: grid;
  position: relative;
}
.right-menu-button-content > svg,
.right-menu-button-content > div {
  grid-area: 1/-1;
}

.right-menu-button-text {
  margin: auto;
}
svg * {
  transition: all 1s;
}
.my-exact-active-class {
  color: white;
  font-weight: 900;
}
</style>
