<template>
    <div v-if="model">

        <!-- Thêm các trường khác nếu có -->
        <form @submit.prevent="onSubmit" class="form-horizontal">
            <div class="form-group row mb-3">
                <label class="col-md-3 form-label">Slug</label>
                <div class="col-md-9">
                    <input type="text" class="form-control" v-model="model.Slug" />
                </div>
            </div>
            <div class="form-group row mb-3">
                <label class="col-md-3 form-label">Meta Title</label>
                <div class="col-md-9">
                    <input type="text" class="form-control" v-model="model.MetaTitle" />
                </div>
            </div>
            <div class="form-group row mb-3">
                <label class="col-md-3 form-label">Meta Description</label>
                <div class="col-md-9">
                    <textarea class="form-control" v-model="model.MetaDescription" rows="3"></textarea>
                </div>
            </div>
            <div class="form-group row mb-3">
                <label class="col-md-3 form-label">Meta Keywords</label>
                <div class="col-md-9">
                    <input type="text" class="form-control" v-model="model.MetaKeywords" />
                </div>
            </div>
            <div class="form-group row mb-3">
                <label class="col-md-3 form-label">Priority</label>
                <div class="col-md-9">
                    <input type="number" class="form-control" v-model="model.Priority" step="0.01" min="0" max="1" />
                </div>
            </div>
            <div class="form-group row mb-3">
                <label class="col-md-3 form-label">Frequency</label>
                <div class="col-md-9">
                    <select class="form-control" v-model="model.Frequency">
                        <option value="1">Không bao giờ</option>
                        <option value="2">Hàng năm</option>
                        <option value="3">Hàng tháng</option>
                        <option value="4">Hàng tuần</option>
                        <option value="5">Hàng ngày</option>
                        <option value="6">Hàng giờ</option>
                        <option value="7">Liên tục</option>
                    </select>
                </div>
            </div>
            <div class="form-group row mb-3">
                <label class="col-md-3 form-label">Include in Sitemap</label>
                <div class="col-md-9">
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" v-model="model.IncludeInSiteMap" />
                        <label class="form-check-label">Include in sitemap</label>
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-md-9 offset-md-3">
                    <button type="submit" class="btn btn-primary">
                        <i class="fe fe-save me-1"></i>Lưu thay đổi
                    </button>
                </div>
            </div>
        </form>
    </div>
    <div v-else>
        Đang tải...
    </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import urlRecordService from "@/services/cms/urlRecordService";
import { useToast } from "vue-toastification";

const toast = useToast();

const props = defineProps({
    id: {
        type: [String, Number],
        required: true
    }
});

const model = ref(null);

const loadData = async () => {
    if (props.id) {
        model.value = await urlRecordService.getById(props.id);
    }
};

const onSubmit = async () => {
    try {
        const result = await urlRecordService.update(model.value);
        if (result && result.Result === 1) {
            toast.success('Cập nhật thành công!');
        } else {
            toast.error('Cập nhật thất bại: ' + (result?.Message || ''));
        }
        loadData();
    } catch (error) {
        toast.error('Có lỗi xảy ra khi cập nhật');
        console.error(error);
    }
};

onMounted(loadData);
watch(() => props.id, loadData);
</script>
