<template>
    <div>
        <div class="breadcrumb-header justify-content-between">
            <div class="my-auto">
                <h4 class="page-title">Tạo bài viết</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 bài viết</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-post' }">
                                <i class="fe fe-arrow-left me-2"></i>Danh sách bài viết
                            </router-link>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <ul class="nav nav-style-6 nav-pills mb-3" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" data-bs-toggle="tab" href="#content" role="tab">
                                    <i class="fe fe-file-text me-1"></i>Nội dung
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-bs-toggle="tab" href="#seo" role="tab">
                                    <i class="fe fe-globe me-1"></i>SEO
                                </a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active" id="content" role="tabpanel">
                                <div class="row">

                                    <div class="col-lg-9 col-md-8">
                                        <General ref="generalRef"></General>
                                        <div class="col-12 mb-3">
                                            <div class="d-flex justify-content-end">
                                                <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 class="col-lg-3 col-md-4">
                                        <div class="card shadow-none rounded-0" style="min-height: 100vh;">
                                            <div class="card-body p-0">
                                                <LadaAccordion :id="accIds[0]" title="Thông tin chung" :preOpen="true"
                                                    bodyClass="p-0">
                                                    <Summary ref="summaryRef"></Summary>
                                                </LadaAccordion>
                                                <LadaAccordion :id="accIds[1]" title="Ảnh đại diện" :preOpen="true">
                                                    <FeaturedPicture ref="featuredPictureRef"></FeaturedPicture>
                                                </LadaAccordion>
                                                <LadaAccordion :id="accIds[2]" title="Danh mục" :preOpen="true"
                                                    bodyClass="p-0">
                                                    <Categories ref="categoryRef"></Categories>
                                                </LadaAccordion>
                                                <LadaAccordion :id="accIds[3]" title="Từ khóa" :preOpen="true">
                                                    <Tags ref="tagRef"></Tags>
                                                </LadaAccordion>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="tab-pane" id="seo" role="tabpanel">
                                <div class="row">
                                    <div class="col-12 mb-3">
                                        <div class="card">
                                            <div class="card-body">
                                                <UrlRecordDetail :id="postModel.UrlRecordId" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </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 Categories from './components/Categories.vue';
import Tags from './components/Tags.vue';
import Summary from './components/Summary.vue';
import FeaturedPicture from './components/FeaturedPicture.vue';
import General from './components/General.vue';
import UrlRecordDetail from '@/views/cms/urlRecord/detail.vue';

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

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


//#endregion

//#region Services
import postService from "@/services/postService";
//#endregion


//#region DATA

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

const loading = ref(false);
let postModel = reactive({
    Id: 0,
    UrlRecordId: 0,
    Title: '',
    ShortDescription: '',
    Description: '',
    TOC: '',
    Status: 10,
    Visibility: 10,
    ValidFrom: new Date(),
    Thumbnail: '',
    PostCategoryModels: [],
    Tags: [],
    IsFeaturedPost: false
});


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 send() {

}


async function getById(id) {
    var postId = parseInt(id);
    var postResult = await postService.getById(postId);
    console.log(postResult);
    postModel.Id = postResult.Id;
    postModel.Title = postResult.Title;
    postModel.Description = postResult.Description;
    postModel.ShortDescription = postResult.ShortDescription;
    postModel.Status = postResult.Status;
    postModel.Visibility = postResult.Visibility;
    postModel.ValidFrom = postResult.ValidFrom;
    postModel.Thumbnail = postResult.Thumbnail;
    postModel.PostCategoryModels = postResult.PostCategoryModels;
    postModel.Tags = postResult.Tags;
    postModel.IsFeaturedPost = postResult.IsFeatured;
    postModel.UrlRecordId = postResult.UrlRecordId;
    console.log(featuredPictureRef);
    generalRef.value.init(postModel);
    summaryRef.value.init(postModel);
    featuredPictureRef.value.init(postModel);
    categoryRef.value.init(postModel);
    tagRef.value.init(postModel);
}


async function onSubmit() {
    var general = await generalRef.value.onSubmit();
    var featuredPicture = await featuredPictureRef.value.onSubmit();
    var summary = await summaryRef.value.onSubmit();
    var categories = await categoryRef.value.onSubmit();
    var tags = await tagRef.value.onSubmit();
    if (general.IsValid) {
        postModel.Title = general.Title;
        postModel.ShortDescription = general.ShortDescription;
        postModel.Description = general.Description;
        postModel.TOC = general.TableOfContent;


        postModel.Thumbnail = featuredPicture.Thumbnail;
        postModel.Visibility = summary.Visibility;
        postModel.ValidFrom = summary.ValidFrom;
        postModel.IsFeatured = summary.IsFeaturedPost;
        postModel.PostCategoryModels = categories;
        postModel.Tags = tags;
        postModel.UpdatedByUserName = "";
        postModel.UpdatedBy = 0;

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

        } else {
            toast.error('Thất bại: ' + postResult.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);
        postModel.Id = props.id;
    }

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

</script>
