(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{361:function(e,n,t){"use strict";t.r(n),t.d(n,"default",function(){return y});var i=t(15),r=t.n(i),a=t(16),s=t.n(a),n=t(343),o=t.n(n),i=t(344),c=t.n(i),a=t(345),l=t.n(a),n=t(60),d=t.n(n),i=t(346),a=t(351),n=t.n(a),a=t(354),u=t(347);function v(t){var i=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch(e){return!1}}();return function(){var e,n=l()(t);return n=i?(e=l()(this).constructor,Reflect.construct(n,arguments,e)):n.apply(this,arguments),c()(this,n)}}function g(n,e){var t,i=Object.keys(n);return Object.getOwnPropertySymbols&&(t=Object.getOwnPropertySymbols(n),e&&(t=t.filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})),i.push.apply(i,t)),i}function m(n){for(var e=1;e<arguments.length;e++){var t=null!=arguments[e]?arguments[e]:{};e%2?g(Object(t),!0).forEach(function(e){d()(n,e,t[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):g(Object(t)).forEach(function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(t,e))})}return n}var h=30,f=5,p=n.a.component("channel-live-guide",{name:"ChannelLiveGuide",computed:m(m({},Object(a.mapGetters)(["channelLiveGuideTitle","channelLiveGuidePrograms"])),{},{getToday:function(){function e(e){return(e<10?"0":"")+e}var n=new Date;return"".concat(e(n.getDate()),"-").concat(e(n.getMonth()+1),"-").concat(n.getFullYear())},getOndemand:function(){var e=this.channelLiveGuidePrograms.onDemand;if(null==e||0===e.length)return[];e=this.filterListOndemand(e);return this.isMobile()?e:e.reverse()},getNextPrograms:function(){var e=this.channelLiveGuidePrograms.nextProgram||[];return 0===e.length?[]:this.filterListNextProgram(e)},getLiveProgram:function(){var n=this,e=this.channelLiveGuidePrograms,t=e.onDemand,e=e.nextProgram;if(!t&&!e)return!1;t=t.filter(function(e){return e.check&&e.dia===n.getToday})[0]||!1,e=e.filter(function(e){return e.check&&e.dia===n.getToday})[0]||!1;return t||e},carouselHide:function(){return!(!1===this.getLiveProgram&&0===this.getNextPrograms.length&&0===this.getOndemand.length)}}),methods:{removeItemsLive:function(e){return e.filter(function(e){return!0!==e.check})},removeItemHide:function(e){return e.filter(function(e){return!0!==e.programHide})},removeItemOndemandHide:function(e){return e.filter(function(e){return!0!==e.onDemandHide})},filterListOndemand:function(e){e=this.removeItemHide(e),e=this.removeItemOndemandHide(e);return this.removeItemsLive(e).reverse().slice(0,8)},filterListNextProgram:function(e){e=this.removeItemHide(e);return this.removeItemsLive(e).slice(0,9)},hitAudience:function(e){e=e.reference;try{var n={action:"clique",central:"mov",channel:"uolplay",component:"canal-next-guide",mediaName:"Home",reference:e};window.hitAudience.countClick(n)}catch(e){console.error("hitAudience",e)}},isMobile:function(){return u.a.checkin(["xs"])},renderMobile:function(){var e=this.$el.querySelectorAll(".contents .see-more");Array.from(e).forEach(function(e){var n=122,t=e.parentNode.querySelectorAll(".box"),i=e.parentNode.querySelector(".cards"),r=Array.from(t).reduce(function(e,n){return e+parseInt(n.offsetHeight+2)},0),a=r;i.style.height="".concat(n,"px"),r-=n,e.addEventListener("click",function(){r<=0?(e.classList.remove("ver-menos"),i.style.height="".concat(122,"px"),r=a-122,n=122):(n+=488<=r?488:r,i.style.height="".concat(n,"px"),(r-=488)<=0&&(e.classList.add("ver-menos"),r=0,n=122))})},0)},arrow:function(n){return{hide:function(){n.style.display="none"},show:function(){n.style.display="block"},onClick:function(e){return n.addEventListener("click",e)}}},cardsOndemand:function(t){var e=this.$el.querySelectorAll(".box.ondemand"),i=e.length-1,r=0,a=0;return e.forEach(function(e,n){n<i&&(r++,a+=e.offsetWidth+t)}),{sizeContainerPx:a,cardActivePosition:r}},carousel:function(n,t){var i=this.$el.querySelector(".channel-live-carousel");return{positionLeft:function(e){i.style.left="-".concat(e,"px")},calcDisplayButtonNext:function(e){setTimeout(function(){0===e?n.hide():n.show(),i.scrollWidth-Math.abs(i.offsetLeft)<=i.offsetWidth?t.hide():t.show()},500)}}},loadDependency:function(){var e=this.$el.querySelectorAll(".channel-live-carousel .box"),n=this.arrow(this.$el.querySelector(".carrossel-arrows .prev")),t=this.arrow(this.$el.querySelector(".carrossel-arrows .next"));return{cards:e,arrowPrev:n,arrowNext:t,carousel:this.carousel(n,t),cardsOndemand:this.cardsOndemand(f)}},renderDesktop:function(){var e=this.loadDependency(),n=e.cards,t=e.carousel,i=e.arrowPrev,r=e.arrowNext,a=e.cardsOndemand,s=-h;s+=a.sizeContainerPx,t.positionLeft(s),t.calcDisplayButtonNext(a.cardActivePosition),i.onClick(function(){1==a.cardActivePosition&&(s+=h),s-=n[a.cardActivePosition-1].offsetWidth+f,t.positionLeft(s),a.cardActivePosition===n.length-1&&r.show(),a.cardActivePosition--,0===a.cardActivePosition&&i.hide(),t.calcDisplayButtonNext(a.cardActivePosition)}),r.onClick(function(){0===a.cardActivePosition&&(s-=h),s+=n[a.cardActivePosition].offsetWidth+f,t.positionLeft(s),a.cardActivePosition++,0!==a.cardActivePosition&&i.show(),t.calcDisplayButtonNext(a.cardActivePosition)})},renderCarousel:function(){(u.a.checkin(["xs"])?this.renderMobile:this.renderDesktop)()},setVideoOnDemand:function(e){this.$emit("add",e)}},updated:function(){this.renderCarousel()},template:'\n        <div v-show="carouselHide" class="section-live-guide">\n            <div class="container no-gutter-xs">\n                <div class="channel-live-guide row">\n                        <div class="col-sm-24 col-xs-8 no-gutter overflow-hidden">\n                            <div class="channel-live-carousel">\n\n                                \x3c!------------------ ONDEMAND ------------------\x3e\n                                <div v-show="getOndemand.length" class="contents">\n                                    <div class="title">\n                                        <h3 class="ondemand">Últimos programas</h3>\n                                    </div>\n                                    <div class="cards ondemand">\n                                        <div v-for="item in getOndemand" @click="setVideoOnDemand(item)"\n                                            :class="[\'box\', \'ondemand\', {\'has-guest\': item.hasGuests}]"\n                                            :style=" item.presenterImage ? \'background-image: url(\' + item.presenterImage + \')\' : \'\' ">\n                                            <div class="play">\n                                                <div class="icon"><svg>\n                                                        <use xlink:href="#svg-play" /></svg></div>\n                                                Assistir\n                                            </div>\n                                            <div class="box-logo">\n                                                <div href=\'https://www.uol.com.br\' class="logo">\n                                                    <img alt="" :data-src="item.brandLogoImage" :src="item.brandLogoImage"\n                                                        :title="item.programName">\n                                                </div>\n                                            </div>\n                                            <div class="box-guest">\n                                                <a class="guest">\n                                                    <img alt="" :data-src="item.attractionImage" :src="item.attractionImage"\n                                                        :title="item.programName">\n                                                </a>\n                                                <a class="guest-text">{{ item.attractionDescription }}</a>\n                                            </div>\n                                        </div>\n                                    </div>\n                                    <a class="see-more">\n                                        <span>\n                                            <svg>\n                                                <use xlink:href="#svg-single-arrow-down" /></svg>\n                                        </span>\n                                    </a>\n                                </div>\n\n                                \x3c!------------------ LIVE ------------------\x3e\n                                <div v-show="getLiveProgram" class="contents live">\n                                    <div class="title">\n                                        <h3 class="live">Agora</h3>\n                                    </div>\n                                    <div class="cards live">\n                                        <div @click="setVideoOnDemand(getLiveProgram)"\n                                            :class="[\'box\', {\'has-guest\': getLiveProgram.hasGuests}]"\n                                            :style=" getLiveProgram.presenterImage ? \'background-image: url(\' + getLiveProgram.presenterImage + \')\' : \'\' ">\n                                            <div class="box-logo">\n                                                <a class="logo">\n                                                    <img alt="" :data-src="getLiveProgram.brandLogoImage"\n                                                        :src="getLiveProgram.brandLogoImage" :title="getLiveProgram.programName">\n                                                </a>\n                                            </div>\n                                            <div class="box-guest">\n                                                <div class="guest">\n                                                    <img alt="" :data-src="getLiveProgram.attractionImage"\n                                                        :src="getLiveProgram.attractionImage" :title="getLiveProgram.programName">\n                                                </div>\n                                                <div class="guest-text">{{ getLiveProgram.attractionDescription }}</div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n\n                                \x3c!------------------ PRÓXIMOS PROGRAMAS ------------------\x3e\n                                <div v-show="getNextPrograms.length" class="contents nexts">\n                                    <div class="title">\n                                        <h3 class="nexts">Próximos programas</h3>\n                                    </div>\n                                    <div class="cards nexts">\n                                        <div v-for="item in getNextPrograms"\n                                            :class="[\'box\', \'nexts\', {\'has-guest\': item.hasGuests}]"\n                                            :style=" item.presenterImage ? \'background-image: url(\' + item.presenterImage + \')\' : \'\' ">\n                                            <span class="day">{{item.diaSemana}}</span>\n                                            <time class="time with-day"> {{ item.hour }}</time>\n                                            <div class="box-logo">\n                                                <a class="logo">\n                                                    <img alt="" :data-src="item.brandLogoImage" :src="item.brandLogoImage"\n                                                        :title="item.programName">\n                                                </a>\n                                            </div>\n                                            <div class="box-guest">\n                                                <div class="guest">\n                                                    <img alt="" :data-src="item.attractionImage" :src="item.attractionImage"\n                                                        :title="item.programName">\n                                                </div>\n                                                <div class="guest-text">{{ item.attractionDescription }}</div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                    <a class="see-more">\n                                        <span>\n                                            <svg>\n                                                <use xlink:href="#svg-single-arrow-down" /></svg>\n                                        </span>\n                                    </a>\n                                </div>\n\n                            </div>\n                        </div>\n\n                        <div class="carrossel-arrows">\n                            <a class="prev hidden-xs" @click="hitAudience({reference: \'nav-esquerda\'})">\n                                <svg class="svg-icon">\n                                    <use xlink:href="#svg-single-arrow-left" />\n                                </svg>\n                            </a>\n                            <a class="next hidden-xs" @click="hitAudience({reference: \'nav-direita\'})">\n                                <svg class="svg-icon">\n                                    <use xlink:href="#svg-single-arrow-right" />\n                                </svg>\n                            </a>\n                        </div>\n                </div>\n            </div>\n        </div>\n    '}),y=function(e){o()(t,e);var n=v(t);function t(){return r()(this,t),n.apply(this,arguments)}return s()(t,[{key:"onCreate",value:function(){}},{key:"channelLiveGuide",get:function(){return p}}]),t}(i.a)}}]);