<template>
    <div>
        <div class="d-flex flex-row-reverse btn-list mg-b-10">

            <button v-if="orderStatus === 1 && editable" @click.one="updateStatus(1)" :disabled="loading" type="button"
                class="btn btn-danger mx-2 button-icon mb-1"><i class="fas fa-times me-2"></i>Hủy
                đơn</button>
            <button v-if="orderStatus === 8 && editable" @click.one="updateStatus(8)" :disabled="loading" type="button"
                class="btn btn-info mx-2 button-icon mb-1"><i class="fas fa-times me-2"></i>Bỏ hủy </button>
            <!-- <button type="button" class="btn btn-secondary button-icon mb-1"><i class="fe fe-link"></i></button>
            <button type="button" class="btn btn-info mx-2 button-icon mb-1"><i
                    class="fe fe-message-circle me-2"></i>Comment</button> -->
        </div>
        <LadaDialog :visible="modalControl.UpdateStatus">
            <template #header>
                <div class="modal-header">
                    <h5 class="modal-title">{{ dialogTitle }}</h5>
                    <button @click="closeModal" type="button" class="close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </template>

            <template #body>
                <Form @submit="statusSubmit" :validation-schema="schema" v-slot="{ errors, isSubmitting }" class="row">
                    <div class="col-12">
                        <loader class="m-3" v-if="loading"></loader>
                        <div class="form-group mb-3" v-if="!loading">
                            <label>Lý do</label>
                            <Field v-focus v-model="statusModel.Name" name="Name" type="text" class="form-control"
                                placeholder="lý do" :class="{ 'is-invalid': errors.Name }" />

                            <div class="invalid-feedback">{{ errors.Name }}</div>
                        </div>
                    </div>

                    <div class="col-12 ">
                        <div class="d-flex flex-row-reverse">
                            <button @click="closeModal" type="button" class="btn btn-main-default mg-l-15">
                                Bỏ qua
                            </button>
                            <button type="submit" class="btn btn-main-primary" :disabled="isSubmitting">
                                <span v-show="isSubmitting" class="spinner-border spinner-border-sm"></span>
                                Xác nhận
                            </button>
                        </div>
                    </div>
                </Form>
            </template>

        </LadaDialog>
    </div>
</template>

<script setup>
import { ref, reactive, watch, onMounted } from 'vue';
import { Form, Field, ErrorMessage } from 'vee-validate';
import * as Yup from 'yup';

import orderService from "@/services/orderService";
import { useToast } from "vue-toastification";
const toast = useToast();


const props = defineProps({
    orderId: Number,
    orderStatus: Number,
    orderPhysicalStatus: Number,
    editable: Boolean
});

//#region Modals
const modalControl = reactive({
    UpdateStatus: false
});
function closeModal() {
    modalControl.UpdateStatus = false;
}
//#endregion


const loading = ref(false);

const emit = defineEmits(['reload']);

const statusUpdate = ref(0); //1: hủy đơn, 2: bỏ hủy
const dialogTitle = ref();




const statusModel = reactive({
    Id: props.orderId,
    Name: '',
    UpdatedByUserName: ''
});

//#region Validations
const schema = Yup.object().shape({
    Name: Yup.string().required('Lý do hủy không để trống'),
});
//#endregion

async function updateStatus(val) {

    val = parseInt(val);
    switch (val) {
        case 1:
            dialogTitle.value = "Hủy đơn hàng";
            statusUpdate.value = 1;
            break;
        case 8:
            dialogTitle.value = "Bỏ hủy đơn hàng";
            statusUpdate.value = 8;
            break;
        default:
            break;
    }
    modalControl.UpdateStatus = true;




}
async function statusSubmit() {

    var result;
    console.log(statusUpdate.value);
    switch (statusUpdate.value) {
        case 1:
            result = await orderService.Cancel(statusModel);
            break;
        case 8:
            result = await orderService.RemoveCancel(statusModel);
            break;
        default:
            loading.value = false;
            break;
    }

    if (result != null && result.Result === 1) {
        toast.success('Thành công!');
        closeModal();
        emit('reload');
    } else {
        toast.error('Thất bại: ' + result.Message);
    }
    loading.value = false;
}




</script>