eta_front/src/views/ppt_manage/newVersion/pptPresent.vue

<template>
  <div class="present-page-wrap page-wrap" style="width:100%;height:100%;" :style="{overflow:isScreen?'hidden':'auto'}">
    <template v-if="!isScreen">
      <div class="index-list">
        <!-- 样式需要 -->
        <div style="display:none"></div>
        <!-- 封面 -->
        <div class="line"></div>
        <index-item 
          v-if="currentItem"
          :pageIndex="0" 
          :pageItem="coverInfo.index" 
          :currentItem="currentItem"
          :showCloseBtn="false"
          @click.native="changeCurrentItem(coverInfo.index)"
        ></index-item>
        <index-item 
          v-for="(item,index) in pageList" :key="index+1"
          :pageItem="item"
          :pageIndex="index+1"
          :currentItem="currentItem"
          :showCloseBtn="false"
          @click.native="changeCurrentItem(item)"
        />
        <!-- 封底 -->
        <index-item
          v-if="currentItem&&isShowBack"
          :pageIndex="pageList.length+1" 
          :pageItem="backInfo.index" 
          :currentItem="currentItem"
          :showCloseBtn="false"
          @click.native="changeCurrentItem(backInfo.index)"
        ></index-item>
        <!-- 样式需要 -->
        <div></div>
      </div>
      <div class="show-wrap flex-column">
        <div id="fullscreen" class="fullscreen flex-center"  ref="pptWrap">
          <!-- <div class="image-move" v-if="dragShow" @mousedown.stop="handleMoveStart" ></div> -->
          <div class="ppt-wrap" @wheel.stop="normalMouseWheel">
            <!-- 封面 -->
            <div class="ppt-item" id="cover" v-if="currentIndex===0" style="background-size:20%;">
              <!-- <Cover :pageInfo="coverInfo.page" v-show="coverInfo.page"></Cover> -->
              <CustomCover :pageInfo="coverInfo.page" :CoverContent="pptCoverContent" v-show="coverInfo.page"></CustomCover>
            </div>
            <!-- 封底 -->
            <div class="ppt-item" id="back" v-else-if="currentIndex===pageList.length+1" style="background-size:20%;">
              <img :src="coverInfo.page.BackCoverImg" class="pptbg" style="width:100%;height:100%;object-fit: fill !important;"/>
            </div>
            <!-- PPT内容 -->
              <div class="ppt-item" v-else>
                
                <!-- 自定义标题 -->
                <div class="custom-title-wrap editor-content" 
                    :style="currentItem.titleDetail?{
                        left:(currentItem.titleDetail.baseLeft||90)*contentScale+'px',
                        top:(currentItem.titleDetail.baseTop||40.9)*contentScale+'px',
                        width:(currentItem.titleDetail.baseWidth||612)+'px',
                        height:(currentItem.titleDetail.baseHeight||30.9)+'px',
                    }:{
                        left:90*contentScale+'px',top:40.9*contentScale+'px',width:'612px',height:'30.9px'
                    }">
                        <div class="title" v-html="currentItem.title"
                        :style="currentItem.titleDetail?{
                            color:currentItem.titleDetail.color||'#333',
                            fontSize:(currentItem.titleDetail.fontSize||22)+'px',
                            fontFamily:currentItem.titleDetail.fontFamily||'helvetica'
                        }:{ color:'#333',fontSize:'22px',fontFamily:'helvetica' }"></div>
                </div>
                <component
                  :ref="`pptPage_${currentIndex-1}`" 
                  :is="componentName" 
                  :key="currentKey"
                  type="show"
                  :pageIndex="currentIndex-1"
                  :pageItem="currentItem">
                </component>
              </div>
          </div>
        </div>
        <div class="other">
          <div class="page-info">
            <span>{{pptSlidePages}}</span>
          </div>
          <div class="btn-list">
            <el-button @click="(e)=>{FullScreen(e,'live')}" type="primary" class="btn"> {{$t('Slides.portrait_mode_playback')}} </el-button>
            <el-dropdown split-button type="primary" @command="handleLayoutCommand" class="btn">
              {{layoutStr}}
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="1">10:7</el-dropdown-item>
                <el-dropdown-item :command="2">16:9</el-dropdown-item>
                <el-dropdown-item :command="3">4:3</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-dropdown split-button type="primary" @click="FullScreen" @command="handleCommand">
              {{$t('Slides.play_from_current_slide')}}
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item> {{$t('Slides.play_for_the_first_slide')}}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <div class="ppt-screen fullscreen" :class="fullScreenType==='live'?'live':''" ref="pptFullScreen"
        @mousedown.stop="(e)=>{handleMouse('down',e)}" @mouseup="(e)=>{handleMouse('up',e)}" @wheel.stop="normalMouseWheel" @contextmenu="handleContextMenu" >
          <div class="ppt-wrap">
            <!-- 封面 -->
            <div class="ppt-item" id="cover" v-if="currentIndex===0" style="background-size:20%;">
              <!-- <Cover :pageInfo="coverInfo.page" v-show="coverInfo.page"></Cover> -->
              <CustomCover :pageInfo="coverInfo.page" :CoverContent="pptCoverContent" v-show="coverInfo.page"></CustomCover>
            </div>
            <!-- 封底 -->
            <div class="ppt-item" id="back" v-else-if="currentIndex===pageList.length+1" style="background-size:20%;">
              <img :src="coverInfo.page.BackCoverImg" class="pptbg" style="width:100%;height:100%;object-fit: fill !important;"/>
            </div>
            <!-- PPT内容 -->
              <div class="ppt-item" v-else>
                <!-- 自定义标题 -->
                <div class="custom-title-wrap editor-content" 
                    :style="currentItem.titleDetail?{
                        left:(currentItem.titleDetail.baseLeft||90)*contentScale+'px',
                        top:(currentItem.titleDetail.baseTop||40.9)*contentScale+'px',
                        width:(currentItem.titleDetail.baseWidth||612)+'px',
                        height:(currentItem.titleDetail.baseHeight||30.9)+'px',
                    }:{
                        left:90*contentScale+'px',top:40.9*contentScale+'px',width:'612px',height:'30.9px'
                    }">
                        <div class="title" v-html="currentItem.title"
                        :style="currentItem.titleDetail?{
                            color:currentItem.titleDetail.color||'#333',
                            fontSize:(currentItem.titleDetail.fontSize||22)+'px',
                            fontFamily:currentItem.titleDetail.fontFamily||'helvetica'
                        }:{ color:'#333',fontSize:'22px',fontFamily:'helvetica' }"></div>
                </div>
                <component
                  :ref="`pptPage_${currentIndex-1}`" 
                  :is="componentName" 
                  :key="currentKey"
                  type="show"
                  :pageIndex="currentIndex-1"
                  :pageItem="currentItem">
                </component>
              </div>
            <!-- 页标 -->
            <div class="page-hint" v-show="isScreen">
              {{currentIndex+1}}/{{pageList.length+2}}
            </div>
          </div>
           <!-- 自定义右键菜单 -->
          <context-menu 
            :modelName="screenModel"
            @cancel="hideContextMenu"
            @prev="prevPPT"
            @next="nextPPT"
            @exit="ExitFullScreen"
            @paint="changeModel"
          />
          <!-- 提示语 -->
          <transition name="fade">
            <div class="hint flex-center" v-show="hintText">
              <div class="hint-icon-wrap">
                <img src="~@/assets/img/ppt_m/hint-icon.png"/>
              </div>
              {{hintText}}
            </div>
          </transition>
          <!-- 画板 -->
          <drawing-board-tool 
            :model="screenModel"
            ref="drawBoard"
            @close="changeModel"
            @cancel="hideContextMenu"
            @prev="prevPPT"
            @next="nextPPT"
            @exit="ExitFullScreen"
            @paint="changeModel"
            @salfClear="cleanPaintBoard('page')"
          />
      </div>
    </template>
  </div>
