
<template>
  <div class="zero-draw-panel-container" >
    <div class="zero-components-container"  >
      <!-- <views-canvas-tree :views="views" ></views-canvas-tree> -->
      <div class="playground-wrapper">
        <runtime-layer ref="runtimeLayer"
                      :design-width="parseInt(options.designWidth)"
                      :design-height="parseInt(options.designHeight)"
                      :assetResolver="url=>assetResolver(url)"
                      @launched="onRuntimeLayerLaunched"
                      @select-node="onSelectNode"
        />
        <!-- <div class="touch-layer"></div> -->
      </div>
       <edit-control-view  :targetNode="targetNode"></edit-control-view>
    </div>
  </div>
</template>

<script>
	import events from "@/global-events.js"
  import viewsCanvasTree from './viewsCanvasTree';
  import { mapState, mapGetters } from 'vuex';
  import RuntimeLayer from "./RuntimeLayer";
  import SInput from "./SInput";
  import EditControlView from './editControlView';


  export default {
    data() {
        return {
          zoom:0.5,
          autoSelectState:true,
          options: {
            designWidth: 750,
            designHeight: 1624,
          },
          nodePath: '',
          targetNode: null,
          props: {
            x: {},
            y: {},
            width: {},
            height: {},
            left: {},
            top: {},
            right: {},
            bottom: {},
            horizonCenter: {},
            mouseChildren: {},
            verticalCenter: {},
            source: {type: 'string'},
          },
        }
      },
    components: { viewsCanvasTree,SInput,
        RuntimeLayer,EditControlView},
    methods: {
      moveEdit(e,type){
        let _type =type;
        //  console.log("_type",_type)
          events.$emit('setMoveEdit', {e,_type});


      },
      //重置编辑视图数据为实际视图数据
			resetScrollType(data) {
				if(data.type=="editScrollList"){
					data.type="scrollList"
				}
				if(data.type=="editScrollView"){
					data.type="scrollView"
				}
				if(data.children){
          for(let i=0;i<data.children.length;i++){
            this.resetScrollType(data.children[i])
          }
				}
			},
      onRuntimeLayerLaunched() {
         // events.$emit("viewReset")
      },
      onSelectNode(nodePath) {
        if (!nodePath) {
          return;
        }
        this.nodePath = nodePath;
      },
      assetResolver(uuid) {
        let asset = this.project.data.assets.find(a => a.uuid === uuid);
        let url = asset ? asset.url : '';
        return url
      },
      getNode(type) {
        if(!this.$refs.runtimeLayer){
          return;
        }
        if(type=="end"){
         // this.targetNode = this.$refs.runtimeLayer.getNode(this.nodePath);
          //console.log("this.targetNode",this.targetNode)
         setTimeout(()=>{
           this.targetNode = this.$refs.runtimeLayer.getNode(this.nodePath);
           events.$emit('locate-view-node-active', this.targetNode);
          },0)
        }else if(type=="update"){
            this.targetNode = this.$refs.runtimeLayer.getNode(this.nodePath);
        }
      },
      onModifyProp(key,value,type) {
            //console.log("修改 key v")
            if(key=="source"||key=="autoPlay"){
               events.$emit("viewReset")
            }
            // if(key=="width"||key=="height"){
            //   console.error("修改长宽")
            // }
            if(this.$refs.runtimeLayer){
              this.$refs.runtimeLayer.modifyProps(this.nodePath, {
                [key]: value,
              }, () => {
                this.getNode(type);
              })        
            }      
      },
      onClickTouchLayer(e){
        const {x,y} = e;
        console.log(e)
        if(!this.autoSelectState){
          return false;
        }
  
        //  setTimeout(()=>{
            if(this.$refs.runtimeLayer){
              this.nodePath = this.$refs.runtimeLayer.getNodePathWithPos({x:x/this.zoom, y:y/this.zoom});
            }
      //   },100)
        console.log(this.nodePath)
      },
      canvasKeyVupdate(data,type){
          let _data=data;
          for(let item in _data.props){
            if(_data.props.hasOwnProperty(item)){
                this.onModifyProp(item, _data.props[item],type)
            }
          }
      },
      canvasViewUpdate(){
          this.$refs.runtimeLayer&&this.$refs.runtimeLayer.showView(this.views[0]);
      }
      ,canvasActiveNodeByTree(nodePath){
        this.nodePath=nodePath
        this.getNode("end")
      }
    },
    computed: {
      ...mapGetters(['views']), 
      ...mapState(['project']),
      ...mapGetters(['activeComponent', 'activeComponentCopy', 'componentList', 'activeComponentId']),
      //
    },
    created(){
      events.$on("setPlaygroundZoom", data => {
        this.zoom=data.zoom;
      });

      //视图点击定位
      events.$on("onClickTouchLayer",this.onClickTouchLayer);
      //视图keyv更新
      events.$on('canvasKeyVupdate', this.canvasKeyVupdate);
      //视图更新
      events.$on('canvasViewUpdate', this.canvasViewUpdate);
      events.$on('canvasActiveNodeByTree', this.canvasActiveNodeByTree);
      //是否自动点选
      events.$on('autoSelectState', (data)=>{
        this.autoSelectState=data
      });

      events.$on('designHeight', (data)=>{
         this.options.designHeight=data
      });

       //是否自动点选
      events.$on('designWidth', (data)=>{
         this.options.designWidth=data
      });



      events.$on("viewReset",()=>{
         this.$refs.runtimeLayer&&this.$refs.runtimeLayer.showView(this.views[0]);
      })
    },
    watch: {
        nodePath() {
          this.getNode("end");
        },
        views() {
            events.$emit("viewReset")        
            }
      },
  };
</script>

<style lang="scss">
.db-draggable {
  position: absolute;
  box-sizing: border-box;
  &.active {
    border: 1px dashed black;
  }
}
.handle {
  box-sizing: border-box;
  display: none;
  position: absolute;
  width: 10px;
  height: 10px;
  font-size: 1px;
  background: #eee;
  border: 1px solid #333;
}
.handle-tl {
  top: -10px;
  left: -10px;
  cursor: nw-resize;
}
.handle-tm {
  top: -10px;
  left: 50%;
  margin-left: -5px;
  cursor: n-resize;
}
.handle-tr {
  top: -10px;
  right: -10px;
  cursor: ne-resize;
}
.handle-ml {
  top: 50%;
  margin-top: -5px;
  left: -10px;
  cursor: w-resize;
}
.handle-mr {
  top: 50%;
  margin-top: -5px;
  right: -10px;
  cursor: e-resize;
}
.handle-bl {
  bottom: -10px;
  left: -10px;
  cursor: sw-resize;
}
.handle-bm {
  bottom: -10px;
  left: 50%;
  margin-left: -5px;
  cursor: s-resize;
}
.handle-br {
  bottom: -10px;
  right: -10px;
  cursor: se-resize;
}
</style>

<style lang="scss">
	.playground-wrapper {
		position: relative;
		display: inline-block;
	}

</style>
