<template>
    <ul>
        <li type="button" v-for="(item, index) in items" :key="index">
            <button
        :class="{ active: item.key == $route.name }"
                @click.prevent="schemasItem(item, index)"
            >
                {{ item.label }}
            </button>
        </li>
    </ul>
</template>

<script>
import { mapActions } from "pinia";

export default {
    props: {
        items: {
            default() {
                return [
          // { key:'issues', label: "مساله" },
          // { key:'answers', label: "پاسخ" },
          // { key:'critions', label: "معیار" },
            ];
            },
        },
        routeTempalte: {
      firstActive: false, // برای بار اول فعالیت دکمه پیش فرض انجام شود
            activate: "route", // route  history  none  // نحوه رفتار در تغییر نوبار
            key: "routename", // کلید اصلی را از کجا بردارد
            template: "key={{key}}",
        },
    },
    data() {
        return {
            mode: 0,
        };
    },
    mounted() {
        let index = 0;
        if (this.routeTempalte.firstActive) {
            setTimeout(() => {
                if (this.$route.query.key) {
                    index = this.items.findIndex(
                        (item) => item.key == this.$route.query.key
                    );
                    if (index == -1) index = 0;
                }
                if (index < this.items?.length)
                    this.schemasItem(this.items[index], index);
            }, 300);
        }
    },
    methods: {
        schemasItem(item, index) {
            this.mode = index;

            let full_path = this.$route.fullPath;

            let key1 = "";
            let key2 = "";
            if (this.routeTempalte.key == "routename") {
                let prevKey = this.$route.name;
                key1 = this.routeTempalte.template.replace("{{key}}", prevKey);
                key2 = this.routeTempalte.template.replace("{{key}}", item.key);
            } else {
                this.$set(this.$route.query, "key", item.key);
            }

            let newRoutePath = full_path.replace(`${key1}`, `${key2}`);

            if (this.routeTempalte.activate == "route")
                this.$router.push({ path: newRoutePath });
            else if (this.routeTempalte.activate == "history")
                history.pushState({}, document.title, newRoutePath);

            this.$emit("change-link", key2);
        },
    },
};
</script>
<style lang="scss" scoped>
button {
    border: none;
    background: white;
}
.active {
    color: var(--primary-color);
    position: relative;
    &::after {
        content: "";
        border-bottom: 2px solid var(--primary-color);
        position: absolute;
        top: 40px;
        right: 0px;
        width: 100%;
    }
}
</style>