<template>
  <div class="section">
    <div class="section__center center" v-if="lesson">
      <div class="kit">
        <div class="kit__go go">
          <a href="#" class="go__item" @click.prevent="goBack">
            <div class="go__arrow">
              <svg class="icon icon-arrow-left">
                <use xlink:href="/static/img/sprite.svg#icon-arrow-left"></use>
              </svg>
            </div>
            <div class="go__title">К списку уроков</div>
          </a>
        </div>
        <div class="kit__title title">{{ title }}</div>
        <div class="kit__section">
          <div class="kit__row">
            <lil-image :image-id.sync="lesson.coverImageId" :image-url.sync="lesson.coverImage"
                 v-on:update:imageUrl="onUpdateCoverUrl" v-on:update:imageId="onUpdateCoverId" :access-token="accessToken"/>
            <div class="kit__fieldset">
              <div class="kit__field field"
                   v-bind:class="{ error: $v.currentLesson.title.$invalid }">
                <div class="field__wrap">
                  <input type="text" name="course-lesson-title" class="field__input" placeholder="Название урока" v-model="lesson.title">
                </div>
              </div>
              <div class="kit__field field"
                   v-bind:class="{ error: $v.currentLesson.short_description.$invalid }">
                <div class="field__wrap" name="course-lesson-text-wrap">
                  <vue-redactor :value="lesson.short_description"
                                  v-on:update:value="(value) => { this.lesson.short_description = value; }" placeholder="Описание урока"/>
                </div>
              </div>
            </div>
          </div>
        </div>
        <block-content name="course-lesson-content" :content.sync="lesson.content"></block-content>

        <div class="kit__foot">
          <button class="kit__submit btn btn_md" v-bind:class="{ loading: saving }" name="course-lesson-save">Сохранить</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import BlockContent from './blocks/BlockContent'
    import LilImage from "./blocks/Image"
    import VueRedactor from './redactor/VueRedactor';
    import {api} from "../js/modules/api";
    import Draggable from 'vuedraggable';
    import _ from 'lodash'

    export default {
        name: "lesson-redactor",
        props: ["lesson", "saving", "accessToken", "$v"],
        methods: {
            goBack() {
                this.$emit('back');
            },
            onUpdateCoverUrl(newValue) {
                this.lesson.coverImage = newValue;
            },
            onUpdateCoverId(newValue) {
                this.lesson.coverImageId = newValue;
            },
        },
        computed: {
            title() {
                return this.lesson && this.lesson.id ? 'Редактирование урока' : 'Создать урок';
            }
        },
        components: {
            BlockContent,
            'lil-image': LilImage,
            'vue-redactor': VueRedactor,
        }
    }
</script>

<style scoped>

</style>
