<template>
  <div id="lilcity__course-redactor" v-on:course_publish="onCoursePublish" v-on:course_preview="onCoursePreview">
    <div v-if="!courseLoading && !mounting">
      <form v-if="viewSection !== 'lessons-edit'" @submit.prevent="onSubmit">
        <div class="info">
          <div class="info__section">
            <div class="courses__item">
              <div class="courses__preview">
                <img class="courses__pic" name="course-cover" :src="course.coverImage || defaultCover" width="300px" />
                <div class="upload" v-if="! course.coverImage">
                  <div class="upload__title">Загрузить превью</div>
                  <input type="file" class="upload__file" name="course-cover-upload" @change="onCoverImageSelected">
                </div>
                <a href="#" title="Удалить превью" class="course-delete-cover" v-if="course.coverImage" @click="removeCover"
                name="course-cover-delete">
                  <svg class="icon icon-delete">
                    <use xlink:href="/static/img/sprite.svg#icon-delete"></use>
                  </svg>
                </a>
              </div>
              <div class="courses__details">
                <div class="field-category courses__theme theme field info__field--light" v-if="!live" v-bind:class="{ error: (!$v.live && $v.course.category.$dirty || showErrors) && $v.course.category.$invalid }">
                  <lil-select :value.sync="course.category" :options="categoryOptions"
                                placeholder="Выберите категорию" name="course-category"/>
                </div>
                <div class="courses__old-price" v-if="course.is_paid && course.old_price"><s>{{ course.old_price }}₽</s></div>
                <div class="courses__price" v-if="course.is_paid && course.price">{{ course.price }}₽</div>
              </div>
              <div class="courses__title field field" v-bind:class="{ error: ($v.course.title.$dirty || showErrors) && $v.course.title.$invalid }">
                <textarea class="field__textarea" name="course-title"
                          rows="1"
                          :title="titles.courseTitle"
                          v-autosize="course.title"
                          @change="onCourseNameInput"
                          v-model="course.title"
                          placeholder="Добавить заголовок"></textarea>
              </div>
              <div class="courses__content field" style="width: 300px;" name="course-short-description"
                 v-bind:class="{ error: ($v.course.short_description.$dirty || showErrors) && $v.course.short_description.$invalid }">
                <vue-redactor :value.sync="course.short_description" placeholder="Добавить краткое описание"/>
              </div>
            </div>
          </div>
          <div class="info__sidebar">
            <div class="info__wrap">
              <div class="info__fieldset" style="margin-bottom: 20px;">
                <div v-if="!live" class="info__field field">
                  <div class="field__label field__label_gray">ССЫЛКА</div>
                  <div class="field__wrap">
                    <input type="text" class="field__input" name="course-slug" v-model="course.slug" @input="slugChanged = true">
                  </div>
                  <div class="field__wrap field__wrap--additional">{{ courseFullUrl }}</div>
                </div>

                <div v-if="live" class="info__field field"
                     v-bind:class="{ error: ($v.course.stream.$dirty || showErrors) && $v.course.stream.$invalid }">
                  <div class="field__label field__label_gray">ССЫЛКА НА VIMEO</div>
                  <div class="field__wrap">
                    <input type="text" name="course-stream" class="field__input" v-model="course.stream">
                  </div>
                </div>

                <!-- <div v-if="live" class="info__field field"
                     v-bind:class="{ error: ($v.course.date.$dirty || showErrors) && $v.course.date.$invalid }">
                  <div class="field__label">ДАТА</div>
                  <div class="field__wrap">
                    <lil-select :value.sync="course.date" :options="scheduleOptions" placeholder="Выберите дату"/>
                  </div>
                </div> -->

                <div v-if="!live" class="info__field field">
                  <div class="field__label field__label_gray">ДОСТУП</div>
                  <div class="field__wrap">
                    <label class="field__switch switch switch_lg switch_circle">
                      <input type="radio" :value="false" class="switch__input" v-model="course.is_paid"
                         name="course-is-paid-input">
                      <span class="switch__content" name="course-is-paid-no">Бесплатный</span>
                    </label>
                    <label class="field__switch switch switch_lg switch_circle">
                      <input type="radio" :value="true" class="switch__input" v-model="course.is_paid"
                        name="course-is-paid-input">
                      <span class="switch__content" name="course-is-paid-yes">Платный</span>
                    </label>
                  </div>
                </div>

                <div class="info__field field field_info" v-if="!live && course.is_paid"
                     v-bind:class="{ error: ($v.course.access_duration.$dirty || showErrors)
                     && $v.course.access_duration.$invalid }">
                  <div class="field__label field__label_gray">ПРОДОЛЖИТЕЛЬНОСТЬ ДОСТУПА</div>
                  <div class="field__wrap field__wrap__appended">
                    <input type="text" class="field__input field__input__appended" v-model.number="course.access_duration"
                           @input="$v.course.access_duration.$touch()">
                    <button disabled class="field__append">{{pluralize(course.access_duration, ['день', 'дня', 'дней'])}}</button>
                  </div>
                </div>

                <div style="display: flex;">
                  <div v-if="course.is_paid" class="info__field field">
                    <div class="field__label field__label_gray">СТОИМОСТЬ</div>
                    <div class="field__wrap field__wrap__appended" style="width: 120px;">
                      <input type="text" class="field__input field__input__appended" v-model.number.lazy="displayPrice">
                      <button disabled class="field__append">руб.</button>
                    </div>
                  </div>
                  <div v-if="course.is_paid" class="info__field field" style="margin-left: 10px;">
                    <div class="field__label field__label_gray">СТОИМОСТЬ БЕЗ СКИДКИ</div>
                    <div class="field__wrap field__wrap__appended">
                      <input type="text" class="field__input field__input__appended" v-model.number.lazy="displayOldPrice">
                      <button disabled class="field__append">руб.</button>
                    </div>
                  </div>
                </div>
                <div v-if="!live" class="info__field field">
                  <div class="field__label field__label_gray">ВОЗРАСТ</div>
                  <div class="field__wrap">
                    <lil-select :value.sync="course.age" :options="ages" value-key="value" name="course-age"
                                placeholder="Выберите возраст"/>
                  </div>
                </div>
                <label v-if="me && !live && me.role === ROLE_ADMIN" class="info__switch switch switch_lg">
                  <input type="checkbox" class="switch__input" v-model="course.is_featured">
                  <span class="switch__content" name="course-is-featured">Выделить</span>
                </label>
              </div>
              <div v-if="!live" class="info__fieldset">
                <div class="info__field field">
                  <div class="field__label field__label_gray">ЗАПУСК</div>
                  <div class="field__wrap">
                    <label class="field__switch switch switch_lg switch_circle">
                      <input type="radio" :value="false" class="switch__input" v-model="course.is_deferred"
                        name="course-is-deferred-input">
                      <span class="switch__content" name="course-is-deferred-no">Мгновенный</span>
                    </label>
                    <label class="field__switch switch switch_lg switch_circle">
                      <input type="radio" :value="true" class="switch__input" v-model="course.is_deferred"
                        name="course-is-deferred-input">
                      <span class="switch__content" name="course-is-deferred-yes">Отложенный</span>
                    </label>
                  </div>
                </div>
                <div class="datetime-fields" v-show="course.is_deferred">
                  <div class="info__field field">
                    <div class="field__label">ДАТА</div>
                    <div class="field__wrap">
                      <vue-datepicker :disabled="disabledDates" input-class="field__input" name="course-date"
                                      v-model="course.date" language="ru" format="dd/MM/yyyy"/>
                    </div>
                  </div>
                  <div class="field-time info__field field">
                    <div class="field__label">ВРЕМЯ</div>
                    <div class="field__wrap">
                      <lil-select :value.sync="course.time" value-key="value" :options="timeOptions" name="course-time"
                                  placeholder="Выберите время"/>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="section">
          <div class="section__center center">
            <div class="kit" style="margin: 0 auto;">
              <div v-if="!live" id="course-redactor__nav" class="kit__nav">
                <button class="kit__btn btn btn_lg" name="course-content-btn"
                        v-bind:class="{ 'btn_stroke': viewSection === 'course', 'btn_gray': viewSection !== 'course' }"
                        type="button" @click="showCourse">Описание
                  курса
                </button>
                <button class="kit__btn btn btn_lg" name="course-lessons-btn"
                        v-bind:class="{ 'btn_stroke': viewSection === 'lessons', 'btn_gray': viewSection !== 'lessons' }"
                        type="button"
                        @click="showLessons"
                        :disabled="!course.id">
                  Уроки
                </button>
              </div>
              <div v-if="viewSection === 'course'" class="kit__body">
                <block-content :content.sync="course.content" name="course-content"></block-content>

                <!--<div class="kit__foot">
                  <button type="submit" class="kit__submit btn btn_md" v-bind:class="{ loading: courseSaving }">
                    Сохранить
                  </button>
                </div>-->
              </div>
              <div v-if="viewSection === 'lessons'" class="kit__body">
                <div class="lessons__title title">Содержание курса</div>
                <div v-if="!lessonsLoading" class="lessons__list">
                  <vue-draggable v-model="lessons" @start="drag=true" @end="onLessonsChanged" name="course-lessons"
                                 :options="{ handle: '.sortable__handle' }">
                    <div class="lessons__item" v-for="(lesson, index) in lessons" :key="lesson.id">
                        <div class="lessons__actions">
                          <button class="sortable__handle" type="button">
                            <svg class="icon icon-hamburger">
                              <use xlink:href="/static/img/sprite.svg#icon-hamburger"></use>
                            </svg>
                          </button>
                          <button type="button" class="lessons__action" @click="removeLesson(index)">
                            <svg class="icon icon-delete">
                              <use xlink:href="/static/img/sprite.svg#icon-delete"></use>
                            </svg>
                          </button>
                          <button type="button" class="lessons__action" @click="editLesson(index)">
                            <svg class="icon icon-edit">
                              <use xlink:href="/static/img/sprite.svg#icon-edit"></use>
                            </svg>
                          </button>
                        </div>
                        <div class="lessons__subtitle subtitle">{{ lesson.title }}</div>
                        <div class="lessons__row">
                          <div class="lessons__content" v-html="lesson.short_description"></div>
                        </div>
                      </div>
                  </vue-draggable>
                </div>
                <div v-if="lessonsLoading">Загрузка...</div>
                <div class="lessons__foot">
                  <button type="button" class="lessons__btn btn btn_md" @click="addLesson"
                          name="course-add-lesson">СОЗДАТЬ УРОК</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </form>
      <form v-if="viewSection === 'lessons-edit'" @submit.prevent="onLessonSubmit">
        <lesson-redactor :$v="$v" :lesson.sync="currentLesson" :saving.sync="lessonSaving" :access-token="accessToken"
                           v-on:back="goToLessons" name="course-lesson-edit" />
      </form>
    </div>
    <div v-else>
      <div class="section">
        <div class="section__center center">
          <h1>Загрузка...</h1>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import { ROLE_ADMIN, ROLE_AUTHOR } from './consts'
    import LinkInput from './inputs/LinkInput'
    import DatePicker from 'vuejs-datepicker'
    import BlockContent from './blocks/BlockContent'
    import VueRedactor from './redactor/VueRedactor';
    import LilSelect from "./inputs/LilSelect";
    import LessonRedactor from "./LessonRedactor";
    import {api} from "../js/modules/api";
    import $ from 'jquery';
    import {required, minValue, numeric, url } from 'vuelidate/lib/validators'
    import slugify from 'slugify';
    import Draggable from 'vuedraggable';
    import {showNotification} from "../js/modules/notification";
    import createHistory from "history/createBrowserHistory";
    import moment from 'moment'
    import _ from 'lodash'

    const history = createHistory();

    export default {
        name: "course-redactor",
        props: ["authorName", "authorPicture", "accessToken", "courseId", "live"],
        data() {
            return {
                disabledDates: {
                    to: new Date(new Date().setDate(new Date().getDate() - 1)),
                },
                titles: {},
                mounting: false,
                viewSection: 'course',
                me: null,
                users: null,
                ROLE_ADMIN: ROLE_ADMIN,
                slugChanged: false,
                defaultCover: '/img/no_cover.png',
                course: {
                    title: '',
                    status: null,
                    category: null,
                    categorySelect: null,
                    access_duration: null,
                    author: null,
                    price: null,
                    old_price: null,
                    age: 0,
                    slug: '',
                    url: '',
                    coverImage: '',
                    kit__body: null,
                    is_paid: false,
                    is_featured: true,
                    is_deferred: false,
                    date: '',
                    stream: '',
                    time: null,
                    short_description: '',
                    content: [],
                    gallery: {
                        images: [],
                    }
                },
                courseLoading: false,
                courseSaving: false,
                lessons: [],
                lessonsLoading: false,
                lessonSaving: false,
                currentLesson: {
                    title: '',
                    short_description: '',
                    content: [],
                },
                is_adding_block: false,
                timeOptions: [
                    {
                        'title': '10:00',
                        'value': '10:00',
                    },
                    {
                        'title': '11:00',
                        'value': '11:00',
                    },
                    {
                        'title': '12:00',
                        'value': '12:00',
                    },
                    {
                        'title': '13:00',
                        'value': '13:00',
                    },
                    {
                        'title': '14:00',
                        'value': '14:00',
                    },
                    {
                        'title': '15:00',
                        'value': '15:00',
                    },
                    {
                        'title': '16:00',
                        'value': '16:00',
                    },
                    {
                        'title': '17:00',
                        'value': '17:00',
                    },
                    {
                        'title': '18:00',
                        'value': '18:00',
                    }
                ],
                ages: [
                    {
                        'title': 'Любой возраст',
                        'value': 0,
                    },
                    {
                        'title': 'до 5',
                        'value': 1,
                    },
                    {
                        'title': '5-10',
                        'value': 2,
                    },
                    {
                        'title': '10-18',
                        'value': 3,
                    },
                    {
                        'title': 'от 18',
                        'value': 4,
                    },
                ],

                weekdays: [
                    '',
                    'Понедельник',
                    'Вторник',
                    'Среда',
                    'Четверг',
                    'Пятница',
                    'Суббота',
                    'Воскресенье',
                ],
                fields: {
                    title: "Заголовок",
                    short_description: "Краткое описание",
                    stream: "Ссылка на Vimeo",
                    date: "Дата",
                    access_duration: "Продолжительность доступа",
                    category: "Категория",
                },
                lessonFields: {
                    title: "Название урока",
                    short_description: "Описание урока",
                },
                showErrors: false,
                savingTimeout: null,
                savingDebounceTimeout: null,
                categoryOptions: [],
                scheduleOptions: [],
                courseSyncHook: false, // Если true, то watch не будет отправлять курс на обновление
            }
        },
        validations() {
            if(this.live) {
                return {
                    course: {
                        title: {
                            required
                        },
                        short_description: {
                            required
                        },
                        stream: {
                            required,
                            // url
                        },
                        date: {
                            required
                        },
                    },
                };
            } else {
                return {
                    course: {
                        title: {
                            required
                        },
                        short_description: {
                            required
                        },
                        access_duration: {
                            required: this.course.is_paid ? required : false,
                            numeric,
                            minValue: minValue(1)
                        },
                        category: {
                            required,
                            numeric,
                            minValue: minValue(1)
                        },
                    },
                    currentLesson: {
                        title: {
                            required
                        },
                        short_description: {
                            required
                        },
                    }
                };
            }
        },
        methods: {
            removeCover() {
                if(! this.course.coverImageId){
                    return;
                }
                api.removeImage(this.course.coverImageId, this.accessToken)
                    .then(response => {
                        this.course.coverImageId = null;
                        this.course.coverImage = null;
                    });
            },
            onCoverImageSelected(event) {
                let file = event.target.files[0];
                let reader = new FileReader();
                reader.onload = () => {
                    this.$set(this.course, 'coverImage', reader.result);
                    api.uploadImage(reader.result, this.accessToken)
                        .then((response) => {
                            this.course.coverImageId = response.data.id;
                        })
                        .catch((error) => {
                            //console.log('error', error);
                        });
                };
                if (file) {
                    reader.readAsDataURL(file);
                }
            },
            onCoursePriceChange(event) {
                this.course.price = event.target.value;
            },
            onCourseNameInput() {
                this.$v.course.title.$touch();
                if (!this.slugChanged && !this.$v.course.status) {
                    this.course.slug = (slugify(this.course.title) || '').toLowerCase();
                }
            },
            removeLesson(lessonIndex) {
                if (!confirm('Вы действительно хотите удалить этот урок?')) {
                    return;
                }
                const lesson = this.lessons[lessonIndex];
                if (lesson.hasOwnProperty('id') && lesson.id) {
                    api.removeCourseLesson(lesson.id, this.accessToken);
                }
                this.lessons.splice(lessonIndex, 1);
                this.onLessonsChanged();
            },
            editLesson(lessonIndex) {
                this.currentLesson = this.lessons[lessonIndex];
                history.push(`/course/${this.course.id}/lessons/${this.currentLesson.id}/edit`);
                this.viewSection = 'lessons-edit';
            },
            showCourse() {
                if (this.viewSection !== 'course') {
                  history.push(this.course.id ? `/course/${this.course.id}/edit` : "/course/create");
                }
                this.viewSection = 'course'
            },
            showLessons() {
                if (this.viewSection !== 'lessons') {
                  history.push(`/course/${this.course.id}/edit/lessons`);
                }
                this.viewSection = 'lessons';
            },
            addLesson() {
                this.currentLesson = {
                    title: '',
                    short_description: '',
                    content: [],
                };
                if (this.viewSection !== 'lessons-edit') {
                    history.push(`/course/${this.course.id}/lessons/new`);
                }
                this.viewSection = 'lessons-edit';
                window.scrollTo(0, 0);
            },
            onSubmit() {
                //console.log('onSubmit');
                this.courseSaving = true;
                api.saveCourse(this.course, this.accessToken)
                    .then((response) => {
                        this.courseSaving = false;
                        this.course = api.convertCourseJson(response.data);
                        this.course.live = this.live;
                    })
                    .catch((err) => {
                        this.courseSaving = false;
                    });
            },
            onLessonSubmit() {
                if(!this.validateLesson()) {
                    return new Promise(function(resolve, reject) {
                        reject('validation reject');
                    });
                }
                showNotification("success", "Момент, вносим последние правки!");

                return this.saveLesson();
            },
            saveLesson() {
                this.lessonSaving = true;
                const currentLessonId = this.currentLesson.id;
                this.currentLesson.course_id = this.course.id;
                let req = api.saveLesson(this.currentLesson, this.accessToken);

                req.then((response) => {
                        const newLesson = api.convertLessonJson(response.data);
                        newLesson.course_id = this.course.id;
                        this.currentLesson = newLesson;
                        if (!currentLessonId) {
                            this.lessons.push(newLesson);
                        }
                        if (this.lessons && Array.isArray(this.lessons)) {
                            this.lessons.forEach((lesson, index) => {
                                if (newLesson.id === lesson.id) {
                                    this.$set(this.lessons, index, newLesson);
                                }
                            });
                        }

                        this.changeSavingStatus(true);
                        showNotification("success", 'Урок сохранён');
                        // this.goToLessons();

                        this.lessonSaving = false;
                    })
                    .catch((err) => {
                        this.lessonSaving = false;
                        //console.error(err);
                        this.changeSavingStatus(true, true);
                        // alert('Произошло что-то страшное: '+err.toString());
                        console.log(err);
                        if(err.response) {
                            for(let i in err.response.data) {
                                if(typeof err.response.data[i] === "array") {
                                    showNotification("error", this.lessonFields[i]+": "+err.response.data[i].join(', '));
                                }
                            }
                        }
                    });

                return req;
            },
            goToLessons() {
                history.push(`/course/${this.course.id}/edit/lessons`);
                this.viewSection = 'lessons';
                this.$nextTick(() => {
                    const elementTop = $('#course-redactor__nav').position().top - 130;
                    $(window).scrollTop(elementTop);
                });
            },
            processCourseJson(data) {
                this.course = api.convertCourseJson(data);
                this.course.live = this.live;
                this.lessons = data.lessons.map((lessonJson) => {
                    return api.convertLessonJson(lessonJson);
                });
                this.course.access_duration = this.course.access_duration || '';
            },
            loadCourseDraft() {
                //console.log('loadCourseDraft');
                if(this.live) { return; }

                this.courseLoading = true;
                let response = api.getCourseDraft(this.accessToken);

                response
                    .then((response) => {
                        this.processCourseJson(response.data);
                        this.courseLoading = false;
                    })
                    .catch((err) => {
                        this.courseLoading = false;
                        //console.log('error course loading', err);
                    });

                return response;
            },
            loadCourse() {
                //console.log('loadCourse');
                this.courseLoading = true;
                let request = null;
                if(this.live) {
                    request = api.loadLive(this.courseId, this.accessToken)
                } else {
                    request = api.loadCourse(this.courseId, this.accessToken)
                }
                request
                    .then((response) => {
                        this.processCourseJson(response.data);
                        this.$nextTick(() => {
                            this.courseLoading = false;
                        });
                        this.lessons.sort((a, b) => {
                            if (a.position > b.position) {
                              return 1;
                            }
                            if (a.position < b.position) {
                              return -1;
                            }
                            return 0;
                        });
                    })
                    .catch((err) => {
                        this.courseLoading = false;
                        //console.log('error course loading', err);
                    });

                return request;
            },
            loadLessons(courseId) {

            },
            onCoursePublish() {
                if(this.validate()) {
                  const publishButton = $('#course-redactor__publish-button');
                  publishButton.attr('disabled', 'disabled');

                  if(this.live) {
                      window.location = '/school/lessons';
                  } else {
                    api.publishCourse(this.course, this.accessToken)
                        .then((response) => {
                            window.location = '/course/on-moderation';
                        })
                        .catch(() => {
                            publishButton.removeAttr('disabled');
                        });
                  }
                }
            },
            validate(silent) {
                console.log('validate', this.$v.$invalid);

                if(!silent) {
                    this.showErrors = true;
                    if (this.$v.course.$invalid) {
                        for(let i in this.$v.course) {
                            if(this.$v.course[i].$invalid) {
                                showNotification("error", "Ошибка валидации поля "+this.fields[i]);
                            }
                        }
                        // showNotification("error", "Заполните все необходимые поля");
                        return false;
                    }
                }


                return true;
            },
            validateLesson(silent) {
                console.log('validate', this.$v.$invalid);
                this.showErrors = true;
                if (this.$v.currentLesson.$invalid) {
                    if(!silent) {
                        for(let i in this.$v.currentLesson) {
                            if(this.$v.currentLesson[i].$invalid) {
                                showNotification("error", "Ошибка валидации поля "+this.lessonFields[i]);
                            }
                        }
                    }
                    // showNotification("error", "Заполните все необходимые поля");
                    return false;
                }

                return true;
            },
            onCoursePreview() {
                if(this.course.id) {
                    let url;

                    if(this.viewSection === 'lessons-edit') {
                        this.onLessonSubmit().then(()=>{
                            url = `/lesson/${this.currentLesson.id}`;

                            let newTab = window.open(url, '_blank');
                            newTab.focus();
                        }).catch((e)=>{
                            // showNotification("error", "Пока еще нечего посмотреть, давайте что-нибудь напишем");

                            console.log(e);
                        });
                    } else {
                        if(this.live) {
                            url = `/school/lessons/${this.course.id}`;
                        } else {
                            if (this.course.url) {
                                url = `/course/${this.course.url}`;
                            }
                            url = `/course/${this.course.id}`;
                        }

                        let newTab = window.open(url, '_blank');
                        newTab.focus();
                    }
                } else {
                    showNotification("error", "Пока еще нечего посмотреть, давайте что-нибудь напишем");
                }
            },
            saveCourseDraft: function (newValue, oldValue) {
                if (this.savingDebounceTimeout) {
                    clearTimeout(this.savingDebounceTimeout);
                }
                this.courseSyncHook = false;
                this.savingDebounceTimeout = setTimeout(() => {
                    if(!this.validate(true)) {
                        return;
                    }

                    this.courseSaving = true;
                    this.changeSavingStatus();
                    const courseObject = this.course;
                    courseObject.slug = courseObject.slug && slugify(courseObject.slug);
                    api.saveCourse(courseObject, this.accessToken)
                        .then((response) => {
                            this.courseSaving = false;
                            this.changeSavingStatus(true);
                            this.courseSyncHook = true;
                            const courseData = api.convertCourseJson(response.data);
                            this.course.slug = courseData.slug;
                            if (this.course.coverImage) {
                                courseData.coverImage = this.course.coverImage;
                            }
                            if (this.course.is_deferred) {
                                courseData.is_deferred = true;
                            }
                            let remoteUUIDMapper = {}
                            let remoteDataMapper = {}
                            if (courseData.content) {
                              courseData.content.forEach((contentElement) => {
                                  remoteUUIDMapper[contentElement.uuid] = contentElement.data.id;
                                  remoteDataMapper[contentElement.uuid] = contentElement.data;
                              })
                            }

                            this.course.content.forEach((contentElement, index) => {
                                if (!contentElement.data.id) {
                                    this.$set(this.course.content[index].data, 'id', remoteUUIDMapper[contentElement.uuid])
                                }

                                if(contentElement.type === 'images') {
                                    remoteDataMapper[contentElement.uuid].images.forEach((image, imageIndex) => {
                                        this.$set(this.course.content[index].data.images[imageIndex], 'id', image.id)
                                    })
                                }
                            });

                            if(courseData.id) {
                                this.course.id = courseData.id;
                            }

                            this.$nextTick(() => {
                                this.courseSyncHook = false;
                            });
                        })
                        .catch((err) => {
                            this.courseSyncHook = false;
                            this.courseSaving = false;
                            //console.error(err);
                            this.changeSavingStatus(true, true);
                            // alert('Произошло что-то страшное: '+err.toString());
                            //console.log(err.response.data);
                            if(err.response) {
                                for(let i in err.response.data) {
                                    if(typeof err.response.data[i] === "array") {
                                        showNotification("error", this.fields[i] + ": " + err.response.data[i].join(', '));
                                    }
                                }
                            }
                        });
                }, 500);
            },
            updateViewSection(location, action) {
                //console.log('updateViewSection[action]', action);
                if (location.pathname.match(/course\/\d+\/edit\/lessons/)) {
                    this.viewSection = 'lessons';
                } else if (location.pathname.match(/course\/\d+\/lessons\/new/)){
                    this.viewSection = 'lessons-edit';
                } else if (location.pathname.match(/course\/\d+\/lessons\/\d+\/edit/)) {
                    // let lessonId = parseInt(location.pathname.split('/').pop());
                    const lessonId = +location.pathname.match(/lessons\/(\d+)\/edit/)[1];
                    this.currentLesson = this.lessons.find((i)=>{return i.id === lessonId});
                    this.viewSection = 'lessons-edit';
                } else {
                    this.viewSection = 'course';
                }
            },
            onLessonsChanged() {
                let promises = [];
                this.courseSaving = true;
                this.lessons.map((lesson, index) => {
                    lesson.position = index + 1;
                    lesson.course_id = this.course.id;
                    let res = api.saveLesson(lesson, this.accessToken);
                    promises.push(res);
                });
                Promise.all(promises).then(() => {
                    this.courseSaving = false;
                    this.changeSavingStatus(true);
                }, () => {
                    this.courseSaving = false;
                    this.changeSavingStatus(true, true);
                });
            },
            pluralize(count, words) {
                var cases = [2, 0, 1, 1, 1, 2];
                return words[ (count % 100 > 4 && count % 100 < 20) ? 2 : cases[ Math.min(count % 10, 5)] ];
            },
            changeSavingStatus(saved, error) {
                let text = '';
                if(error) {
                    text = 'ОШИБКА';
                } else {
                    text = saved ? 'СОХРАНЕНО' : 'СОХРАНЕНИЕ...';
                }
                clearTimeout(this.savingTimeout);
                document.getElementById('course-redactor__saving-status').innerText = text;
                if(saved || error){
                    this.savingTimeout = setTimeout(() => {
                        document.getElementById('course-redactor__saving-status').innerText = '';
                    }, 2000);
                }
            },
        },
        mounted() {
            this.mounting = true;
            moment.locale('ru');

            this.titles['courseTitle'] = 'НАЗВАНИЕ КУРСА';
            this.titles['shortDescription'] = 'КРАТКО О КУРСЕ';

            if(this.live) {
                this.titles['courseTitle'] = 'НАЗВАНИЕ УРОКА';
                this.titles['shortDescription'] = 'КРАТКО ОБ УРОКЕ';
            }

            this.course.live = this.live;
            // Listen for changes to the current location.
            this.unlisten = history.listen(this.updateViewSection);

            let promises = [];

            let cats = api.getCategories(this.accessToken);
            promises.push(cats);
            cats.then((response) => {
                    if (response.data) {
                        this.categoryOptions = response.data;
                    }
                });

            if(this.live) {
                let schedule = api.getSchedule(this.accessToken, {live_lesson_exist: false});
                promises.push(schedule);

                schedule.then((response) => {
                        if (response.data) {

                            let schedule = [];
                            response.data.results.forEach((item) => {
                                schedule[item.weekday] = item.title;
                            });

                            console.log('schedule', schedule);

                            let options = [];

                            for(let i=-7;i<=10;i++) {
                                let now = new Date();
                                now.setDate(now.getDate() + i);

                                let weekday = now.getDay() || 7;


                                console.log('data', i, now.getDay(), weekday, now, moment(now).format("D MMM"));

                                if(schedule[weekday]) {
                                    options.push({
                                        title: `${schedule[weekday]} (${this.weekdays[weekday]}, ${moment(now).format("D MMM")})`,
                                        value: moment(now).format('YYYY-MM-DD')
                                    });
                                }
                            }

                            console.log('options',options);

                            this.scheduleOptions = _.orderBy(options, (item)=>{return moment(item.value)});
                        }
                    });
            }

            let user = api.getCurrentUser(this.accessToken);
            promises.push(user);

            user.then((response) => {
                    if (response.data) {
                        this.me = response.data;

                        /* if(this.me.role == ROLE_ADMIN) {
                            api.getUser(this.me.id, {role: [ROLE_AUTHOR, ROLE_ADMIN], page_size: 1000}, this.accessToken)
                                .then((usersResponse) => {
                                    if (usersResponse.data) {
                                        this.users = usersResponse.data.results.map((user) => {
                                            return {
                                                title: `${user.first_name} ${user.last_name}`,
                                                value: user.id
                                            }
                                        });
                                    }
                                });
                        } */
                    }
                });

            // if (this.courseId) {
            //     this.loadCourse().then(()=>{this.updateViewSection(window.location, 'load')}).catch(()=>{
            //         this.updateViewSection(window.location, 'load err')
            //     })
            // } else {
            //     this.loadCourseDraft().then(()=>{this.updateViewSection(window.location, 'load draft')}).catch(()=>{
            //         this.updateViewSection(window.location, 'load draft err')
            //     });
            // }

            //console.log('wait promises');
            Promise.all(promises.map(p => p.catch(e => e))).then(()=>{
                //console.log('promises end');
                this.mounting = false;
                let load;
                if (this.courseId) {
                    load = this.loadCourse()
                } else {
                    load = this.loadCourseDraft();
                }

                load.then(()=>{
                        this.updateViewSection(window.location, 'load '+this.courseId)
                    })
                    .catch(()=>{
                        this.updateViewSection(window.location, 'load err '+this.courseId)
                    })
            });

            //console.log('mounted end');
            // this.updateViewSection(window.location);
        },
        computed: {
            displayPrice: {
                get: function () {
                    return this.course.is_paid ? (this.course.price || '') : '';
                },
                set: function (value) {
                    this.course.price = value || 0;
                }
            },
            displayOldPrice: {
                get: function () {
                    return this.course.is_paid && this.course.old_price ? (this.course.old_price || '') : '';
                },
                set: function (value) {
                    this.course.old_price = value || 0;
                }
            },
            courseFullUrl() {
                let suffix = this.course.slug || this.course.id || 'ваша_ссылка';
                return `https://lil.school/course/${suffix}`;
            },
        },
        beforeDestroy() {
          this.unlisten();
        },
        watch: {
            'course': {
                handler: function (newValue, oldValue) {
                    // //console.log('watch', JSON.stringify(newValue), JSON.stringify(oldValue));
                    // Если курс загрузился и есть ID - делаем кнопки превью и публикации активными
                    //console.log('newValue.id', newValue.id);
                    if (newValue.id) {
                        // //console.log('newValue.id disabled remove', newValue.id);
                        $('#course-redactor__preview-button').removeAttr('disabled');
                        $('#course-redactor__publish-button').removeAttr('disabled');
                    }
                    // //console.log('courseSyncHook', this.courseSyncHook);
                    if (this.courseSyncHook || this.courseLoading) {
                        //console.log('abort save draft', this.courseSyncHook, this.courseLoading);
                        return;
                    }
                    this.saveCourseDraft(newValue, oldValue);
                },
                deep: true,
            },

        },
        components: {
            LessonRedactor,
            LilSelect,
            BlockContent,
            'link-input': LinkInput,
            'vue-datepicker': DatePicker,
            'lesson-redactor': LessonRedactor,
            'vue-draggable': Draggable,
            'vue-redactor': VueRedactor,
        }
    }
</script>


