<template>
    <div>
        <div class="breadcrumb-header justify-content-between">
            <div class="my-auto">
                <h4 class="page-title">Tạo topic</h4>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="javascript:void(0);">Trang chủ</a></li>
                    <li class="breadcrumb-item"><a href="javascript:void(0);">CMS</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Tạo topic</li>
                </ol>
            </div>
        </div>
        <div class="row g-0">
            <LoadingOverlay v-model="loading" />
            <div class="col-12">
                <div class="card shadow-sm mg-b-10">
                    <div class="card-body p-3">
                        <div class="d-flex flex-row justify-content-between">
                            <router-link class="btn btn-link button-icon" :to="{ name: 'cms-topic' }">
                                <i class="fe fe-arrow-left me-2"></i>Danh sách topic
                            </router-link>
                            <div>

                                <!-- <button @click="send" type="button" class="btn btn-default button-icon mg-l-20">
                                    <i class="fas fa-paper-plane me-2"></i>Gửi duyệt
                                </button> -->

                                <button @click="onSubmit" type="button" class="btn btn-primary button-icon">
                                    <i class="fe fe-save me-2"></i>Lưu lại
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-12">
                <General ref="generalRef"></General>
            </div>

        </div>

    </div>
</template>
<script setup>

import { ref, onMounted, reactive } from 'vue';

import { useRouter } from 'vue-router';
const router = useRouter();

//#region props
const props = defineProps({
    id: {
        type: String,
        default: ''
    }
});
//#endregion

//#region components
import General from './components/General.vue';

//#region Toast
import { useToast } from "vue-toastification";
const toastOption = {

};
const toast = useToast();
//#endregion


//#endregion

//#region Services
import topicService from "@/services/cms/topicService";
//#endregion


//#region DATA

const generalRef = ref(null);
const featuredPictureRef = ref(null);
const tagRef = ref(null);
const categoryRef = ref(null);

const loading = ref(false);
let topicModel = reactive({
    Id: 0,
    SystemName: '',
    Title: '',
    Description: '',
    TOC: '',
});


var tmpIds = [];
var startIndex = Math.floor(Math.random() * 100);
for (let index = 0; index < 4; index++) {
    var idIndex = startIndex + index + 1;
    var time = (new Date()).getTime();
    tmpIds.push('la' + idIndex + time);
}
const accIds = ref(tmpIds);


//#endregion

//#region Methods


async function getById(id) {
    var postId = parseInt(id);
    var topicResult = await topicService.getById(postId);
    console.log(topicResult);
    topicModel.Id = topicResult.Id;
    topicModel.SystemName = topicResult.SystemName;
    topicModel.Title = topicResult.Title;
    topicModel.Description = topicResult.Description;
    topicModel.TOC = topicResult.TOC;
    topicModel.IncludeInFooterBottom = topicResult.IncludeInFooterBottom;
    topicModel.IncludeInFooterColumn1 = topicResult.IncludeInFooterColumn1;
    topicModel.IncludeInFooterColumn2 = topicResult.IncludeInFooterColumn2;
    topicModel.IncludeInFooterColumn3 = topicResult.IncludeInFooterColumn3;
    generalRef.value.init(topicModel);
}


async function onSubmit() {
    var general = await generalRef.value.onSubmit();
    if (general.IsValid) {
        topicModel.SystemName = general.SystemName;
        topicModel.Title = general.Title;
        topicModel.Description = general.Description;
        topicModel.TOC = general.TOC;
        topicModel.IncludeInFooterBottom = general.IncludeInFooterBottom;
        topicModel.IncludeInFooterColumn1 = general.IncludeInFooterColumn1;
        topicModel.IncludeInFooterColumn2 = general.IncludeInFooterColumn2;
        topicModel.IncludeInFooterColumn3 = general.IncludeInFooterColumn3;
        topicModel.UpdatedByUserName = "";
        topicModel.UpdatedBy = 0;

        var topicResult = await topicService.createOrUpdate(topicModel);
        if (topicResult != null && topicResult.Result === 1) {
            toast.success('Thành công!');
            if (topicModel.Id <= 0) {
                router.push({ name: 'cms-topic-update', params: { id: topicResult.Id } });
            } else {
                await getById(topicModel.Id);
            }

        } else {
            toast.error('Thất bại: ' + topicResult.Message);
        }
    } else {
        console.log('da vao day');
        toast.error('Vui lòng điền đầy đủ thông tin');
    }
}


//#endregion

//#region Events
onMounted(async () => {
    loading.value = true;
    if (props.id > 0) {
        await getById(props.id);
        topicModel.Id = props.id;
    }

    loading.value = false;
})
//#endregion

</script>
