<template>
    <div>
        <Form @submit="onSubmit" :validation-schema="schema" v-slot="{ errors, isSubmitting }">
            <div class="alert alert-warning">
                <i class="fe fe-alert-triangle me-2"></i>
                Bạn có chắc chắn muốn hủy hóa đơn này không? Hành động này không thể hoàn tác.
            </div>

            <div class="mb-3">
                <label class="form-label">Lý do từ chối <span class="text-danger">*</span></label>
                <Field name="cancelReason" as="textarea" rows="3" v-model="form.cancelReason" class="form-control"
                    :class="{ 'is-invalid': errors.cancelReason }" placeholder="Nhập lý do từ chối hóa đơn..."
                    @keydown.enter.prevent />
                <div class="invalid-feedback">{{ errors.cancelReason }}</div>
            </div>


            <div class="d-flex justify-content-end gap-2">
                <button type="button" class="btn btn-secondary" @click="$emit('cancel')">Hủy</button>
                <button type="submit" class="btn btn-danger" :disabled="isSubmitting">
                    <span v-show="isSubmitting" class="spinner-border spinner-border-sm me-2"></span>
                    <i v-show="!isSubmitting" class="fe fe-x me-2"></i>
                    {{ isSubmitting ? 'Đang xử lý...' : 'Xác nhận từ chối' }}
                </button>
            </div>
        </Form>
    </div>
</template>

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

const emit = defineEmits(['confirmed', 'cancel']);

const form = reactive({
    cancelReason: ''
});

const schema = Yup.object().shape({
    cancelReason: Yup.string()
        .required('Vui lòng nhập lý do từ chối')
        .min(10, 'Lý do từ chối phải có ít nhất 10 ký tự'),
});

function onSubmit() {
    emit('confirmed', {
        cancelReason: form.cancelReason.trim()
    });
}
</script>

<style scoped>
.invalid-feedback {
    display: block;
}
</style>