<template>
    <section class="flex flex-col gap-6 w-96">
        <ul class="flex flex-col gap-5">
            <li class="flex items-center justify-between">
                <strong>{{ $t('کد تخفیف') }}</strong>
                <div class="flex items-center gap-2 w-max">
                    <span>{{ coupon.coupon.code }}</span>
                </div>
            </li>
     
        <li class="flex items-center justify-between">
                <strong>{{ $t('id') }}</strong>
                <span>{{ coupon.coupon.id }}</span>
            </li>
        
        
            <li class="flex items-center justify-between">
                <strong>{{ $t('createdAt') }}</strong>
                <span>{{ jDate(coupon.coupon.createdAt) }}</span>
            </li>
            <li class="flex items-center justify-between">
                <strong>{{ $t('تاریخ شروع') }}</strong>
                <span>{{ jDate(coupon.coupon.startDate) }}</span>
            </li>
            <li class="flex items-center justify-between">
                <strong>{{ $t('تاریخ انقضا') }}</strong>
                <span>{{ jDate(coupon.coupon.endDate) }}</span>
            </li>
            <li class="flex items-center justify-between">
                <strong>{{ $t('ایجاد شده توسط') }}</strong>
                <span>{{ coupon.coupon.admin.name }}</span>
            </li>
            <li class="flex items-center justify-between">
                <strong>{{ $t('وضعیت تخفیف') }}</strong>
                <span>{{ coupon.coupon.status === "Active" ? 'فعال' : 'غیرفعال' }}</span>
            </li>
            <li class="flex items-center justify-between">
                <strong>{{ $t('تغییر وضعیت') }}</strong>
                <Tag v-if="coupon.coupon.status === 'DeActivate'" @click="changeToActive" class="cursor-pointer" severity="success" value="فعال سازی"></Tag>
                <Tag v-if="coupon.coupon.status === 'Active'" @click="changeToDeActive" class="cursor-pointer" severity="danger" value="غیرفعال سازی"></Tag>
            </li>

        </ul>
    </section>

</template>

<script setup>
import { inject, reactive } from 'vue';
import { jDate } from '@/utils/jDate';

import {useDiscountStore} from '../stores/discounts'
const store = useDiscountStore()

const {  toast, t } = inject("service");

const changeToDeActive = async() =>{
    const change = await store.changeStatus({
        id: coupon.coupon.id,
        status: 'DeActivate'
    })
    if (change === true) {
  toast.add({
      life: 2000,
      severity: "success",
      summary: t("successful"),
      detail: t("وضعیت ویرایش شد"),
    });
    store.index()
    dialog.value.close()
 }else{
  return toast.add({
      life: 2000,
      severity: "error",
      summary: t("error"),
      detail: t("خطا، محدد تلاش کنید"),
    });
 }
    
}
const changeToActive = async() => {
   const change = await store.changeStatus({
        id: coupon.coupon.id,
        status: 'Active'
    })
    if (change === true) {
  toast.add({
      life: 2000,
      severity: "success",
      summary: t("successful"),
      detail: t("وضعیت ویرایش شد"),
    });
    store.index()
    dialog.value.close()
 }else{
  return toast.add({
      life: 2000,
      severity: "error",
      summary: t("error"),
      detail: t("خطا، محدد تلاش کنید"),
    });
 }
    
};

const dialog = inject('dialogRef')

const coupon = reactive(Object.assign({}, dialog.value.data))

const confirmToSales = (value) => {
    dialog.value.data.confirm(user, value)
}
</script>

<style lang="scss" scoped></style>