/**
 * PPT5.0 图层编辑
 */
import _ from "lodash";
import {layerElments,BaseRectShape,BaseLineShape,BaseTextShape,BaseCircleShape} from "../newVersion/utils/config";
import {createRandomCode,caclShapePercentage,getContextMenuPos} from "../newVersion/utils/untils";
export default {
  data() {
    return {
      isEditLayer:false,//是否是图层编辑模式
      activeNames:['el','line','shape','text'],//激活的collapse
      layerElArr:layerElments,
      activeLayerEl:{},//当前选中的图层元素
      BaseLineShape:_.cloneDeep(BaseLineShape),
      BaseRectShape:_.cloneDeep(BaseRectShape),
      BaseTextShape:_.cloneDeep(BaseTextShape),
      BaseCircleShape:_.cloneDeep(BaseCircleShape),
      copyShape:{}
    }
  },
  methods:{
    //改变编辑模式
    handleChangeEditModal(){
      //判断当前ppt是否添加了页面
      if(this.pageList.length===0){
        this.$message.warning('请至少添加一页!')
        return
      }
      this.isEditLayer = !this.isEditLayer
      if(!this.isEditLayer){
        this.activeLayerEl = {}
      }
      if(this.isEditLayer){
        //如果当前活跃图层没有layers,加上
        if(!this.currentItem.layers){
          this.refleshLayerEl([])
        }
      }
    },
    //添加一个图层元素
    addLayerEl(shape,options={}){
      let layerEls = this.currentItem.layers?_.cloneDeep(this.currentItem.layers):[]
      //根据shape.type判断是哪一种元素
      if(shape.type==='shape'){
        this.activeLayerEl = _.cloneDeep(this[`Base${shape.shapeType}Shape`])
      }else if(shape.type==='line'){
        this.activeLayerEl = _.cloneDeep(BaseLineShape)
        if(shape.points){
          //如果选择的是箭头的话
          this.activeLayerEl.points = ['arrow','']
        }
      }else if (shape.type==='text'){
        this.activeLayerEl = _.cloneDeep(BaseTextShape)
      }
      //计算图层元素的百分比化的单位:基于.total-wrap而不是基于ppt-item
      const width = $('.total-wrap').width(),height = $('.total-wrap').height()
      const percentageShape = caclShapePercentage({layerWidth:width,layerHeight:height},this.activeLayerEl)
      this.activeLayerEl = {...this.activeLayerEl,...percentageShape,...options}
      this.activeLayerEl.id = createRandomCode()
      layerEls.push(this.activeLayerEl)
      this.refleshLayerEl(layerEls)
    },
    //改变当前选中的图层元素
    changeActLayerEl(shape){
      this.activeLayerEl = shape
    },
    //删除一个图层元素
    deleteLayerEl(shape){
      //console.log('最外层了')
      const {layers} = this.currentItem
      const layerEls = layers.filter(
        (i)=> i.id!==shape.id
      )
      if(shape.id===this.activeLayerEl.id){
        this.changeActLayerEl({})
      }
      this.refleshLayerEl(layerEls)
    },
    //获取复制的元素
    getCopyItem(shape){
        this.copyShape = shape
        //复制之后直接粘贴
        this.pasteLayerEl('copy')
    },
    //粘贴元素
    pasteLayerEl(type='contextMenu'){
        const {width,height,left,top} = this.copyShape
        const layer = {
            width:$('.layers').width(),
            height:$('.layers').height()
        }
        //如果是copy直接粘贴,则自定义points的位置
        const points = type==='contextMenu'?getContextMenuPos(`layers_${this.currentItem.id}`):{clientX:left+10,clientY:top+10}
        const {clientX,clientY} = points
        //type==='copy'的补值
        const supplyValue = type==='contextMenu'?0:10

        //防止元素渲染出边界
        const new_left = ((clientX+width) - layer.width)>0?(layer.width - width - supplyValue):clientX
        const new_top =  ((clientY+height) - layer.height)>0?(layer.height - height - supplyValue):clientY
        const options = {...this.copyShape,...{
            left:new_left,
            top:new_top,
            width,
            height,
            realWidth:width,
            realHeight:height
        }}
        this.addLayerEl(this.copyShape,options)
        //隐藏layer-menu
        $("#menu").hide()
    },
    //更新ppt页图层元素
    refleshLayerEl(layerEls){
      this.currentItem.layers = layerEls;
      this.$set(this.pageList,this.currentIndex,this.currentItem)
      this.isEditLayer = false
      this.$nextTick(()=>{
        this.isEditLayer = true
        this.changeActLayerEl(this.activeLayerEl)
      })
      /* this.pageList[this.currentIndex] = this.currentItem;
      this.pageList[this.currentIndex].key++;
      this.initPageElements(this.pageList[this.currentIndex])
      this.initPreviewPageEl() */
    }
  }
}