</template>

<script>
import Cover from './components/Cover.vue';
import CustomCover from './components/CustomCover.vue';
import IndexItem from './components/IndexItem.vue';
import {countComponentName,setFullscreen,isFullscreen,exitFullscreen,calcScale,countStrSize} from './utils/untils';
import pptmixin from '../mixins/pptMixins';
import mixins from '../mixins/mixins';
import ContextMenu from './components/ContextMenu.vue';
import Highcharts from "highcharts/highstock";
import HighchartszhCN  from '@/utils/highcahrts-zh_CN'
import DrawingBoardTool from './components/DrawingBoardTool.vue';
HighchartszhCN(Highcharts)
const reloadPPTWid = ()=>{
  const resizeEvent = new Event('resize')
  window.dispatchEvent(resizeEvent)
}
export default {
  components: { IndexItem, Cover ,ContextMenu, DrawingBoardTool, CustomCover},
  mixins:[pptmixin,mixins],
  data() {
    return {
        coverInfo:{
        index:{
          id:0,
          title:'封面',
        },
      },//封面信息
      backInfo:{
        index:{
          id:-1,
          title:this.$t('Slides.back_cover_info')
        }
      },//封底信息
      pageList:[],//ppt数组
      currentItem:null,//当前活跃的page
      currentIndex:0,//当前活跃的pageIndex
      componentName: "formatOne", //当前活跃页的版式名
      isScreened:false,//Resize时,是否全屏过
      hintText:null,//全屏提示语
      isContextMenuShow:false,
      currentKey:0,
      layoutStr:`10.7${this.$t('Slides.default_size')}`,
      LayoutType:1,//ppt比例,1:默认比例10:7,2:16:9,3:4:3
      coefficient:0.7,//宽高系数
      contentScale:1,//文本区域的缩放系数,基准:编辑页的ppt-item宽高
      isScreen:false,//当前是否是全屏状态
      fullScreenType:'normal',//全屏模式，normal和live；为live时样式改变
      screenHeight:0,//屏幕高
      screenWidth:0,//屏幕宽
      screenModel:'mouse',//画笔模式(paint)还是鼠标模式(mouse)
      canvasPage:[],//画布页
      timer:null,//长按标识
    };
  },
  watch:{
    LayoutType(newval){
      let coefficient = newval===1?0.7:newval===2?0.5625:0.75
      this.coefficient = coefficient
    }
  },
  computed:{
    dragShow(){
      return this.isScreen&&this.fullScreenType==='live'
    },
    lineClamp(){
        return this.LayoutType===2?2:3
    },
    isShowBack(){
        return Boolean(this.coverInfo.page.BackCoverImg)
    },
    pptSlidePages(){
      let str = this.$i18n.locale == 'zh'? 
      `第${this.currentIndex+1}页PPT,共${this.isShowBack?(this.pageList.length+2):(this.pageList.length+1)}页` 
      : `Slide${this.currentIndex+1} of ${this.isShowBack?(this.pageList.length+2):(this.pageList.length+1)}`
      return str
    },

    //语言版本
  },
  methods: {
    //切换当前显示的页面
    async changeCurrentItem(item){
      if(this.currentKey>0) this.currentKey++
      const {id} = item
      if(Highcharts.charts){
        Highcharts.charts.length=0;
      }
      if(id===0||id===-1){
        this.currentItem = item
        this.currentIndex = id===0?0:this.pageList.length+1
        return 
      }
      this.pageList.map((item,index)=>{
          if(item.id===id){
            this.currentItem = item
            this.currentIndex = index+1
          }
      })
      this.componentName = countComponentName(this.currentItem.modelId);
      await this.initPageElements(this.currentItem,'show',true)
      this.$nextTick(()=>{
        if($('#content')[0]){
          $('#content').css('transform',`scale(${this.contentScale})`)
        }
        if($('.editor-content')[0]){
          $('.editor-content').css('transform',`scale(${this.contentScale})`)
        }
        this.changeLayersSize()
        $('.ppt-item').css('background-image',`url(${this.coverInfo.page.CurrentBackgroundImg})`);
      })
    },
    async init(){
      this.dataLoading = this.$loading({
        lock: true,
        text: `${this.$t('Slides.loading_urgently')}...`,
        spinner: 'el-icon-loading',
        customClass:'loading',
        background: 'rgba(255, 255, 255, 0.8)'
      });
      await this.getpptData();
      //加载每一项
      //加载每一项图表的数据
      for(let i=0;i<this.pageList.length;i++){
        this.canvasPage[i] = null
        const chartElements = this.pageList[i].elements.filter((item) => {
          return item.type === "chart";
        });
        const sheetElements = this.pageList[i].elements.filter((item)=>{
          return item.type === 'sheet'
        })
        if(this.pageList[i].titleDetail){
            this.pageList[i].titleDetail = {
                ...this.pageList[i].titleDetail,
                ...this.getBasePosition(this.pageList[i].titleDetail)
            }
        }
        this.listHandle(chartElements,'present');
        this.sheetListHandle(sheetElements);
      }
      this.currentKey = 1
      this.coverInfo.page.CurrentBackgroundImg&&$('.ppt-item').css('background-image',`url(${this.coverInfo.page.CurrentBackgroundImg})`);
      this.dataLoading.close();
    },
    //根据id获取ppt数据
    async getpptData(){
      const {id} = this.$route.query
      if(id){
        await this.getpptDataById(id)
        const {status} = this.result
        if(status===200){
          const {content,FirstPage} = this.result
          this.pageList = content
          this.coverInfo.index.title = FirstPage.Title
          this.coverInfo.page = FirstPage
          this.coverInfo.page.imgLocalUrl = this.bgList[FirstPage.TemplateType-1]
          this.currentItem = this.coverInfo.index
          this.currentIndex=0
        }else{
          this.$message.error(this.$t('Slides.error_ppt_data_msg') );
          this.dataLoading.close();
          window.close()
        }
      }else{
        this.$message.error(this.$t('Slides.no_corresponding_ppt_msg') )
        window.close()
      }
    },
    //设置全屏
    FullScreen(_,type='normal'){
      this.fullScreenType = type
      this.isScreened = true
      this.isScreen = true
      setFullscreen(document.documentElement);
    },
    //点击右键菜单,退出全屏
    ExitFullScreen(){
      exitFullscreen();
      this.hideContextMenu()
      this.removeEventListener()
    },
    handleCommand(){
      this.changeCurrentItem(this.coverInfo.index)
      this.FullScreen()
    },
    //是否展示自定义右键菜单
    handleContextMenu(e){
      if(!isFullscreen()) return
      e.preventDefault();
      $("#menu").css({ "left": document.body.scrollLeft + e.clientX, "top": 
       document.body.scrollTop + e.clientY}).show();
       this.isContextMenuShow = true
    },
    //(非全屏模式下)隐藏右键菜单
    hideContextMenu(){
      $('#menu').hide();
      this.isContextMenuShow = false
    },
    //handle全屏事件监听
    addEventListener(){
      const dom =document;
      dom.addEventListener('keydown',this.handleKeyDown)
      //dom.addEventListener('click',this.handleClick)
      dom.addEventListener('mousewheel',this.handleMouseWheel,{ passive: false })
    },
    //handle移除全屏事件监听
    removeEventListener(){
      const dom =document;
      dom.removeEventListener('keydown',this.handleKeyDown)
      //dom.removeEventListener('click',this.handleClick)
      dom.removeEventListener('mousewheel',this.handleMouseWheel,{ passive: false })
    },
    //按键:↑↓
    handleKeyDown(e){
      if(this.isContextMenuShow){
        this.hideContextMenu()
        return
      }  
      //console.log('test',e.key)
      if(e&&e.key==='ArrowUp'){
        this.prevPPT()
      }
      if(e&&e.key==='ArrowDown'){
        this.nextPPT()
      }
    },
    //鼠标左键:相当于按键↓
    handleClick(e){
      if(e.target._prevClass==='image-move'){
        return
      }
      if(this.isContextMenuShow){
        this.hideContextMenu()
        return
      }
      this.nextPPT()
    },
    //全屏滚轮事件:向上滚:↑;向下滚:↓
    handleMouseWheel:_.throttle(function(e){
      if(this.isContextMenuShow){
        this.hideContextMenu()
        return
      }
      if(!isFullscreen()) return
      e.preventDefault();
      if (e.deltaY > 0) this.nextPPT() 
      else if (e.deltaY < 0) this.prevPPT()
      
    },300),
    //ppt-wrap 滚轮事件
    normalMouseWheel:_.throttle(function(e){
      if(this.isContextMenuShow){
        this.hideContextMenu()
        return
      }
      //if(isFullscreen()) return
      e.preventDefault()
      if (e.deltaY > 0) this.nextPPT() 
      else if (e.deltaY < 0) this.prevPPT()
    },300),
    //全屏处理事件
    windowResizeListener(){
      //退出全屏
      if(!isFullscreen()&&this.isScreen){
        console.log('exit fullScreen')
        this.hideContextMenu()
        this.removeEventListener()
        this.isScreened = false
        this.isScreen = false
        if(this.hintText) this.hintText=null
        this.setScreen(false)
      }
      //进入全屏
      if(isFullscreen()){
        console.log('fullscreen')
        this.isScreen = true
        this.setScreen(true)
        this.addEventListener();
      }
      //this.changeCurrentItem(this.currentItem)
    },
    //ppt上一页
    prevPPT(){
      if(this.currentIndex===0){
        //this.$message.warning('已经是第一页')
        !this.hintText&&this.showHint('prev')
        return 
      }else{
        let item =null

        //isFullscreen()&&this.saveCanvasPage()
        isFullscreen()&&this.$refs.drawBoard.clearCanvas()
        //说明切换后是封面页
        if(this.currentIndex===1){
          item = this.coverInfo.index
        }
        this.changeCurrentItem(item?item:this.pageList[this.currentIndex-2])

        //isFullscreen()&&this.reDrawCanvasPage()
      }
      if(this.isContextMenuShow){
        this.hideContextMenu()
      }
    },
    //ppt下一页
    nextPPT(){
      const maxLength = this.isShowBack?(this.pageList.length+1):this.pageList.length
      if(this.currentIndex===maxLength){
        //this.$message.warning('已经是最后一页')
        !this.hintText&&this.showHint('next')
      }else{
        let item =null
        
        //isFullscreen()&&this.saveCanvasPage()
        isFullscreen()&&this.$refs.drawBoard.clearCanvas()
        //说明切换后是封底页
        if(this.currentIndex===this.pageList.length){
          item = this.backInfo.index
        }
        this.changeCurrentItem(item?item:this.pageList[this.currentIndex])

        //isFullscreen()&&this.reDrawCanvasPage()
      }
      if(this.isContextMenuShow){
        this.hideContextMenu()
      }
    },
    //全屏的message提示
    showHint(type){
      if(type==='prev'){
        this.hintText= this.$t('Slides.this_one_ppt_msg') 
      }else{
        this.hintText= this.$t('Slides.this_last_ppt_msg') 
      }
      setTimeout(()=>{
        this.hintText = null
      },1200)
    },
    //改变ppt的宽高比
    async handleLayoutCommand(command){
      this.LayoutType = command
      this.layoutStr = ['',`10.7${this.$t('Slides.default_size')}`,'16:9 ','4:3 '][this.LayoutType]
      this.$nextTick(()=>{
        reloadPPTWid()
        $('.ppt-item').css('height',$('.ppt-item').width()*this.coefficient);
        this.contentScale = $('.ppt-item').width()/900
        this.changeLayersSize()
      })
    },
    //currentItem内图层元素自适应
    changeLayersSize(){
      if(this.currentItem&&this.currentItem.layers){
        this.currentItem.layers.map(shape=>{
          const scale = calcScale({w:906,h:906*0.7},{w:$('.ppt-item').width(),h:$('.ppt-item').width()*this.coefficient})
          $('.shape').css('transform',`scale(${scale.x},${scale.y})`)
          if(shape.type==='text'){
            //text元素的shape不需要scale
            $('.shape-text').css('transform',`scale(1)`)
          }
        })
      }
    },
    //路演模式时，拖动调节ppt的大小
    handleMoveStart(e){
      this.isMouseDown = true
      const moveLeft = $('.image-move').offset().left     
      const pptWidth = $('.fullscreen:fullscreen .ppt-wrap').width()
      const scaleHeight = $('.fullscreen:fullscreen').height()
      document.onmousemove=(move)=>{
        const moveX = move.clientX - e.clientX
        const width = pptWidth-moveX
        this.$nextTick(()=>{
          $('.fullscreen:fullscreen .ppt-wrap').css('width',width)
          $('.fullscreen:fullscreen .ppt-wrap .ppt-item').css('height',$('.ppt-item').width()*this.coefficient);
          $('.image-move').css('left',moveLeft+moveX)
          const scale = calcScale({w:width,h:width*this.coefficient},{w:width,h:scaleHeight})
          $('.ppt-item').css('transform',`scale(${scale.x},${scale.y})`)
        })
        
      }
      document.onmouseup=()=>{
        this.isMouseDown = false
        document.onmousemove = null
        document.onmouseup = null
      }
    },
    //全屏/非全屏设置
    async setScreen(isScreen){
      if(!isScreen){
        this.$nextTick(()=>{
          $('.fullscreen .ppt-wrap').css('width','1100px')
          $('.ppt-item').css('transform',`scale(1)`)
          this.changeCurrentItem(this.currentItem)
          $('.ppt-item').css('background-image',`url(${this.coverInfo.page.CurrentBackgroundImg})`);
        })
      }else{
        this.$nextTick(()=>{
          this.fullScreenSet()
        })
        
      }
    },
    fullScreenSet(){
      $('.fullscreen .ppt-wrap').css('height',this.screenHeight)
      //全屏模式
      if(this.fullScreenType==='normal'){
        //console.log('normal')
        $('.fullscreen .ppt-wrap').css('width',this.screenHeight/this.coefficient)
        //修正ppt-item的高
        $('.ppt-item').css('height',$('.ppt-item').width()*this.coefficient);
      }else{
        //线上路演模式
        //console.log('live')
        //算出当前屏幕72%的宽是多少
        const liveWidth = this.screenWidth*0.72
        $('.fullscreen .ppt-wrap').css('width',liveWidth)
        const oldPPTWidth = $('.ppt-item').width()
        //修正ppt-item的高
        $('.ppt-item').css('height',$('.ppt-item').width()*this.coefficient);
        const scale = calcScale({w:oldPPTWidth,h:oldPPTWidth*this.coefficient},{w:liveWidth,h:this.screenHeight})
        $('.ppt-item').css('transform',`scale(${scale.x},${scale.y})`)
      }
      this.changeCurrentItem(this.currentItem) 
    },
    //检查页面是否处于全屏状态
    handleCheckScreen(){
      if(isFullscreen()){
        console.log('进入全屏')
        this.isScreen = true
        this.setScreen(true)
        this.addEventListener();
      
      }else{
        console.log('退出全屏')
        this.hideContextMenu()
        this.removeEventListener()
        this.cleanPaintBoard('all')
        this.screenModel = 'mouse'
        this.isScreened = false
        this.isScreen = false
        if(this.hintText) this.hintText=null
        this.setScreen(false)
      }
      //console.log('触发',document.fullscreenElement)
    },
    //切换演示时，页面模式
    changeModel(){
      const modelName = this.screenModel==='paint'?'mouse':'paint'
      this.screenModel = modelName
      if(this.isContextMenuShow){
        this.hideContextMenu()
      }
      $("#menuboard").hide()
    },
    //清空一页/全部笔迹
    cleanPaintBoard(type){
      if(type==='page'){
        this.canvasPage[this.currentIndex] = null
      }
      else{
        this.canvasPage.forEach((_,index)=>{
          this.canvasPage[index] = null
        })
      }
    },
    //保存当前页的画布
    saveCanvasPage(){
      const hasPainted = this.$refs.drawBoard.hasPainted
      if(hasPainted){
        let imgData = this.$refs.drawBoard.saveCanvas()
        this.canvasPage[this.currentIndex] = imgData
        //清空画布
        this.$refs.drawBoard.clearCanvas()
      }
    },
    //显示切换后的画布
    reDrawCanvasPage(){
      if(this.canvasPage[this.currentIndex]){
        this.$refs.drawBoard.reDrawCanvas(this.canvasPage[this.currentIndex])
        this.$refs.drawBoard.hasPainted = true
      }else{
        this.$refs.drawBoard.hasPainted = false
      }
    },
    //鼠标长按,抬起
    handleMouse(type,e){
   /*    console.log('test',type)
      console.log('鼠标哪个键',e.which) */
      //鼠标左键长按:进入画笔模式
      if(type==='down'&&e.which==1){
        this.timer = setTimeout(()=>{
          this.changeModel()
          this.$refs.drawBoard.startDraw(e)  
        },500)
      }
      //鼠标左键抬起:如果当前在画笔模式,则退出画笔模式
      if(type==='up'&&e.which==1){
        if(this.screenModel==='paint'){
          this.changeModel()
        }
        this.timer&&clearTimeout(this.timer)
      }  
    },
    //计算title的字节数
    getStrCount(title){
        return countStrSize(title)
    }
  },
  mounted(){
    this.init()
    //window.addEventListener('resize', this.windowResizeListener)
    document.addEventListener('fullscreenchange', this.handleCheckScreen)
    document.addEventListener('webkitfullscreenchange', this.handleCheckScreen)
    document.addEventListener('mozfullscreenchange', this.handleCheckScreen)
    this.screenHeight = window.screen.height
    this.screenWidth = window.screen.width
  },
  updated(){
    $('.ppt-item').css('height',$('.ppt-item').width()*this.coefficient);
    this.contentScale = $('.ppt-item').width()/900
    this.changeLayersSize()
    if($('.editor-content')[0]){
      $('.editor-content').css('transform',`scale(${this.contentScale})`)
    }
    if($('.title-wrap')[0]){
      $('.title-wrap').css('font-size',this.contentScale*24*0.9+'px')
    }
    window.onresize = ()=>{
      $('.ppt-item').css('height',$('.ppt-item').width()*this.coefficient);
      this.contentScale = $('.ppt-item').width()/900
      this.$nextTick(()=>{
        if($('#content')[0]){
          $('#content').css('transform',`scale(${this.contentScale})`)
        }
        this.changeLayersSize()
        if($('.editor-content')[0]){
          $('.editor-content').css('transform',`scale(${this.contentScale})`)
        }
        if($('.title-wrap')[0]){
          $('.title-wrap').css('font-size',this.contentScale*24*0.9+'px')
        }
      })
    }
  },
  destroyed() {
    //window.removeEventListener('resize', this.windowResizeListener)
    document.removeEventListener('fullscreenchange',this.handleCheckScreen)
    document.removeEventListener('webkitfullscreenchange',this.handleCheckScreen)
    document.removeEventListener('mozfullscreenchange',this.handleCheckScreen)
    window.onresize=null
  }
};
</script>

