{"version":3,"sources":["webpack:///./src/modules/libraries/_views/DetailLesson.vue?cd5c","webpack:///./src/modules/libraries/_views/DetailLesson.vue?7d4e","webpack:///src/modules/libraries/_views/DetailLesson.vue","webpack:///./src/modules/libraries/_views/DetailLesson.vue?19c7","webpack:///./src/modules/libraries/_views/DetailLesson.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","attrs","name","query","lop","lessonData","classId","mon","$route","nhom","tab","tabLesson","_v","_s","title","on","$event","changeTab","scopedSlots","_u","key","fn","proxy","class","isZoomFile","_l","pageSettingLessonPlan","num","style","sizeBoxSlide","imgCdnUrl","lessonPlan","pathView","handleScrollScript","pageSettingScript","script","active","isOpenSidebar","openSidebarMobile","heightCollapse","keySidebarActive","keySidebarInfo","tabActive","openSidebar","handleDownloadFiles","openLessonCats","handleToggleLessonCats","prevPage","page","totalPage","_e","nextPage","handleZoom","formattedZoom","handleToggleOpenSidebarMobile","_m","settingsViewBookSidebar","item","index","directPage","fileName","img404","staticRenderFns","mixins","components","vueCustomScrollbar","Sidebar","data","apiUrl","pageLoading","scale","slideTranslateX","width","height","keySideDownload","numberBookViewOpenSidebar","pageLoaded","scrollPosition","lastPageOffsetTop","maxScrollbarLength","styleZoom","idBookLessonPlanFile","computed","lessonId","created","console","mounted","methods","mapActions","getLessonDetail","self","getLesson","then","res","finally","setSizeForSlide","setTimeout","document","onKeyup","e","setSlideAction","widthElm","type","elementSlideSwrap","setSpaceSizeForOpenSidebarBox","bodyBookBox","resetPageWhenOfBoxsTransition","resetTransitionSlide","parseInt","setScrollToPage","scrollTo","event","Math","currentScrollPosition","offsetTop","space2TotalPage","setSpaceSizeForOpenCatBox","updatecountview","downloadMultiLessonFile","downloadDocs","fileNameDel","delFileZipLesson","component"],"mappings":"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4C,mCACAA,mBACAA,sBAEA,yCACAA,8BAEA,kBACAA,mCAIA0B,0BA/QA,WAgRA,WACA,EACAnB,yDACA,0DACA,gBAEAQ,sCACAA,uBACAf,qCACAA,iBACAA,yCAGA/B,WA7RA,SA6RAX,GAAA,WAEA,mDACA,gDACA,WACA,mCAEA,kCACA,sCACAA,0CACA,yCACAA,EACAA,IACA,8BACA,yBACA,8BACA,kCACAA,sCACA,qCACAA,EACAA,IAEAgD,uBACA,uBACA,OAIA/E,UAzTA,SAyTAP,GACA,iBAEAA,OACA,4BACA,wCACA,qCAEA,kCACA,wDAEAA,OACA,wBACA,oCACA,kCAEA2G,gEAKA,8BACA,qDAIAzE,oBAnVA,WAoVA,WACA8C,iBACA4B,6CACA,mBACA5B,EACA6B,aADA,UAEA7B,SAFA,YAEAG,QACAH,oBACA,GAEAE,MAAA,YACA,2BACA,oCACA4B,uBAGAC,sCAAA,OACA/B,4BASApC,8BA9WA,WA+WA,mDC3wBoX,I,wBCQhXoE,EAAY,eACd,EACAjI,EACAqE,GACA,EACA,KACA,WACA,MAIa,aAAA4D,E","file":"js/chunk-4e763a98.5b4f5b3c.js","sourcesContent":["export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../node_modules/css-loader/index.js??ref--8-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./DetailLesson.vue?vue&type=style&index=0&id=afc47558&lang=scss&scoped=true&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"detail-books\"},[_c('div',{staticClass:\"detail-books__head display-flex-center justify-content-between\"},[_c('router-link',{staticClass:\"secondary-color-txt font-size-15 font-family-Semibold\",attrs:{\"to\":{\n          name: 'library',\n          query: {\n            lop: _vm.lessonData.classId,\n            mon: _vm.$route.query.mon ? _vm.$route.query.mon : 0,\n            nhom: _vm.$route.query.nhom ? _vm.$route.query.nhom : 0,\n            tab: _vm.tabLesson,\n          },\n        }}},[_c('i',{staticClass:\"icon-close secondary-color-txt font-size-10\"}),_vm._v(\"\\n        Thoát\\n      \")]),_c('h3',{staticClass:\"font-size-15 secondary-color-txt font-sanpro-semibold margin-0\"},[_vm._v(\"\\n        \"+_vm._s(_vm.lessonData.title)+\"\\n      \")]),_c('div',{staticClass:\"btn-function\"})],1),_c('div',{staticClass:\"detail-books__body\"},[_c('div',{},[_c('div',{staticClass:\"detail-books__tabs tabs-center effect-transition-fast\"},[_c('b-tabs',{staticClass:\"book-detail__tabs__content\"},[_c('b-tab',{on:{\"click\":function($event){return _vm.changeTab(0)}},scopedSlots:_vm._u([{key:\"title\",fn:function(){return [_vm._v(\"Bài giảng tham khảo\")]},proxy:true}])},[_c('div',{staticClass:\"detail-books__tabs__body lib-lesson__tabs__body\",class:{ 'is-zoom': _vm.isZoomFile },attrs:{\"id\":\"script_docs_pptx\"}},[_c('div',{staticClass:\"\\n                    lib-lesson__imgs lib-lesson__imgs--pptx\\n                    effect-transition-fast\\n                    display-flex\\n                  \",attrs:{\"id\":\"lesson_img\"}},[(_vm.lessonData.lessonPlan)?_c('div',{staticClass:\"lib-lesson__imgs__wrap display-flex\",attrs:{\"id\":\"lesson_img_wrap\"}},_vm._l((_vm.pageSettingLessonPlan.pageLoaded),function(num){return _c('vue-custom-scrollbar',{key:num,staticClass:\"item text-center effect-transition-fast\",style:((\"width: \" + (_vm.sizeBoxSlide.width) + \"px\"))},[_c('img',{staticClass:\"item__img effect-transition-fast\",style:(_vm.styleZoom),attrs:{\"src\":(\"\" + _vm.imgCdnUrl + (_vm.lessonData.lessonPlan.fileName) + \"-\" + num + \".jpg\"),\"alt\":_vm.lessonData.lessonPlan.pathView}})])}),1):_c('p',{staticClass:\"\\n                      font-size-22\\n                      text-center\\n                      secondary-color-txt\\n                      full-width\\n                    \"},[_vm._v(\"\\n                    Đang cập nhật dữ liệu\\n                  \")])])])]),_c('b-tab',{on:{\"click\":function($event){return _vm.changeTab(1)}},scopedSlots:_vm._u([{key:\"title\",fn:function(){return [_vm._v(\"Kịch bản dạy học\")]},proxy:true}])},[_c('vue-custom-scrollbar',{staticClass:\"detail-books__tabs__body\",attrs:{\"id\":\"script_docs\"},on:{\"ps-scroll-y\":_vm.handleScrollScript}},[_c('div',{staticClass:\"\\n                    lib-lesson__imgs lib-lesson__imgs--script\\n                    effect-transition-fast\\n                    display-flex\\n                  \",attrs:{\"id\":\"lesson_img_script\"}},[(_vm.lessonData.script)?_c('div',{staticClass:\"lib-lesson__imgs__wrap\",attrs:{\"id\":\"lesson_img_script_wrap\"}},_vm._l((_vm.pageSettingScript.pageLoaded),function(num){return _c('div',{key:num,staticClass:\"\\n                        item item-script\\n                        text-center\\n                        effect-transition-fast\\n                      \",style:((\"width: \" + (_vm.sizeBoxSlide.width) + \"px\")),attrs:{\"id\":(\"item_script_\" + num)}},[_c('img',{staticClass:\"item__img\",style:(_vm.styleZoom),attrs:{\"src\":(\"\" + _vm.imgCdnUrl + (_vm.lessonData.script.fileName) + \"-\" + num + \".jpg\"),\"alt\":_vm.lessonData.script.pathView}})])}),0):_c('p',{staticClass:\"\\n                      font-size-22\\n                      text-center\\n                      secondary-color-txt\\n                      full-width\\n                    \"},[_vm._v(\"\\n                    Đang cập nhật dữ liệu\\n                  \")])])])],1)],1)],1),_c('div',{staticClass:\"book-viewer__sidebar lib-lesson__sidebar\",class:{\n            active: _vm.isOpenSidebar,\n            'mobile-close': !_vm.openSidebarMobile,\n            'mobile-open': _vm.openSidebarMobile,\n          }},[_c('div',{staticClass:\"\\n              book-viewer__sidebar__icons\\n              position-rel\\n              display-flex\\n              flex-direction-col\\n              justify-content-between\\n            \",class:{ heightCollapse: _vm.heightCollapse }},[_c('div',{staticClass:\"icon-top\"},[_c('a',{staticClass:\"total-a\",class:{ active: _vm.keySidebarActive === _vm.keySidebarInfo },attrs:{\"href\":\"javascript:;\",\"title\":_vm.tabActive == 0?'Thông tin':'Thông tin'},on:{\"click\":function($event){return _vm.openSidebar(_vm.keySidebarInfo)}}},[_c('i',{staticClass:\"icon-info font-size-20\"})]),_c('a',{attrs:{\"title\":_vm.tabActive == 0?'Tải xuống':'Tải xuống',\"href\":\"javascript:;\"},on:{\"click\":_vm.handleDownloadFiles}},[_c('i',{staticClass:\"icon-download font-size-20\"})])])]),_c('Sidebar',{attrs:{\"keySidebarActive\":_vm.keySidebarActive,\"dataSource\":_vm.lessonData}})],1)])]),_c('div',{staticClass:\"\\n        detail-books__footer\\n        lib-detail__footer\\n        color_bg_gray_light\\n        display-flex-center\\n        justify-content-between\\n        position-rel\\n      \"},[_c('a',{staticClass:\"\\n          primary-color\\n          font-size-16 font-sanpro-semibold\\n          book-viewer__footer__cats\\n          border-rd-20\\n          position-rel\\n          display-flex-center\\n          justify-content-center\\n        \",class:{ 'btn-2': _vm.openLessonCats },attrs:{\"href\":\"javascript:;\"},on:{\"click\":_vm.handleToggleLessonCats}},[_c('img',{staticClass:\"icon-list\",attrs:{\"src\":require(\"@/assets/imgs/icon-list.png\"),\"alt\":\"Danh sách bài giảng\"}}),_c('span',{staticClass:\"only-pc\"},[_vm._v(\"Danh sách\")])]),_c('div',{staticClass:\"book-viewer__paging display-flex-center\"},[_c('button',{staticClass:\"prev-page\",attrs:{\"title\":\"Quay lại trang trước\"},on:{\"click\":_vm.prevPage}},[_c('i',{staticClass:\"icon-prev color-light\"})]),_c('div',{staticClass:\"book-viewer__paging__input\"},[(_vm.lessonData && (_vm.lessonData.lessonPlan || _vm.lessonData.script))?_c('span',{staticClass:\"text-center\"},[_vm._v(\"\\n            \"+_vm._s(_vm.tabActive === 0\n                ? _vm.pageSettingLessonPlan.page\n                : _vm.pageSettingScript.page)+\"\\n            /\\n            \"+_vm._s(_vm.tabActive === 0 && _vm.lessonData.lessonPlan\n                ? _vm.lessonData.lessonPlan.totalPage\n                : _vm.lessonData.script\n                ? _vm.lessonData.script.totalPage\n                : 0)+\"\\n          \")]):_vm._e()]),_c('button',{staticClass:\"next-page\",attrs:{\"title\":\"Chuyển đến trang tiếp theo\"},on:{\"click\":_vm.nextPage}},[_c('i',{staticClass:\"icon-next color-light\"})])]),_c('div',{staticClass:\"book-viewer__zoom-switch display-flex-center\",attrs:{\"title\":_vm.tabActive == 0?'Điều chỉnh kích cỡ kịch bản dạy học':'Điều chỉnh kích cỡ kịch bản tham khảo'}},[_c('div',{staticClass:\"book-viewer__zoom\"},[_c('button',{staticClass:\"zoom-out\",on:{\"click\":function($event){return _vm.handleZoom('-')}}},[_c('i',{staticClass:\"icon-minus font-size-14 secondary-color-txt\"})]),_c('span',{staticClass:\"ratio-book\"},[_vm._v(_vm._s(_vm.formattedZoom)+\" %\")]),_c('button',{staticClass:\"zoom-in\",on:{\"click\":function($event){return _vm.handleZoom('+')}}},[_c('i',{staticClass:\"icon-plus font-size-14 secondary-color-txt\"})])])]),_c('div',{staticClass:\"book-viewer__toggle-icon-sidebar only-mobile\",on:{\"click\":_vm.handleToggleOpenSidebarMobile}},[_vm._m(0)])]),_c('div',{staticClass:\"book-viewer__cats\",class:{ active: _vm.openLessonCats }},[_vm._m(1),_c('vue-custom-scrollbar',{staticClass:\"scroll-area scroll-area__cats\",attrs:{\"settings\":_vm.settingsViewBookSidebar}},[_c('div',{staticClass:\"book-viewer__cats__list\"},[(_vm.lessonData && (_vm.lessonData.lessonPlan || _vm.lessonData.script))?_c('div',{staticClass:\"book-viewer__cats__wrap lib-lesson__pages\"},_vm._l((_vm.tabActive === 0 && _vm.lessonData.lessonPlan\n                ? _vm.lessonData.lessonPlan.totalPage\n                : _vm.lessonData.script\n                ? _vm.lessonData.script.totalPage\n                : 0),function(item,index){return _c('div',{key:index,staticClass:\"item position-rel\",class:{\n                active: _vm.pageSettingLessonPlan.page === item,\n                'item--2': _vm.tabActive === 1,\n              },on:{\"click\":function($event){return _vm.directPage(item)}}},[_c('div',{staticClass:\"item__head\"},[(_vm.openLessonCats)?_c('div',{staticClass:\"img__wrap\"},[_c('img',{attrs:{\"src\":_vm.lessonData[_vm.tabActive === 0 ? 'lessonPlan' : 'script']\n                        .fileName\n                        ? (\"\" + _vm.imgCdnUrl + (_vm.lessonData[\n                              _vm.tabActive === 0 ? 'lessonPlan' : 'script'\n                            ].fileName) + \"-\" + item + \".jpg\")\n                        : _vm.img404,\"alt\":_vm.lessonData.title}})]):_vm._e()]),_c('h4',{staticClass:\"item__title margin-0\"},[_vm._v(_vm._s(item))])])}),0):_vm._e()])])],1)])}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"\\n            book-viewer__toggle-icon-sidebar__wrap\\n            display-flex-center\\n            justify-content-center\\n          \"},[_c('i',{staticClass:\"icon-more primary-color font-size-22\"})])},function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"book-viewer__cats__wrap\"},[_c('h2',{staticClass:\"\\n            book-viewer__cats__title\\n            primary-color-txt\\n            font-size-24 font-sanpro-semibold\\n            lib-lesson__cats__title\\n          \"},[_vm._v(\"\\n          Danh sách\\n        \")])])}]\n\nexport { render, staticRenderFns }","<template>\r\n  <div class=\"detail-books\">\r\n    <div class=\"detail-books__head display-flex-center justify-content-between\">\r\n      <router-link\r\n        :to=\"{\r\n          name: 'library',\r\n          query: {\r\n            lop: lessonData.classId,\r\n            mon: $route.query.mon ? $route.query.mon : 0,\r\n            nhom: $route.query.nhom ? $route.query.nhom : 0,\r\n            tab: tabLesson,\r\n          },\r\n        }\"\r\n        class=\"secondary-color-txt font-size-15 font-family-Semibold\"\r\n      >\r\n        <i class=\"icon-close secondary-color-txt font-size-10\"></i>\r\n        Thoát\r\n      </router-link>\r\n      <h3\r\n        class=\"font-size-15 secondary-color-txt font-sanpro-semibold margin-0\"\r\n      >\r\n        {{ lessonData.title }}\r\n      </h3>\r\n      <div class=\"btn-function\"></div>\r\n    </div>\r\n    <div class=\"detail-books__body\">\r\n      <!-- Fix bug: hiển thị lại phần kịch bản dạy học, xem toàn màn hình và nhìn rõ được nội dung kịch bản\r\n      Modified: anhdd (26/8/2022)\r\n      Bỏ class container -->\r\n      <div class=\"\">\r\n        <div class=\"detail-books__tabs tabs-center effect-transition-fast\">\r\n          <b-tabs class=\"book-detail__tabs__content\">\r\n            <b-tab @click=\"changeTab(0)\">\r\n              <template v-slot:title>Bài giảng tham khảo</template>\r\n              <div\r\n                id=\"script_docs_pptx\"\r\n                class=\"detail-books__tabs__body lib-lesson__tabs__body\"\r\n                :class=\"{ 'is-zoom': isZoomFile }\"\r\n              >\r\n                <div\r\n                  id=\"lesson_img\"\r\n                  class=\"\r\n                    lib-lesson__imgs lib-lesson__imgs--pptx\r\n                    effect-transition-fast\r\n                    display-flex\r\n                  \"\r\n                >\r\n                  <div\r\n                    id=\"lesson_img_wrap\"\r\n                    class=\"lib-lesson__imgs__wrap display-flex\"\r\n                    v-if=\"lessonData.lessonPlan\"\r\n                  >\r\n                    <vue-custom-scrollbar\r\n                      class=\"item text-center effect-transition-fast\"\r\n                      v-for=\"num in pageSettingLessonPlan.pageLoaded\"\r\n                      :key=\"num\"\r\n                      :style=\"`width: ${sizeBoxSlide.width}px`\"\r\n                    >\r\n                      <img\r\n                        class=\"item__img effect-transition-fast\"\r\n                        :style=\"styleZoom\"\r\n                        :src=\"`${imgCdnUrl}${lessonData.lessonPlan.fileName}-${num}.jpg`\"\r\n                        :alt=\"lessonData.lessonPlan.pathView\"\r\n                      />\r\n                    </vue-custom-scrollbar>\r\n                  </div>\r\n                  <p\r\n                    v-else\r\n                    class=\"\r\n                      font-size-22\r\n                      text-center\r\n                      secondary-color-txt\r\n                      full-width\r\n                    \"\r\n                  >\r\n                    Đang cập nhật dữ liệu\r\n                  </p>\r\n                </div>\r\n              </div>\r\n            </b-tab>\r\n            <b-tab @click=\"changeTab(1)\">\r\n              <template v-slot:title>Kịch bản dạy học</template>\r\n              <vue-custom-scrollbar\r\n                id=\"script_docs\"\r\n                class=\"detail-books__tabs__body\"\r\n                @ps-scroll-y=\"handleScrollScript\"\r\n              >\r\n                <div\r\n                  id=\"lesson_img_script\"\r\n                  class=\"\r\n                    lib-lesson__imgs lib-lesson__imgs--script\r\n                    effect-transition-fast\r\n                    display-flex\r\n                  \"\r\n                >\r\n                  <div\r\n                    id=\"lesson_img_script_wrap\"\r\n                    class=\"lib-lesson__imgs__wrap\"\r\n                    v-if=\"lessonData.script\"\r\n                  >\r\n                    <div\r\n                      :id=\"`item_script_${num}`\"\r\n                      class=\"\r\n                        item item-script\r\n                        text-center\r\n                        effect-transition-fast\r\n                      \"\r\n                      v-for=\"num in pageSettingScript.pageLoaded\"\r\n                      :key=\"num\"\r\n                      :style=\"`width: ${sizeBoxSlide.width}px`\"\r\n                    >\r\n                      <!-- :style=\"`width: ${sizeBoxSlide.width}px`\" -->\r\n                      <img\r\n                        class=\"item__img\"\r\n                        :style=\"styleZoom\"\r\n                        :src=\"`${imgCdnUrl}${lessonData.script.fileName}-${num}.jpg`\"\r\n                        :alt=\"lessonData.script.pathView\"\r\n                      />\r\n                    </div>\r\n                  </div>\r\n                  <p\r\n                    v-else\r\n                    class=\"\r\n                      font-size-22\r\n                      text-center\r\n                      secondary-color-txt\r\n                      full-width\r\n                    \"\r\n                  >\r\n                    Đang cập nhật dữ liệu\r\n                  </p>\r\n                </div>\r\n              </vue-custom-scrollbar>\r\n            </b-tab>\r\n          </b-tabs>\r\n        </div>\r\n        <div\r\n          class=\"book-viewer__sidebar lib-lesson__sidebar\"\r\n          :class=\"{\r\n            active: isOpenSidebar,\r\n            'mobile-close': !openSidebarMobile,\r\n            'mobile-open': openSidebarMobile,\r\n          }\"\r\n        >\r\n          <div\r\n            class=\"\r\n              book-viewer__sidebar__icons\r\n              position-rel\r\n              display-flex\r\n              flex-direction-col\r\n              justify-content-between\r\n            \"\r\n            :class=\"{ heightCollapse: heightCollapse }\"\r\n          >\r\n            <div class=\"icon-top\">\r\n              <a\r\n                href=\"javascript:;\"\r\n                :class=\"{ active: keySidebarActive === keySidebarInfo }\"\r\n                @click=\"openSidebar(keySidebarInfo)\"\r\n                class=\"total-a\"\r\n                :title = \"tabActive == 0?'Thông tin':'Thông tin'\"\r\n              >\r\n                <i class=\"icon-info font-size-20\"></i>\r\n              </a>\r\n              <!-- <a href=\"javascript:;\" :class=\"{'active': keySidebarActive === keySideDownload}\" @click=\"openSidebar(keySideDownload)\">\r\n\t\t\t\t\t\t\t\t<i class=\"icon-download font-size-20\"></i>\r\n\t\t\t\t\t\t\t</a> -->\r\n              <a :title = \"tabActive == 0?'Tải xuống':'Tải xuống'\" href=\"javascript:;\" @click=\"handleDownloadFiles\">\r\n                <i class=\"icon-download font-size-20\"></i>\r\n              </a>\r\n            </div>\r\n          </div>\r\n          <Sidebar\r\n            :keySidebarActive=\"keySidebarActive\"\r\n            :dataSource=\"lessonData\"\r\n          />\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"\r\n        detail-books__footer\r\n        lib-detail__footer\r\n        color_bg_gray_light\r\n        display-flex-center\r\n        justify-content-between\r\n        position-rel\r\n      \"\r\n    >\r\n      <a\r\n        href=\"javascript:;\"\r\n        class=\"\r\n          primary-color\r\n          font-size-16 font-sanpro-semibold\r\n          book-viewer__footer__cats\r\n          border-rd-20\r\n          position-rel\r\n          display-flex-center\r\n          justify-content-center\r\n        \"\r\n        @click=\"handleToggleLessonCats\"\r\n        :class=\"{ 'btn-2': openLessonCats }\"\r\n      >\r\n        <img\r\n          src=\"@/assets/imgs/icon-list.png\"\r\n          class=\"icon-list\"\r\n          alt=\"Danh sách bài giảng\"\r\n        />\r\n        <span class=\"only-pc\">Danh sách</span>\r\n      </a>\r\n      <div class=\"book-viewer__paging display-flex-center\">\r\n        <button title=\"Quay lại trang trước\" class=\"prev-page\" @click=\"prevPage\">\r\n          <i class=\"icon-prev color-light\"></i>\r\n        </button>\r\n        <div class=\"book-viewer__paging__input\">\r\n          <span\r\n            class=\"text-center\"\r\n            v-if=\"lessonData && (lessonData.lessonPlan || lessonData.script)\"\r\n          >\r\n            {{\r\n              tabActive === 0\r\n                ? pageSettingLessonPlan.page\r\n                : pageSettingScript.page\r\n            }}\r\n            /\r\n            {{\r\n              tabActive === 0 && lessonData.lessonPlan\r\n                ? lessonData.lessonPlan.totalPage\r\n                : lessonData.script\r\n                ? lessonData.script.totalPage\r\n                : 0\r\n            }}\r\n          </span>\r\n        </div>\r\n        <button title=\"Chuyển đến trang tiếp theo\" class=\"next-page\" @click=\"nextPage\">\r\n          <i class=\"icon-next color-light\"></i>\r\n        </button>\r\n      </div>\r\n      <div :title=\"tabActive == 0?'Điều chỉnh kích cỡ kịch bản dạy học':'Điều chỉnh kích cỡ kịch bản tham khảo'\" class=\"book-viewer__zoom-switch display-flex-center\">\r\n        <div class=\"book-viewer__zoom\">\r\n          <button class=\"zoom-out\" @click=\"handleZoom('-')\">\r\n            <i class=\"icon-minus font-size-14 secondary-color-txt\"></i>\r\n          </button>\r\n          <span class=\"ratio-book\">{{ formattedZoom }} %</span>\r\n          <button class=\"zoom-in\" @click=\"handleZoom('+')\">\r\n            <i class=\"icon-plus font-size-14 secondary-color-txt\"></i>\r\n          </button>\r\n        </div>\r\n      </div>\r\n      <div\r\n        class=\"book-viewer__toggle-icon-sidebar only-mobile\"\r\n        @click=\"handleToggleOpenSidebarMobile\"\r\n      >\r\n        <div\r\n          class=\"\r\n            book-viewer__toggle-icon-sidebar__wrap\r\n            display-flex-center\r\n            justify-content-center\r\n          \"\r\n        >\r\n          <i class=\"icon-more primary-color font-size-22\"></i>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"book-viewer__cats\" :class=\"{ active: openLessonCats }\">\r\n      <div class=\"book-viewer__cats__wrap\">\r\n        <h2\r\n          class=\"\r\n            book-viewer__cats__title\r\n            primary-color-txt\r\n            font-size-24 font-sanpro-semibold\r\n            lib-lesson__cats__title\r\n          \"\r\n        >\r\n          Danh sách\r\n        </h2>\r\n      </div>\r\n      <vue-custom-scrollbar\r\n        class=\"scroll-area scroll-area__cats\"\r\n        :settings=\"settingsViewBookSidebar\"\r\n      >\r\n        <div class=\"book-viewer__cats__list\">\r\n          <div\r\n            class=\"book-viewer__cats__wrap lib-lesson__pages\"\r\n            v-if=\"lessonData && (lessonData.lessonPlan || lessonData.script)\"\r\n          >\r\n            <div\r\n              class=\"item position-rel\"\r\n              v-for=\"(item, index) in tabActive === 0 && lessonData.lessonPlan\r\n                ? lessonData.lessonPlan.totalPage\r\n                : lessonData.script\r\n                ? lessonData.script.totalPage\r\n                : 0\"\r\n              :class=\"{\r\n                active: pageSettingLessonPlan.page === item,\r\n                'item--2': tabActive === 1,\r\n              }\"\r\n              @click=\"directPage(item)\"\r\n              :key=\"index\"\r\n            >\r\n              <div class=\"item__head\">\r\n                <div class=\"img__wrap\" v-if=\"openLessonCats\">\r\n                  <img\r\n                    :src=\"\r\n                      lessonData[tabActive === 0 ? 'lessonPlan' : 'script']\r\n                        .fileName\r\n                        ? `${imgCdnUrl}${\r\n                            lessonData[\r\n                              tabActive === 0 ? 'lessonPlan' : 'script'\r\n                            ].fileName\r\n                          }-${item}.jpg`\r\n                        : img404\r\n                    \"\r\n                    :alt=\"lessonData.title\"\r\n                  />\r\n                </div>\r\n              </div>\r\n              <h4 class=\"item__title margin-0\">{{ item }}</h4>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </vue-custom-scrollbar>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport {\r\n  TAB_LESSON,\r\n  DETAIL_TAB_INFO,\r\n  DETAIL_TAB_DOWNLOAD,\r\n} from \"./../_store/constants\";\r\nimport vueCustomScrollbar from \"vue-custom-scrollbar\";\r\nimport {\r\n  getLesson,\r\n  downloadMultiLessonFile,\r\n  delFileZipLesson,\r\n  updatecountview,\r\n} from \"./../_api/\";\r\nimport { mapActions } from \"vuex\";\r\nimport { APP_CONFIG } from \"@/utils/constants\";\r\nimport { scrollTo } from \"@/helpers/functions\";\r\nimport mixinsFiles from \"@/components/content-files/mixinsFiles\";\r\nconst img404 = require(`@/assets/images/img_404.jpg`);\r\n\r\nexport default {\r\n  name: \"ViewDetailBooks\",\r\n  mixins: [mixinsFiles],\r\n  components: {\r\n    vueCustomScrollbar,\r\n    Sidebar: () => import(\"./../_components/detail/Sidebar.vue\"),\r\n  },\r\n  data() {\r\n    return {\r\n      imgCdnUrl: APP_CONFIG.bookImgCdnUrl,\r\n      apiUrl: APP_CONFIG.appUrl,\r\n      lessonData: {},\r\n      pageLoading: 3,\r\n      // page: 0,\r\n      // pageLoaded: 0,\r\n      scale: 1,\r\n      slideTranslateX: 0,\r\n      sizeBoxSlide: {\r\n        width: 0,\r\n        height: 0,\r\n      },\r\n      tabLesson: TAB_LESSON,\r\n      isOpenSidebar: false,\r\n      openLessonCats: false,\r\n      keySidebarActive: \"\", //download Or Info\r\n      keySidebarInfo: DETAIL_TAB_INFO,\r\n      keySideDownload: DETAIL_TAB_DOWNLOAD,\r\n      numberBookViewOpenSidebar: 1.3,\r\n      tabActive: 0,\r\n      pageSettingLessonPlan: {\r\n        page: 0,\r\n        pageLoaded: 0,\r\n      },\r\n      pageSettingScript: {\r\n        page: 0,\r\n        pageLoaded: 0,\r\n      },\r\n      scrollPosition: 0,\r\n      lastPageOffsetTop: 0,\r\n      settingsViewBookSidebar: {\r\n        maxScrollbarLength: 300,\r\n      },\r\n      isZoomFile: false,\r\n      img404,\r\n      styleZoom: { width: \"\" },\r\n      idBookLessonPlanFile: 0,\r\n      heightCollapse: true,\r\n      openSidebarMobile: false,\r\n    };\r\n  },\r\n  computed: {\r\n    lessonId() {\r\n      return this.$router.history.current.params.id;\r\n    },\r\n    formattedZoom() {\r\n      return Number.parseInt(this.scale * 100);\r\n    },\r\n  },\r\n  created() {\r\n    // window.addEventListener('keyup', this.onKeyup)\r\n    this.getLessonDetail();\r\n    console.log(this.tabLesson)\r\n  },\r\n  mounted() {\r\n    this.setSizeForSlide();\r\n    // this.openSidebar(DETAIL_TAB_INFO);\r\n  },\r\n  methods: {\r\n    ...mapActions(\"common\", [\"setLoading\"]),\r\n\r\n    getLessonDetail() {\r\n      let self = this;\r\n      self.setLoading(true);\r\n      getLesson(self.lessonId)\r\n        .then((res) => {\r\n          if (res && res.data && !res.errors) {\r\n            self.lessonData = res.data;\r\n            this.idBookLessonPlanFile = res.data.script.bookLessonPlanFileId;\r\n\r\n            if (\r\n              self.tabActive === 0 &&\r\n              res.data.lessonPlan &&\r\n              res.data.lessonPlan.totalPage > 0\r\n            ) {\r\n              self.pageSettingLessonPlan.page = 1;\r\n              self.pageSettingLessonPlan.pageLoaded = self.pageLoading;\r\n            } else if (\r\n              self.tabActive === 1 &&\r\n              res.data.script &&\r\n              res.data.script.totalPage > 0\r\n            ) {\r\n              self.pageSettingScript.page = 1;\r\n              self.pageSettingScript.pageLoaded = self.pageLoading;\r\n            }\r\n          }\r\n        })\r\n        .finally(() => self.setLoading(false));\r\n    },\r\n\r\n    setSizeForSlide() {\r\n      setTimeout(() => {\r\n        this.sizeBoxSlide.width =\r\n          document.getElementById(`lesson_img`).clientWidth;\r\n        this.sizeBoxSlide.height =\r\n          document.getElementById(`lesson_img`).clientHeight;\r\n        this.openSidebar(DETAIL_TAB_INFO);\r\n      }, 500);\r\n    },\r\n\r\n    onKeyup(e) {\r\n      // console.log(e);\r\n      // e.preventdefault()\r\n      // e.keyCode === 37 && this.prevPage()\r\n      // e.keyCode === 39 && this.nextPage()\r\n    },\r\n\r\n    nextPage() {\r\n      if (this.tabActive === 0 && this.lessonData.lessonPlan) {\r\n        if (\r\n          this.pageSettingLessonPlan.pageLoaded <\r\n          this.lessonData.lessonPlan.totalPage\r\n        ) {\r\n          this.pageSettingLessonPlan.pageLoaded += 1;\r\n        }\r\n\r\n        if (\r\n          this.pageSettingLessonPlan.page < this.lessonData.lessonPlan.totalPage\r\n        ) {\r\n          this.pageSettingLessonPlan.page += 1;\r\n          // Await render dom\r\n          this.setSlideAction();\r\n        }\r\n      } else if (this.lessonData.script) {\r\n        /**\r\n         * Fix bug chuyển trang kịch bản dạy học\r\n         * Modified: anhdd (25/8/2022)\r\n         */\r\n        if (this.pageSettingScript.page < this.lessonData.script.totalPage) {\r\n          this.pageSettingScript.page += 1;\r\n          this.setScrollToPage(this.pageSettingScript.page);\r\n        }\r\n      }\r\n      // console.log(\r\n      //   \"this.pageSettingLessonPlan.page\",\r\n      //   this.pageSettingLessonPlan.page\r\n      // );\r\n      // console.log(\"tabActive\", this.tabActive);\r\n      // console.log(\"pageSettingScript.page\", this.pageSettingScript.page);\r\n      // console.log(\r\n      //   \"this.lessonData.lessonPlan.totalPage\",\r\n      //   this.lessonData.script.totalPage\r\n      // );\r\n    },\r\n\r\n    prevPage() {\r\n      if (this.tabActive === 0) {\r\n        if (this.pageSettingLessonPlan.page > 1) {\r\n          this.pageSettingLessonPlan.page -= 1;\r\n          this.setSlideAction(\"-\");\r\n        }\r\n      } else if (this.lessonData.script) {\r\n        /**\r\n         * Fix bug chuyển trang kịch bản dạy học\r\n         * Modified: anhdd (25/8/2022)\r\n         */\r\n        if (this.pageSettingScript.page > 1) {\r\n          this.pageSettingScript.page -= 1;\r\n          this.setScrollToPage(this.pageSettingScript.page);\r\n        }\r\n      }\r\n      // console.log(\r\n      //   \"this.pageSettingLessonPlan.page\",\r\n      //   this.pageSettingLessonPlan.page\r\n      // );\r\n    },\r\n\r\n    setSlideAction(type = \"+\", betweenPageCurr = 0) {\r\n      let elementActive = document.getElementById(`lesson_img`);\r\n      let elementSlideSwrap = document.getElementById(`lesson_img_wrap`);\r\n      if (elementActive) {\r\n        let widthElm = elementActive.clientWidth;\r\n        // Support for direct page form input or click pageindex\r\n        if (betweenPageCurr > 0) {\r\n          widthElm *= betweenPageCurr;\r\n        }\r\n        this.slideTranslateX =\r\n          type === \"+\"\r\n            ? this.slideTranslateX - widthElm\r\n            : this.slideTranslateX + widthElm;\r\n        elementSlideSwrap.style.transform = `translateX(${this.slideTranslateX}px)`;\r\n        elementSlideSwrap.style.transitionDuration = `300ms`;\r\n      }\r\n    },\r\n\r\n    handleZoom(type = \"+\") {\r\n      let self = this;\r\n      if (type === \"+\") {\r\n        this.scale = this.scale < 2 ? this.scale + 0.1 : this.scale;\r\n      } else {\r\n        this.scale = this.scale > 0 ? this.scale - 0.1 : this.scale;\r\n      }\r\n      this.isZoomFile = this.scale === 1 ? false : true;\r\n      let elems = document.getElementsByClassName(\"item__img\");\r\n      let elemsLength = elems.length;\r\n      let elementSlideWidth =\r\n        this.tabActive === 0\r\n          ? document.getElementById(`lesson_img`).clientWidth\r\n          : document.getElementById(`lesson_img_script`).clientWidth;\r\n\r\n      this.styleZoom.width = `${elementSlideWidth * self.scale}px`;\r\n      if (this.scale !== 1) {\r\n        this.styleZoom = {\r\n          ...this.styleZoom,\r\n          \"max-width\": \"initial\",\r\n          \"max-height\": \"initial\",\r\n        };\r\n      }\r\n    },\r\n\r\n    openSidebar(type) {\r\n      this.heightCollapse = !this.heightCollapse;\r\n      let self = this;\r\n      self.openLessonCats = false;\r\n      if (type === self.keySidebarActive) {\r\n        self.isOpenSidebar = false;\r\n        self.keySidebarActive = \"\";\r\n      } else {\r\n        self.isOpenSidebar = true;\r\n        self.keySidebarActive = type;\r\n      }\r\n\r\n      if (window.innerWidth > 991 && self.isOpenSidebar) {\r\n        self.setSpaceSizeForOpenSidebarBox();\r\n      }\r\n\r\n      if (!self.isOpenSidebar) {\r\n        self.resetPageWhenOfBoxsTransition();\r\n      }\r\n    },\r\n\r\n    setSpaceSizeForOpenSidebarBox() {\r\n      let self = this;\r\n      let bodyBookBox =\r\n        document.getElementsByClassName(\"detail-books__tabs\")[0];\r\n      let sidebarBox = document.getElementsByClassName(\r\n        \"book-viewer__sidebar\"\r\n      )[0];\r\n      let widthSidebarBox = sidebarBox.clientWidth;\r\n\r\n      if (bodyBookBox) {\r\n        bodyBookBox.style.paddingLeft = 0;\r\n        bodyBookBox.style.paddingRight = `${widthSidebarBox}px`;\r\n        // Set again for box img\r\n        self.sizeBoxSlide.width = bodyBookBox.clientWidth - widthSidebarBox;\r\n        self.tabActive === 0 &&\r\n          self.resetTransitionSlide(self.sizeBoxSlide.width);\r\n      }\r\n    },\r\n\r\n    resetPageWhenOfBoxsTransition() {\r\n      let self = this;\r\n      let bodyBookBox =\r\n        document.getElementsByClassName(\"detail-books__tabs\")[0];\r\n      bodyBookBox.style.paddingLeft = 0;\r\n      bodyBookBox.style.paddingRight = 0;\r\n      // console.log('Resset: ', bodyBookBox.clientWidth)\r\n      this.sizeBoxSlide.width = bodyBookBox.clientWidth;\r\n      this.tabActive === 0 &&\r\n        this.resetTransitionSlide(bodyBookBox.clientWidth);\r\n    },\r\n\r\n    resetTransitionSlide(width) {\r\n      // console.log('width transition: ', width, this.pageSettingLessonPlan.page)\r\n      let bodyBookBox =\r\n        document.getElementsByClassName(\"detail-books__tabs\")[0].clientWidth;\r\n      let elementSlideSwrap = document.getElementById(`lesson_img_wrap`);\r\n      // Page = 1 => transition = 0\r\n      this.slideTranslateX =\r\n        parseInt(this.pageSettingLessonPlan.page - 1) * parseInt(width) * -1;\r\n      elementSlideSwrap.style.transform = `translateX(${this.slideTranslateX}px)`;\r\n      elementSlideSwrap.style.transitionDuration = `300ms`;\r\n    },\r\n\r\n    setScrollToPage(page) {\r\n      let targetPage = page || this.pageSettingScript.page;\r\n      let elem = document.getElementById(`item_script_${targetPage}`);\r\n      if (elem) {\r\n        let topPos = elem.offsetTop;\r\n        scrollTo(document.getElementById(\"script_docs\"), topPos, 600);\r\n      }\r\n    },\r\n\r\n    handleScrollScript(event) {\r\n      let currentScrollPosition = event.srcElement.scrollTop;\r\n      let itemScript = document.getElementsByClassName(\"item-script\")[0];\r\n      let itemMargin = 25;\r\n      let heightItem = itemScript.clientHeight;\r\n      // Setting page Curr\r\n      this.pageSettingLessonPlan.page =\r\n        Math.ceil(currentScrollPosition / (heightItem + itemMargin)) || 1;\r\n      // Setting pageLoaded\r\n      if (\r\n        currentScrollPosition > this.scrollPosition &&\r\n        this.lessonData.script\r\n      ) {\r\n        try {\r\n          this.lastPageOffsetTop = document.getElementById(\r\n            `item_script_${this.pageSettingLessonPlan.pageLoaded}`\r\n          ).offsetTop;\r\n        } catch (error) {}\r\n        if (currentScrollPosition + 50 >= this.lastPageOffsetTop) {\r\n          let space2TotalPage =\r\n            this.lessonData.lessonPlan.totalPage -\r\n            this.pageSettingLessonPlan.pageLoaded;\r\n          let setPageLoad =\r\n            space2TotalPage > this.pageLoading\r\n              ? this.pageLoading\r\n              : space2TotalPage;\r\n          this.pageSettingLessonPlan.pageLoaded += setPageLoad;\r\n        }\r\n        this.scrollPosition = currentScrollPosition;\r\n      }\r\n    },\r\n\r\n    handleToggleLessonCats() {\r\n      let self = this;\r\n      self.openLessonCats = !self.openLessonCats;\r\n      self.isOpenSidebar = false;\r\n      self.keySidebarActive = \"\";\r\n\r\n      if (window.innerWidth > 991 && self.openLessonCats) {\r\n        self.setSpaceSizeForOpenCatBox();\r\n      }\r\n      if (!self.openLessonCats) {\r\n        self.resetPageWhenOfBoxsTransition();\r\n      }\r\n    },\r\n\r\n    setSpaceSizeForOpenCatBox() {\r\n      let self = this;\r\n      let bodyBookBox =\r\n        document.getElementsByClassName(\"detail-books__tabs\")[0];\r\n      let catBox = document.getElementsByClassName(\"book-viewer__cats\")[0];\r\n      let widthCatBox = catBox.clientWidth;\r\n\r\n      bodyBookBox.style.paddingLeft = `${widthCatBox}px`;\r\n      bodyBookBox.style.paddingRight = 0;\r\n      self.sizeBoxSlide.width = bodyBookBox.clientWidth - widthCatBox;\r\n      self.tabActive === 0 &&\r\n        self.resetTransitionSlide(bodyBookBox.clientWidth - widthCatBox);\r\n    },\r\n\r\n    directPage(page) {\r\n      let self = this;\r\n      if (this.tabActive === 0 && this.lessonData.lessonPlan) {\r\n        let typeDirect = this.pageSettingLessonPlan.page > page ? \"-\" : \"+\";\r\n        let spaceBetweenThisPage = Math.abs(\r\n          this.pageSettingLessonPlan.page - page\r\n        );\r\n        this.pageSettingLessonPlan.page = page;\r\n        this.pageSettingLessonPlan.pageLoaded =\r\n          page === this.lessonData.lessonPlan.totalPage ||\r\n          this.lessonData.lessonPlan.totalPage - page < 3\r\n            ? page\r\n            : page + 3;\r\n        this.setSlideAction(typeDirect, spaceBetweenThisPage);\r\n      } else if (this.lessonData.script) {\r\n        this.pageSettingScript.page = page;\r\n        this.pageSettingScript.pageLoaded =\r\n          page === this.lessonData.script.totalPage ||\r\n          this.lessonData.script.totalPage - page < 3\r\n            ? page\r\n            : page + 3;\r\n        // Await render data\r\n        setTimeout(() => {\r\n          this.setScrollToPage(page);\r\n        }, 200);\r\n      }\r\n    },\r\n\r\n    changeTab(tab) {\r\n      this.tabActive = tab;\r\n      if (\r\n        tab === 0 &&\r\n        this.lessonData.lessonPlan &&\r\n        this.lessonData.lessonPlan.totalPage > 0 &&\r\n        this.pageSettingLessonPlan.page === 0\r\n      ) {\r\n        this.pageSettingLessonPlan.page = 1;\r\n        this.pageSettingLessonPlan.pageLoaded = this.pageLoading;\r\n      } else if (\r\n        tab === 1 &&\r\n        this.lessonData.script &&\r\n        this.lessonData.script.totalPage > 0 &&\r\n        this.pageSettingScript.page === 0\r\n      ) {\r\n        updatecountview(this.idBookLessonPlanFile).then((res) => {\r\n          // if(res){\r\n          // \tconsole.log('réerserserser', res)\r\n          // }\r\n        });\r\n        this.pageSettingScript.page = 1;\r\n        this.pageSettingScript.pageLoaded = this.pageLoading;\r\n      }\r\n    },\r\n\r\n    handleDownloadFiles() {\r\n      let self = this;\r\n      self.setLoading(true);\r\n      downloadMultiLessonFile(self.lessonId).then((res) => {\r\n        if (res.data && !res.errors) {\r\n          self\r\n            .downloadDocs(\r\n              `${self.apiUrl}/${res.data}`,\r\n              self.lessonData.title,\r\n              true\r\n            )\r\n            .then((response) => {\r\n              if (response && response.statusText === \"OK\") {\r\n                let fileNameDel = res.data.replace(\"Uploads/\", \"\");\r\n                fileNameDel = fileNameDel.replace(\".zip\", \"\");\r\n                // setTimeout(() => {\r\n                //   console.log('Settimeout ABC: ')\r\n                delFileZipLesson(fileNameDel).finally(() =>\r\n                  self.setLoading(false)\r\n                );\r\n                // }, 60*1000*2)\r\n              }\r\n            });\r\n        }\r\n      });\r\n    },\r\n\r\n    handleToggleOpenSidebarMobile() {\r\n      this.openSidebarMobile = !this.openSidebarMobile;\r\n    },\r\n  },\r\n};\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n// Variables\r\n@import \"./../../../assets/scss/variables\";\r\n\r\n.heightCollapse {\r\n  height: 53px;\r\n}\r\n\r\n.detail-books {\r\n  &__head {\r\n    height: 55px;\r\n    border-bottom: 1px solid $color_border_line;\r\n    padding: 0 35px;\r\n\r\n    .btn-function {\r\n      .btn-prepare {\r\n        width: 140px;\r\n        margin-right: 18px;\r\n        &:hover {\r\n          opacity: 0.8;\r\n        }\r\n      }\r\n      .btn-show {\r\n        width: 135px;\r\n\r\n        &:hover {\r\n          * {\r\n            color: $primary_color;\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  &__body {\r\n    padding-top: 20px;\r\n  }\r\n\r\n  &__body,\r\n  &__tabs {\r\n    height: calc(100vh - 125px);\r\n    overflow: hidden;\r\n  }\r\n  &__footer {\r\n    height: 70px;\r\n    border-top: 1px solid $color_border_line;\r\n    padding: 0 35px;\r\n    z-index: 12;\r\n\r\n    .icon-list {\r\n      height: 15px;\r\n      width: 15px;\r\n      margin-right: 5px;\r\n    }\r\n\r\n    .book-viewer__footer__cats {\r\n      margin-right: 7px;\r\n      height: 30px;\r\n      min-width: 140px;\r\n      line-height: 28px;\r\n      i {\r\n        margin-right: 8px;\r\n      }\r\n    }\r\n\r\n    .book-viewer__zoom {\r\n      width: 130px;\r\n      overflow: hidden;\r\n      // margin-right: 18px;\r\n      height: 30px;\r\n\r\n      .zoom-out,\r\n      .zoom-in {\r\n        margin-left: 5px;\r\n      }\r\n    }\r\n  }\r\n\r\n  &__tabs {\r\n    &__body {\r\n      padding: 35px 0;\r\n    }\r\n  }\r\n}\r\n\r\n.lib-lesson__cats__title {\r\n  border-bottom: 2px solid $color_border_line;\r\n  padding-bottom: 10px;\r\n  margin-bottom: 25px;\r\n}\r\n\r\n.lib-lesson__pages {\r\n  @extend .display-flex-wrap;\r\n  .item {\r\n    width: calc((100% / 2) - 15px);\r\n    margin-bottom: 20px;\r\n\r\n    &:nth-child(odd) {\r\n      margin-right: 30px;\r\n    }\r\n\r\n    &__head {\r\n      @extend .aspect-ratio;\r\n      @extend .aspect-ratio--16-9;\r\n      border: 1px solid transparent;\r\n\r\n      &:before {\r\n        @extend .bg-color-light;\r\n      }\r\n    }\r\n\r\n    &__title {\r\n      @extend .primary-bg-color;\r\n      @extend .display-inline-block;\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      border-radius: 0 0 10px 0;\r\n      @extend .font-size-13;\r\n      @extend .color-light;\r\n      padding: 5px 10px;\r\n      line-height: 1;\r\n    }\r\n\r\n    &.active,\r\n    &:hover {\r\n      .item__head {\r\n        border-color: $primary_color;\r\n      }\r\n    }\r\n\r\n    &--2 {\r\n      @extend .text-center;\r\n\r\n      .item {\r\n        &__head {\r\n          max-width: 70%;\r\n          @extend .margin-center;\r\n          @extend .aspect-ratio--1-1-5;\r\n        }\r\n\r\n        &__title {\r\n          @extend .display-block;\r\n          @extend .font-size-16;\r\n          @extend .primary-color-txt;\r\n          padding: 5px 10px;\r\n          line-height: 1;\r\n          @extend .bg-transparent;\r\n          @extend .position-rel;\r\n          @extend .text-center;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.lib-lesson__imgs {\r\n  width: 100%;\r\n  overflow: hidden;\r\n\r\n  &--pptx {\r\n    img,\r\n    .item {\r\n      // max-height: 70%;\r\n      max-height: calc(100vh - 230px);\r\n    }\r\n\r\n    .item {\r\n      overflow: auto;\r\n      max-height: calc(100vh - 230px);\r\n    }\r\n  }\r\n}\r\n\r\n.lib-detail__footer {\r\n  .book-viewer__zoom {\r\n    margin: 0;\r\n  }\r\n}\r\n\r\n.book-viewer {\r\n  &__sidebar {\r\n    top: 55px;\r\n  }\r\n\r\n  &__paging {\r\n    > * {\r\n      &:not(:last-child) {\r\n        margin-right: 12px;\r\n      }\r\n    }\r\n    button,\r\n    &__input {\r\n      //, &__zoom\r\n      height: $height_btn;\r\n      line-height: 28px;\r\n    }\r\n    button {\r\n      @extend .btn-main;\r\n      @extend .border-rd-20;\r\n      min-width: 60px;\r\n      @extend .text-center;\r\n      &:hover {\r\n        i,\r\n        i:before {\r\n          @extend .primary-color;\r\n        }\r\n      }\r\n    }\r\n    &__input {\r\n      width: 100px;\r\n      @extend .border-rd-20;\r\n      @extend .bg-color-light;\r\n      border: 1px solid $color_light;\r\n      overflow: hidden;\r\n      @extend .text-center;\r\n      * {\r\n        @extend .secondary-color-txt;\r\n        @extend .font-size-16;\r\n      }\r\n      &:hover {\r\n        border-color: $primary_color;\r\n      }\r\n      input {\r\n        @extend .border-rd-20;\r\n        &:focus {\r\n          border: 1px solid $primary_color;\r\n        }\r\n      }\r\n    }\r\n    input {\r\n      @extend .border-0;\r\n      @extend .full-box;\r\n      @extend .text-center;\r\n      &:active,\r\n      &:focus,\r\n      &:visited {\r\n        outline: 0;\r\n      }\r\n    }\r\n    .show-pages--mobile {\r\n      display: none;\r\n    }\r\n    &.has-exercise {\r\n      @media screen and (max-width: 767px) {\r\n        .book-viewer__paging__input {\r\n          width: 65px;\r\n          span {\r\n            min-width: 100%;\r\n          }\r\n        }\r\n      }\r\n      @media screen and (min-width: 360px) and (max-width: 767px) {\r\n        button {\r\n          min-width: 45px;\r\n        }\r\n      }\r\n      @media screen and (max-width: 359px) {\r\n        button {\r\n          min-width: 37px;\r\n        }\r\n        > * {\r\n          margin-right: 8px;\r\n        }\r\n      }\r\n    }\r\n    @media screen and (max-width: 991px) {\r\n      .show-pages {\r\n        display: none;\r\n        &--mobile {\r\n          display: block;\r\n        }\r\n      }\r\n    }\r\n  }\r\n  &__zoom {\r\n    width: 115px;\r\n    @extend .bg-color-light;\r\n    @extend .border-rd-20;\r\n    @extend .font-size-16;\r\n    @extend .secondary-color-txt;\r\n    @extend .display-flex-center;\r\n    @extend .justify-content-between;\r\n    overflow: hidden;\r\n    margin-right: 18px;\r\n    button {\r\n      @extend .bg-transparent;\r\n      @extend .border-0;\r\n      @extend .secondary-color-txt;\r\n      @extend .font-size-20;\r\n      &.zoom {\r\n        &-out {\r\n          margin-left: 5px;\r\n        }\r\n        &-in {\r\n          margin-right: 5px;\r\n        }\r\n      }\r\n      &:active,\r\n      &:focus,\r\n      &:visited {\r\n        outline: 0;\r\n      }\r\n    }\r\n    &__mobile {\r\n      .exercise {\r\n        margin-right: 40px;\r\n        a {\r\n          &:not(:last-child) {\r\n            margin-right: 35px;\r\n          }\r\n        }\r\n        @media screen and (min-width: 360px) and (max-width: 575px) {\r\n          margin-right: 25px;\r\n          a {\r\n            &:not(:last-child) {\r\n              margin-right: 25px;\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n#script_docs {\r\n  max-height: calc(100vh - 200px);\r\n  overflow: auto;\r\n\r\n  .item {\r\n    margin-bottom: 25px;\r\n    @extend .bg-color-light;\r\n  }\r\n}\r\n\r\n// #script_docs_pptx {\r\n// \t// max-height: auto;\r\n// \t// overflow: hidden!important;\r\n// \t// #lesson_img {\r\n// \t// \t\tmax-height: calc(100vh - 230px);\r\n// \t// }\r\n\r\n// \t&.is-zoom {\r\n// \t\t// #lesson_img {\r\n// \t\t// \toverflow: auto;\r\n// \t\t// }\r\n// \t\t// max-width: 100%;\r\n// \t\t// max-height: calc(100vh - 200px);\r\n// \t}\r\n// }\r\n\r\n@media (min-width: 992px) {\r\n  .d-lg-none {\r\n    display: none !important;\r\n  }\r\n}\r\n\r\n@media screen and (max-width: 991px) {\r\n  .lib-detail__footer {\r\n    .book-viewer__footer__cats {\r\n      min-width: auto;\r\n    }\r\n  }\r\n\r\n  .lib-lesson__sidebar {\r\n    &.active,\r\n    &.active.mobile-open {\r\n      -webkit-transform: translate(0px, 0px);\r\n      transform: translate(0px, 0px);\r\n    }\r\n  }\r\n}\r\n\r\n@media screen and (min-width: 768px) and (max-width: 991px) {\r\n  .lib-detail__footer {\r\n    .book-viewer__zoom {\r\n      width: 115px;\r\n    }\r\n  }\r\n}\r\n\r\n@media screen and (min-width: 576px) and (max-width: 991px) {\r\n  .lib-lesson__sidebar {\r\n    &.mobile-close {\r\n      -webkit-transform: translate(calc(95vw), 0px);\r\n      transform: translate(calc(95vw), 0px);\r\n    }\r\n\r\n    &.mobile-open:not(.active) {\r\n      -webkit-transform: translate(calc(75vw), 0px);\r\n      transform: translate(calc(75vw), 0px);\r\n    }\r\n  }\r\n}\r\n\r\n@media screen and (max-width: 767px) {\r\n  .lib-detail__footer {\r\n    .book-viewer__zoom {\r\n      width: 100%;\r\n      font-size: 12px;\r\n      margin: 0;\r\n\r\n      .ratio-book {\r\n        width: 60px;\r\n        text-align: center;\r\n        font-size: 13px;\r\n      }\r\n      .zoom-in,\r\n      .zoom-out {\r\n        margin: 0;\r\n      }\r\n    }\r\n\r\n    .book-viewer__paging__input {\r\n      width: 75px;\r\n    }\r\n\r\n    .book-viewer__paging button {\r\n      min-width: 25px;\r\n      width: 25px;\r\n      height: 25px;\r\n      line-height: 23px;\r\n    }\r\n  }\r\n  .detail-books__footer,\r\n  .detail-books__head {\r\n    padding: 0 15px;\r\n  }\r\n\r\n  .book-viewer__zoom-switch {\r\n    max-width: 110px;\r\n  }\r\n}\r\n\r\n@media screen and (min-width: 576px) and (max-width: 767px) {\r\n  .lib-detail__footer {\r\n    .book-viewer__paging button {\r\n      min-width: 30px;\r\n    }\r\n  }\r\n}\r\n\r\n@media screen and (max-width: 575px) {\r\n  .lib-lesson__sidebar {\r\n    &.mobile-close {\r\n      -webkit-transform: translate(calc(95vw), 0px);\r\n      transform: translate(calc(95vw), 0px);\r\n    }\r\n\r\n    &.mobile-open:not(.active) {\r\n      -webkit-transform: translate(calc(80vw), 0px);\r\n      transform: translate(calc(80vw), 0px);\r\n    }\r\n  }\r\n  .lib-detail__footer {\r\n    .book-viewer__paging button {\r\n      min-width: 25px;\r\n      width: 25px;\r\n      height: 25px;\r\n      line-height: 25px;\r\n      padding: 0;\r\n    }\r\n    .book-viewer__zoom {\r\n      .zoom-in,\r\n      .zoom-out {\r\n        margin: 0;\r\n        padding: 0;\r\n        i {\r\n          font-size: 13px;\r\n        }\r\n      }\r\n      .zoom-out {\r\n        padding-left: 5px;\r\n      }\r\n      .zoom-in {\r\n        padding-right: 5px;\r\n      }\r\n    }\r\n  }\r\n}\r\n</style>","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./DetailLesson.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./DetailLesson.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./DetailLesson.vue?vue&type=template&id=afc47558&scoped=true&\"\nimport script from \"./DetailLesson.vue?vue&type=script&lang=js&\"\nexport * from \"./DetailLesson.vue?vue&type=script&lang=js&\"\nimport style0 from \"./DetailLesson.vue?vue&type=style&index=0&id=afc47558&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"afc47558\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}