<template>
    <div class="pre-factor">
        <div>
            <h2>
                <i class="isax isax-receipt-2"></i>
                <span>{{ $t("submitPreFactor") }}</span>
            </h2>
            <p>{{ $t("submitPreFactorDesc") }}</p>
        </div>
        <PanelSalesFactor :data="data" />
        <ul>
            <li v-for="(btn, key) in btns" :key="key">
                <Button v-bind="btn.props" @click="click(key)" />
            </li>
        </ul>
    </div>
</template>

<script setup>
import init from '../../../initialize/pre-factor.js'
const { btns } = init();
const dialog = inject('dialogRef');
const data = dialog.value.data
const router = useRouter()

const click = (key) => {
    if (key == 'send')
        router.push({ path: '/panel/factors', query: { id: data._id } });

    dialog.value.close()
}
</script>

<style lang="scss">
.pre-factor {
    @apply flex flex-col gap-8 rounded-2xl w-[77.5rem] py-8 bg-white overflow-y-auto;

    &>div:nth-of-type(1) {
        @apply flex flex-col items-center;

        h2 {
            @apply flex items-center gap-4 text-[#333333];

            i {
                @apply text-2xl;
            }

            span {
                @apply text-xl font-bold font-vazir;
            }
        }

        p {
            @apply w-[30.2rem] mt-[1.1rem] text-center text-[#4C4C4C] text-lg font-vazir;
        }
    }

    &>ul {
        @apply w-full flex gap-4 px-8;

        li {
            button {
                @apply w-full h-12 #{!important};

                .p-button-label {
                    @apply h-[1.6rem] text-lg font-medium font-iran-sans;
                }

                .p-button-icon {
                    @apply text-2xl text-[#7F7F7F];
                }

                &.p-button-secondary {
                    @apply border-[#7F7F7F] justify-center;

                    .p-button-label {
                        @apply grow-0 text-[#7F7F7F];
                    }
                }
            }
        }

        li:nth-of-type(1) {
            @apply w-[12.3rem];
        }

        li:nth-of-type(2) {
            @apply w-[12.3rem] ml-auto;
        }

        li:nth-of-type(3) {
            @apply w-[25.1rem];
        }

        li:nth-of-type(4) {
            @apply w-[10.8rem];
        }
    }
}

body:has(.pre-factor) {
    .sales-factor {
        h2 {
            @apply hidden #{!important};
        }
    }
}
</style>
