<template>
    <div>
        <div class="breadcrumb-header justify-content-between">
            <div class="my-auto">
                <h4 class="page-title">Tạo dịch vụ</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 dịch vụ</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-product' }">
                                <i class="fe fe-arrow-left me-2"></i>Danh sách dịch vụ
                            </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-9 col-md-8">
                <General ref="generalRef"></General>
            </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[1]" title="Ảnh đại diện" :preOpen="true">
                            <FeaturedPicture ref="featuredPictureRef"></FeaturedPicture>
                        </LadaAccordion>

                        <LadaAccordion :id="accIds[3]" title="Từ khóa" :preOpen="true">
                            <Tags ref="tagRef"></Tags>
                        </LadaAccordion>

                        <LadaAccordion :id="accIds[4]" title="Danh mục" :preOpen="true">
                            <Categories ref="categoryRef"></Categories>
                        </LadaAccordion>
                    </div>
                </div>


            </div>
        </div>

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

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

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

import Categories from './components/Categories.vue';

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

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

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

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


//#endregion

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


//#region DATA

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

const loading = ref(false);
let productModel = reactive({
    Id: 0,
    Name: '',
    ShortDescription: '',
    ProductType: 1,
    Description: '',
    TOC: '',
    Thumbnail: '',
    Tags: [],
    ProductCategoryModels: [],
});


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 productResult = await productService.getById(postId);
    console.log(productResult);
    productModel.Id = productResult.Id;
    productModel.Name = productResult.Name;
    productModel.ShortDescription = productResult.ShortDescription;
    productModel.ProductType = productResult.ProductType;
    productModel.Description = productResult.Description;
    productModel.Thumbnail = productResult.Thumbnail;
    productModel.Tags = productResult.Tags;
    productModel.ProductCategoryModels = productResult.ProductCategoryModels;
    generalRef.value.init(productModel);
    featuredPictureRef.value.init(productModel);
    tagRef.value.init(productModel);
    categoryRef.value.init(productModel);
}


async function onSubmit() {
    var general = await generalRef.value.onSubmit();
    var featuredPicture = await featuredPictureRef.value.onSubmit();
    var category = await categoryRef.value.onSubmit();
    var tags = await tagRef.value.onSubmit();
    if (general.IsValid) {
        productModel.Name = general.Name;
        productModel.ShortDescription = general.ShortDescription;
        productModel.ProductType = general.ProductType;
        productModel.Description = general.Description;
        productModel.TOC = general.TableOfContent;
        productModel.Thumbnail = featuredPicture.Thumbnail;
        productModel.Tags = tags;
        productModel.UpdatedByUserName = "";
        productModel.UpdatedBy = 0;
        productModel.ProductCategoryModels = category;

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

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

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

</script>
