<template>
    <div>
        <div v-if="loading" class="row">
            <div class="col-12 tx-semibold text-center text-default">
                <span class="spinner-border spinner-border-sm"></span>
            </div>
        </div>
        <form v-if="!loading" @submit.prevent="onSubmit">
            <div class="mb-3 row">
                <div class="col-md-8">
                    <label class="form-label">Tên Script</label>
                    <input v-model="form.Name" class="form-control" required />
                </div>
                <div class="col-md-4">
                    <label class="form-label">Vị trí</label>
                    <select v-model="form.Position" class="form-control">
                        <option :value="1">Header</option>
                        <option :value="2">Body</option>
                        <option :value="3">Footer</option>
                    </select>
                </div>
            </div>
            <div class="mb-3 row">
                <div class="col-md-9">
                    <label class="form-label">Mô tả</label>
                    <input v-model="form.Description" class="form-control" />
                </div>
                <div class="col-md-3">
                    <label class="form-label">&nbsp;</label>
                    <div class="form-check form-switch">
                        <input type="checkbox" v-model="form.IsActive" class="form-check-input"
                            style="margin-left: 0;" />
                        <label class="form-check-label" style="margin-left: 35px;">Kích hoạt</label>
                    </div>
                </div>
            </div>
            <div class="mb-3">
                <label class="form-label">Nội dung Script</label>
                <textarea v-model="form.ScriptContent" class="form-control" rows="8" required></textarea>
            </div>
            <div class="d-flex justify-content-end">
                <button type="button" class="btn btn-secondary me-2" @click="$emit('cancel')">Hủy</button>
                <button type="submit" class="btn btn-primary">Lưu</button>
            </div>
        </form>
    </div>
</template>

<script setup>
import { reactive, watch, ref, onMounted } from 'vue';
import scriptConfigService from '@/services/cms/scriptConfigService';

const props = defineProps({
    modelValue: Object,
    id: Number
});
const emit = defineEmits(['update:modelValue', 'submit', 'cancel']);

const loading = ref(false);
const form = reactive({
    Id: 0,
    Name: '',
    ScriptContent: '',
    IsActive: true,
    Position: 0,
    Description: ''
});

async function fetchData(id) {
    if (!id || id <= 0) {
        Object.assign(form, {
            Id: 0,
            Name: '',
            ScriptContent: '',
            IsActive: true,
            Position: 0,
            Description: ''
        });
        return;
    }
    loading.value = true;
    const data = await scriptConfigService.getById(id);
    if (data) {
        Object.assign(form, data);
    }
    loading.value = false;
}

watch(() => props.id, (val) => {
    fetchData(val);
}, { immediate: true });

function onSubmit() {
    emit('submit', { ...form });
}
</script>