<style lang="scss">
@import './css/common.scss';
@import './css/format.scss';

.ppt-wrap{
  .pptbg{
    width:100%;
  }
}
.present-page-wrap{
  .fullscreen{
    position: relative;
    .hint{
      position: fixed;
      top:20px;
      left:50%;
      margin-left:-154px;
      width:308px;
      height: 52px;
      background-color:#FFF2E2;
      border-radius: 4px;
      color: #FDB863;
      justify-content: start;
      .hint-icon-wrap{
        width: 20px;
        height: 20px;
        background-color:#FFF2E2;
        margin: 0 10px 0 20px;
        img{
          width: 100%;
        }
      }
    }
    .image-move{
        width:15px;
        height: 100%;
        cursor: ew-resize;
        position: absolute;
        left: 515px;
        &:hover{
          background: rgba(0, 0, 0, 0.5);
        }
      }
  }
}

</style>
<style scoped lang="scss">
$titleHeight:7%;
$titleColor:#333333;
.present-page-wrap{
  background-color: #F5F7F9;
  display: flex;
  .index-list{
    min-width:360px;
    width: 410px;
    height:100vh;
    background-color: #fff;
    margin-right: 30px;
    padding:10px;
    overflow-y: scroll;
    &::-webkit-scrollbar-track{
        display: none;
    }
    .line{
      width:100%;
      height:1px;
      background-color:#EBEBEB ;
    }
  }
  .show-wrap{
    flex: 1;
    background-color: #fff;
    padding:30px 50px;
    height: 100vh;
    overflow-y: scroll;
    min-width: 876px;
    &::-webkit-scrollbar-track{
        display: none;
    }
    .other{
      margin-top: 15px;
      height: 100px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .page-info,.btn-list{
        display: flex;
        align-items: center;
      }
      .page-info{
        justify-content: flex-start;
      }
      .btn-list{
        justify-content: flex-end;
      }
    } 
  }
  .ppt-screen{
    width:100%;
    height:100%;
    background-color: black;
    display: flex;
    justify-content: center;
    &.live{
      background-color: #D9D9D9;
      justify-content: flex-end;
      .ppt-wrap{
        /* overflow: visible !important;; */
        .ppt-item{
          transform-origin: 0 0;
          /* border: none !important; */
          border: 1px solid transparent;
          &#cover,&#back{
            width: 100% !important;
          }
        }
      }
    }
    .ppt-item{
      user-select: none;
      -webkit-user-select: none;
      &#cover,&#back{
        border: 1px solid transparent !important;
        background-size: 90%;
      }
    }
  }
  .ppt-wrap{
    width: 1100px;
    align-self: center;
    overflow: hidden;
    position: relative;
    .cover{
      position: relative;
    }
    .ppt-item{
      width: 100%;
      height: 100%;
      background: transparent;
      background-size: 100% 100%;
      position:relative;
      border: 4px solid transparent;
      overflow: hidden;
      .title-wrap{
        width: 68%;
        height: $titleHeight;
        position: absolute;
        top: 5.5%;
        left: 10%;
        z-index: 100;
        display: flex;
        font-size: 24px;
        color:$titleColor;
        align-items: center;
        transform-origin: 0 0;
        word-break: break-all;
      }
      &#cover,&#back{
        //background:none;
        width: calc(100% - 8px);
        border: none;
      }
    }
    .page-hint{
      user-select: none;
      position:absolute;
      right:5%;
      bottom: 2%;
      width:7%;
      height:40px;
      background-color: rgba(0, 0, 0,0.4);
      color: #fff;
      font-size: 24px;
      font-weight: bold;
      text-align: center;
      line-height: 40px;
      border-radius: 8px;
    }
  }
}
</style>