
(function(KDApi,$,_){ 
    function MyComponent(model){
        this._setModel(model);
    }

    var isUpdate = false;
    MyComponent.prototype = {
        _setModel: function(model) {
            this.model = model;
        },
        init:function(props){
          console.log('-----init',this.model,props)
          isUpdate = false; 
          setHtml(this.model,props,isUpdate);
        },
        update:function(props){
          console.log('-----update',this.model,props)
          isUpdate = true;  
          setHtml(this.model,props,isUpdate);
        },
        destoryed:function(){
            console.log('-----destoryed',this.model)
        }

    }     
	var setHtml = function(model,props,isUpdate){   
		var data={};   
		var pageId;
		var flexKey;
		var list=[];
		var displayFlag;
		if(props!=null&&props.data!=null){
			var popsData=props.data; 
			pageId=popsData['pageId'];  
			flexKey=popsData['flexKey'];  
			displayFlag=popsData['displayFlag'];  
			list=popsData.list; 
		}  
		
		if(isUpdate&&pageId&&list){
			KDApi.loadFile(['../common/pwyPolyfill.js', './scanImage.min.js'], model, () => {
				var imgCom = React.createElement(ScanImage, {
					id: 0,
					width: $(flexKey).width() ,
					height: $(flexKey).height() ,
					rotateDeg: list[0].rotateDeg,
					areaInfo: list,
					displayFlag: displayFlag,
					visible: true,
					renderInBody: false,
					imgSrc: list[0].url,
					disabledBtns: false
				});
				ReactDOM.render(imgCom, model.dom);
			});
			
		}
    }
	
	KDApi.register('viewinvoice', MyComponent);
})(window.KDApi,jQuery);
