<template>
    <div>

        <div class="d-flex p-2 border-top">

            <label>
                <i class="fa fa-satellite-dish me-1"></i>
                <span class="me-2">Trạng thái:</span>
                <b>{{ postModel.StatusName }}</b>

            </label>


        </div>


        <div class="d-flex p-2 border-top">
            <label>
                <i class="fa fa-eye me-1"></i>
                <span class="me-2">Hiển thị:</span>
                <b>{{ postModel.VisibilityName }}</b>

            </label>


            <div class="btn-group ms-auto">

                <button type="button" class="btn btn-link ms-auto dropdown-toggle text-warning btn-sm"
                    data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="fa fa-pen"></i>

                </button>
                <ul class="dropdown-menu" style="">
                    <li v-if="postModel.Visibility != 10" @click="changeVisibility(10)">
                        <a class="dropdown-item" href="javascript:void(0);">
                            <i class="fas fa-eye"></i>
                            Công khai
                        </a>
                    </li>

                    <li v-if="postModel.Visibility != 20" @click="changeVisibility(20)">
                        <a class="dropdown-item" href="javascript:void(0);">
                            <i class="fas fa-user-shield"></i>
                            Nội bộ
                        </a>
                    </li>
                    <li v-if="postModel.Visibility != 25" @click="changeVisibility(25)">
                        <a class="dropdown-item" href="javascript:void(0);">
                            <i class="fas fa-key"></i>
                            Mật khẩu bảo vệ
                        </a>
                    </li>
                    <li v-if="postModel.Visibility != 13" @click="changeVisibility(13)">
                        <a class="dropdown-item" href="javascript:void(0);">
                            <i class="fas fa-eye-slash"></i>
                            Ngừng hiển thị
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="d-flex p-2 border-top">
            <label>
                <i class="fa fa-calendar me-1"></i>
                <span class="me-2">Lịch xuất bản:</span>
                <b v-if="postModel.IsPublishNow">Xuất bản ngay</b>
                <b v-if="!postModel.IsPublishNow">{{ postModel.ValidFromDateText }}</b>
            </label>
            <button @click="schedule" type="button" class="btn btn-link ms-auto text-warning btn-sm">
                <i class="fa fa-calendar"></i>
                Đặt lịch
            </button>
        </div>
        <div class="d-flex p-2 border-top">
            <label class="ckbox">
                <i class="fa fa-satellite-dish"></i>
                <input v-model="postModel.IsFeaturedPost" type="checkbox" class="mb-2">
                <span class="p-0">Là bài viết nổi bật</span>


            </label>
            <!--<label>
                <i class="fa fa-satellite-dish me-1"></i>
                <span class="me-2">Là bài viết nổi bật:</span>
                <b>{{ postModel.IsFeaturedPost }}</b>

            </label>-->


        </div>
        <LadaDialog :visible="showScheduleDate">

            <template #body>
                <label>Chọn ngày xuất bản:</label>
                <VueDatePicker ref="scheduleDatePicker" v-model="currentScheduleDate" :enable-time-picker="true"
                    auto-apply :format="format" @update:model-value="handleDate">
                </VueDatePicker>
                <div class="row mt-3">
                    <div class="col-12 ">
                        <div class="d-flex flex-row-reverse">
                            <button @click="cancel" type="button" class="btn btn-main-default mg-l-15">
                                Bỏ qua
                            </button>
                            <button @click="confirmSchedule" type="button" class="btn btn-main-primary">
                                <!-- <span v-show="isSubmitting" class="spinner-border spinner-border-sm"></span> -->
                                Xác nhận
                            </button>
                        </div>
                    </div>
                </div>
            </template>

        </LadaDialog>
    </div>
</template>
<script setup>
import { ref, onMounted, reactive, watch } from 'vue';
import moment from "moment";


//#region Data
const showScheduleDate = ref(false);
const currentScheduleDate = ref(null);
const postModel = reactive({
    Id: 0,
    Status: 10,
    StatusName: 'Biên tập',
    Visibility: 10,
    VisibilityName: 'Công khai',
    ValidFrom: null,
    ValidFromDateText: '',
    IsPublishNow: true,
    IsFeaturedPost: false
});
const statuses = reactive([
    { Id: 10, Name: 'Biên tập' },
    { Id: 15, Name: 'Chờ xuất bản' },
    { Id: 20, Name: 'Xuất bản' },
    { Id: 30, Name: 'Hệ thống quản lý tài khoản' }
]);
const visibilities = reactive([
    { Id: 10, Name: 'Công khai' },
    { Id: 20, Name: 'Nội bộ' },
    { Id: 25, Name: 'Mật khẩu bảo vệ' },
    { Id: 13, Name: 'Ngừng hiển thị' }
]);

//#endregion

//#region Methods



const onSubmit = async () => {
    return postModel;
};

const init = (initModel) => {
    postModel.Id = initModel.Id;
    postModel.Status = initModel.Status;
    postModel.Visibility = initModel.Visibility;
    postModel.IsFeaturedPost = initModel.IsFeaturedPost;
    if (initModel.ValidFrom != null) {
        postModel.ValidFrom = moment(initModel.ValidFrom).toDate();
        postModel.ValidFromDateText = moment(postModel.ValidFrom).format("DD/MM/YYYY HH:mm");
        var currentDate = new Date();
        if (postModel.ValidFrom <= currentDate) {
            postModel.IsPublishNow = true;
        } else {

            postModel.IsPublishNow = false;
        }
    }


};

const changeVisibility = async (visibilityId) => {
    postModel.Visibility = parseInt(visibilityId);
};

const schedule = () => {
    currentScheduleDate.value = postModel.ValidFrom;
    showScheduleDate.value = true;
};
const confirmSchedule = () => {
    if (currentScheduleDate != null) {
        postModel.ValidFrom = currentScheduleDate.value;
    }
    cancel();
}
const cancel = () => {
    showScheduleDate.value = false;
}

const format = (date) => {
    return `Ngày đã chọn: ${moment(date).format("DD/MM/YYYY HH:mm")}`;
}

function handleDate(modelData) {
    if (modelData != null) {
        currentScheduleDate.value = modelData;
    } else {
        currentScheduleDate.value = null;
    }
}




//#endregion

//#region Events

//#endregion

watch(() => postModel.Status, (newStatus) => {
    for (let index = 0; index < statuses.length; index++) {
        const status = statuses[index];
        if (status.Id == newStatus) {
            postModel.StatusName = status.Name;
            break;
        }
    }

});
watch(() => postModel.Visibility, (newVisibility) => {

    for (let index = 0; index < visibilities.length; index++) {
        const visibility = visibilities[index];

        if (visibility.Id == newVisibility) {
            postModel.VisibilityName = visibility.Name;
            break;
        }
    }

});


watch(() => postModel.ValidFrom, (newValidFrom) => {
    console.log('vao day roi');

    postModel.ValidFromDateText = moment(newValidFrom).format("DD/MM/YYYY HH:mm");
    var currentDate = new Date();

    if (newValidFrom <= currentDate) {
        postModel.IsPublishNow = true;
    } else {
        postModel.IsPublishNow = false;
    }
})

defineExpose({
    onSubmit,
    init
})
</script>