<template>
  <a
    :href="urlResolver()"
    @click.prevent="goToRouteName()"
    class="d-md-flex justify-content-sm-center align-items-center"
  >
    <h2 class="counter-number mb-2 mb-md-0">
      <span :class="counter.key + '-timer'">{{ counter.count }}</span>
    </h2>
    <div class="d-flex flex-column align-items-center align-items-lg-start">
      <p class="counter-text">{{ counter.title }}</p>
      <p class="counter-date">از تاریخ: {{ counter.date }}</p>
    </div>
  </a>
</template>

<script>
import "assets/common/vendors/counter/counter.js";

export default {
  props: ["counter"],
  mounted() {
    const vm = this;

    $(`.${vm.counter.key}-timer`).countTo({
      from: 0,
      to: vm.counter.total,
      speed: 7000,
      refreshInterval: 50,
      onComplete: function (value) {
        // console.debug(this);
      },
    });
  },
  methods: {
    goToRouteName() {
      this.$router.push({
        name: "searchResult",
        query: {
          q: undefined,
          key: this.counter.routeName,
        },
      });
    },
    urlResolver() {
      const routeData = this.$router.resolve({
        name: "searchResult",
        query: {
          q: undefined,
          key: this.counter.routeName,
        },
      });
      return routeData.href;
    },
  },
};
</script>

<style lang="scss" scoped>
.counter-container {
  // padding: 0.3em;
  // display: flex;
  // align-items: center;
  // border-radius: 1em;

  // &:hover {
  //   background-color: rgba(255, 255, 255, 0.3);
  // }
}
.counter-number {
  // font-family: sahel-semi-bold;
  // font-size: 3rem;
  // color: #fff;
  // direction: ltr;
  // margin: 0;

  // font-family: var(--font-family);
  min-width: 3.2em;
  // font-size: 3635px;
  font-size: 2.57rem;
  font-weight: 700;
  // line-height: 30px;
  line-height: 2.14rem;
  letter-spacing: 0em;
  color: var(--dashboard-text-primary);
  margin-bottom: 0;
  margin-left: 0.5em;
}
.counter-text {
  // font-family: var(--font-family);
  // font-size: 16px;
  font-size: 1.14rem;
  font-weight: 700;
  // line-height: 30px;
  line-height: 2.14rem;
  letter-spacing: 0em;
  color: var(--dashboard-text-primary);
  margin: 0;
  white-space: nowrap;

  // font-family: sahel-light;
  // font-size: 1.2rem;
  // color: #fff;
}
.counter-date {
  // font-family: var(--font-family);
  // font-size: 16px;
  font-size: 1.14rem;
  font-weight: 400;
  // line-height: 30px;
  line-height: 2.14rem;
  letter-spacing: 0em;
  text-align: center;
  color: var(--dashboard-text-primary);
  margin: 0;
  white-space: nowrap;
}
</style>