//样式配置
const CHE_STYLE = {
    BorderRadius:"5px",
    AnimSpeed:"all 0.2s linear",
    Background:{
        Default:["#e4e4e4","#d6d6d6"],
        Primary:["#77d3fd","#69b7db"],
        Success:["#43d3af","#3ab697"],
        Info:   ["#474747","#252525"],
        Warning:["#fdc672","#c29551"],
        Danger: ["#fd7272","#cf5a5a"],
        Cherry: ["#fa6daa","#fa4895"],
        Disabled:["#f1f1f1","#f1f1f1"],
        Link:["#57b7ec","#295e7b"]
    },
    Color:{
        Default:"#757575",
        Primary:"#4e86a0",
        Success:"#25886f",
        Info:   "#bdbdbd",
        Warning:"#705834",
        Danger: "#7e3737",
        Cherry: "#631c3b",
        Disabled:"#c7c7c7",
        Link:"#57b7ec"
    },
    size:{
        Mini:{
            Padding:"4px 12px",
            FontSize:"12px"
        },
        Default:{
            Padding:"6px 15px",
            FontSize:"14px"
        },
        Big:{
            Padding:"8px 17px",
            FontSize:"17px"
        },
    }
};
//所有添加了idname 的控件类
/*
*  {
*    key:控件
*  }
* */
let ALLWIDGET = {};
//所有添加了groupname的控件类
/*
*  {
*    key:[控件，控件，控件]
*  }
* */
let ALLWIDGETLIST = {};
//是否添加了<style> 可以多次运行CherryUIRun
let ISSTYLE = false;
//控件插入的父节点的ID，为了js控件做准备
let NODECHILD = "";

function $GET(name){
    let code = name.substr(0,1);
    let id = name.substr(1,name.length);
    switch(code){
        case "#":
            return ALLWIDGET[id];
        case ".":
            return ALLWIDGETLIST[id];        
    }
}

class CherryMain{
    constructor(style) {
        let cuiStyleText = "<style>" +
            "*{margin: 0;padding: 0;}\n"+
            ".cui_scrollbar{-webkit-overflow-scrolling : touch;}\n" +
            ".cui_scrollbar::-webkit-scrollbar{width:8px;height:8px;}\n" +
            ".cui_scrollbar::-webkit-scrollbar-thumb{background-color: #696969;border-radius:6px;}\n" +
            ".cui_scrollbar::-webkit-scrollbar-track{background-color:#ddd;border-radius:6px;}" +
            " input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance: none !important;}" +
            "</style>";
        let cuiStyle = document.createElement("style");
        cuiStyle.innerHTML = cuiStyleText;
        if(style.hasOwnProperty("app")){
            let dom = document.getElementById(style.app);
            NODECHILD = dom;
            if (ISSTYLE === false) {
                dom.append(cuiStyle);
                ISSTYLE = true;
            }
            if(style.hasOwnProperty("child")){
                for (let i in style.child) {
                    let Data = style.child[i];
                    dom.append(Data);
                }
            }
            if (style.hasOwnProperty("Created")) {
                style.Created();
            }
        }
    }
}

//基础类型处理 基础类
class CHE_Widget    {

    constructor(style) {
        this.style = style;
        this.Dom = null;
        this.ChildDom = null;

    }
    setStyle(){
        this.Dom.style.transition = CHE_STYLE.AnimSpeed;
        if(this.style.hasOwnProperty("name")){
            ALLWIDGET[this.style.name] = this;
        }
        if(this.style.hasOwnProperty("group")){
            if (ALLWIDGETLIST.hasOwnProperty(this.style.group)) {
                ALLWIDGETLIST[this.style.group].push(this);
            } else {
                ALLWIDGETLIST[this.style.group] = [this];
            }
        }
        if(this.style.hasOwnProperty("id")){
            this.Dom.id = this.style.id;
        }
        if(this.style.hasOwnProperty("class")){
            if (typeof this.style.class == "string") {
                this.Dom.className = this.style.class;
            }
            if (typeof this.style.class == "object") {
                for (let i in this.style.class) {
                    this.Dom.className += this.style.class[i] + " ";
                }
            }
        }
        if (this.style.hasOwnProperty("position")) {
            this.Dom.style.position = this.style.position
        }
        if (this.style.hasOwnProperty("height")) {
            if (this.style.height.toString().indexOf("%") != -1) {
                this.Dom.style.height = this.style.height;
            } else {
                this.Dom.style.height = this.style.height + "px";
            }
        }
        if (this.style.hasOwnProperty("width")) {
            if (this.style.width.toString().indexOf("%") != -1) {
                this.Dom.style.width = this.style.width;
            } else {
                this.Dom.style.width = this.style.width + "px";
            }
        }
        if (this.style.hasOwnProperty("backgroundColor")) {
            this.Dom.style.backgroundColor = this.style.backgroundColor;
        }
        // number object
        if (this.style.hasOwnProperty("padding")) {
            if (typeof this.style.padding == "number") {
                this.Dom.style.padding = this.style.padding + "px";
            }
            if (typeof this.style.padding == "string") {
                this.Dom.style.padding = this.style.padding;
            }
            if (typeof this.style.padding == "object") {
                this.Dom.style.paddingTop = this.style.padding[0] + "px";
                this.Dom.style.paddingRight = this.style.padding[1] + "px";
                this.Dom.style.paddingBottom = this.style.padding[2] + "px";
                this.Dom.style.paddingLeft = this.style.padding[3] + "px";
            }
        }
        if (this.style.hasOwnProperty("margin")) {
            if (typeof this.style.margin == "number") {
                this.Dom.style.margin = this.style.margin + "px";
            }
            if (typeof this.style.margin == "string") {
                this.Dom.style.margin = this.style.margin;
            }
            if (typeof this.style.margin == "object") {

                this.Dom.style.marginTop = this.style.margin[0] + "px";
                this.Dom.style.marginRight = this.style.margin[1] + "px";
                this.Dom.style.marginBottom = this.style.margin[2] + "px";
                this.Dom.style.marginLeft = this.style.margin[3] + "px";
            }
        }
        if (this.style.hasOwnProperty("child")) {
            for (let i in this.style.child) {
                let Data = this.style.child[i]
                this.ChildDom.append(Data)
            }
        }
        if (this.style.hasOwnProperty("visible")) {
            if (this.style.visible) {
                this.Dom.style.visibility = "visible";
            } else {
                this.Dom.style.visibility = "hidden";
            }
        }
        if (this.style.hasOwnProperty("cookie")) {
            this.Cookie = this.style.cookie
        }
        if (this.style.hasOwnProperty("zindex")) {
            this.Dom.style.zIndex = this.style.zindex;
        }
        if (this.style.hasOwnProperty("opacity")) {
            this.Dom.style.opacity = this.style.opacity;
        }
        if (this.style.hasOwnProperty("display")) {
            this.Dom.style.display = this.style.display;
        }
    }

    setPosition(pos) {
        this.style.position = pos;
        this.Dom.style.position = pos;
    }

    setHeight(height) {
        this.style.height = height;
        if (height.toString().indexOf("%") != -1) {
            this.Dom.style.height = height;
        } else {
            this.Dom.style.height = height + "px";
        }
    }

    getHeight() {
        return {
           DomHeight:this.Dom.style.height,
           StyleHeight:this.style.height
        }
    }

    setWidth(width) {
        this.style.width = width;
        if (width.toString().indexOf("%") != -1) {
            this.Dom.style.width = width;
        } else {
            this.Dom.style.width = width + "px";
        }
    }

    getWidth() {
        return {
            DomWidth:this.Dom.style.width,
            StyleWidth:this.style.width
        }
    }

    setPadding(padding) {
        this.style.padding = padding;
        if (typeof padding == "number") {
            this.Dom.style.padding = padding + "px";
        }
        if (typeof padding == "string") {
            this.Dom.style.padding = padding;
        }
        if (typeof padding == "object") {
            this.Dom.style.paddingTop = padding[0] + "px";
            this.Dom.style.paddingRight = padding[1] + "px";
            this.Dom.style.paddingBottom = padding[2] + "px";
            this.Dom.style.paddingLeft = padding[3] + "px";
        }

    }

    getPadding() {
        return {
            DomPadding:{
                Top: this.Dom.style.paddingTop,
                Right: this.Dom.style.paddingRight,
                Bottom: this.Dom.style.paddingBottom,
                Left: this.Dom.style.paddingLeft
            },
            StylePadding:this.style.padding
        };
    }

    setMargin(margin) {
        this.style.margin = margin;
        if (typeof margin == "number") {
            this.Dom.style.margin = margin + "px";
        }
        if (typeof margin == "string") {
            this.Dom.style.margin = margin;
        }
        if (typeof margin == "object") {
            this.Dom.style.marginTop = margin[0] + "px";
            this.Dom.style.marginRight = margin[1] + "px";
            this.Dom.style.marginBottom = margin[2] + "px";
            this.Dom.style.marginLeft = margin[3] + "px";
        }
    }

    getMargin() {
        return {
            DomMargin:{
                Top: this.Dom.style.marginTop,
                Right: this.Dom.style.marginRight,
                Bottom: this.Dom.style.marginBottom,
                Left: this.Dom.style.marginLeft,
            },
            StyleMargin:this.style.margin

        };
    }

    setBackgroundColor(color) {
        this.style.backgroundColor = color;
        this.Dom.style.backgroundColor = color;
    }

    getBackgroundColor() {
        return {
            DomBackgroundColor:this.Dom.style.backgroundColor,
            StyleBackgroundColor:this.style.backgroundColor,
        };
    }

    setCookie(Cookie) {
        this.Cookie = Cookie;
    }

    getCookie() {
        return this.Cookie;
    }

    removeMe() {
        if(this.style.hasOwnProperty("name")){
            delete ALLWIDGET[this.style.name];
        }
        if(this.style.hasOwnProperty("group")){
            if(ALLWIDGETLIST.hasOwnProperty(this.style.group)){
                for(let i in ALLWIDGETLIST[this.style.group]){
                    if(this === ALLWIDGETLIST[this.style.group][i]){
                        ALLWIDGETLIST[this.style.group].splice(i,1);
                        break;
                    }
                }
                if(ALLWIDGETLIST[this.style.group].length === 0){
                    delete ALLWIDGETLIST[this.style.group];
                }
            }
        }


        this.Dom.remove();
    }

    removeChild() {
        this.Dom.innerHTML = "";
    }

    addChildList(list) {
        for (let i in list) {
            let Data = list[i];
            this.ChildDom.append(Data);
        }
    }

    setVisible(vis) {
        this.style.visible = vis;
        if (vis) {
            this.Dom.style.visibility = "visible";
        } else {
            let dom = this.Dom
            let display = this.Dom.style.display
            if (display == null) {
                display = "block"
            }
            this.Dom.style.display = "none"
            setTimeout(function () {
                dom.style.visibility = "hidden";
                dom.style.display = display;
            }, 200)

        }
    }

    setZindex(zindex) {
        this.style.zindex = zindex;
        this.Dom.style.zIndex = zindex;
    }

    setOpacity(opacity) {
        this.style.opacity = opacity;
        this.Dom.style.opacity = opacity;
    }

    setDisplay(display) {
        this.style.display = display;
        this.Dom.style.display = display;
    }
    getDisplay(){
        return this.style.display;
    }
}

class CHE_Container extends CHE_Widget {
    constructor(style) {
        super(style);
        this.Dom = document.createElement("div");
        this.ChildDom = this.Dom;
        this.setStyle();
        return this.Dom;
    }

    setStyle() {
        super.setStyle();
        let self = this;
        this.isboxShadow = false;
        this.isboxShadowHover = false;
        this.ismousego = false;
        this.ismouseout = false;
        this.isclick = false;
        if (this.style.hasOwnProperty("rotate")) {
            this.Dom.style.transform = "rotate(" + this.style.rotate + "deg)";
        }
        if (this.style.hasOwnProperty("box")) {
            let border = this.style.box;
            if (border.hasOwnProperty("borderRadius")) {
                this.Dom.style.borderRadius = border.borderRadius + "px";
            }
            if (border.hasOwnProperty("borderWidth")) {
                this.Dom.style.borderWidth = border.borderWidth + "px";
            }
            if (border.hasOwnProperty("borderStyle")) {
                this.Dom.style.borderStyle = border.borderStyle;
            }
            if (border.hasOwnProperty("borderColor")) {
                this.Dom.style.borderColor = border.borderColor;
            }
            if (border.hasOwnProperty("boxShadow")) {
                this.isboxShadow = true;
                this.Dom.style.boxShadow = border.boxShadow;
            }
            if (border.hasOwnProperty("boxShadowHover")) {
                this.isboxShadowHover = true;
            }
        }
        if (this.style.hasOwnProperty("methods")) {
            let methods = this.style.methods;
            if (methods.hasOwnProperty("mousego")) {
                this.ismousego = true;
            }
            if (methods.hasOwnProperty("mouseout")) {
                this.ismouseout = true;
            }
            if (methods.hasOwnProperty("click")) {
                this.isclick = true;
            }
            if (methods.hasOwnProperty("mousedown")) {
                this.Dom.onmousedown = function (e) {
                    methods.mousedown(e, self)
                };
            }
            if (methods.hasOwnProperty("mouseup")) {
                this.Dom.onmouseup = function (e) {
                    methods.mouseup(e, self)
                };
            }
        }
        if (this.ismousego || this.ismouseout || this.isboxShadowHover) {
            this.Dom.onmouseenter = function (e) {
                if (self.isboxShadowHover) {
                    self.Dom.style.boxShadow = self.style.box.boxShadowHover;
                }
                if (self.ismousego) {
                    self.style.methods.mousego(e, self);
                }

            }
            this.Dom.onmouseout = function (e) {

                if (self.isboxShadow) {
                    self.Dom.style.boxShadow = self.style.box.boxShadow;
                } else {
                    self.Dom.style.boxShadow = "none";
                }
                if (self.ismouseout) {
                    self.style.methods.mouseout(e, self);
                }
            }
        }
        if (this.isclick) {
            this.Dom.onclick = function (e) {
                self.style.methods.click(e, self)
            };
        }


    }

    setBox(box) {
        let self = this;

        if (box.hasOwnProperty("borderRadius")) {
            this.Dom.style.borderRadius = box.borderRadius + "px";
            this.style.box.borderRadius = box.borderRadius;
        }
        if (box.hasOwnProperty("borderWidth")) {
            this.Dom.style.borderWidth = box.borderWidth + "px";
            this.style.box.borderWidth = box.borderWidth;
        }
        if (box.hasOwnProperty("borderStyle")) {
            this.Dom.style.borderStyle = box.borderStyle;
            this.style.box.borderStyle = box.borderStyle;
        }
        if (box.hasOwnProperty("borderColor")) {
            this.Dom.style.borderColor = box.borderColor;
            this.style.box.borderColor = box.borderColor;
        }
        if (box.hasOwnProperty("boxShadow")) {
            this.isboxShadow = true;
            this.Dom.style.boxShadow = box.boxShadow;
            this.style.box.boxShadow = box.boxShadow;
        }
        if (box.hasOwnProperty("boxShadowHover")) {
            this.style.box.boxShadowHover = box.boxShadowHover;
            this.Dom.onmouseenter = function () {
                self.Dom.style.boxShadow = box.boxShadowHover;
                if (self.ismousego) {
                    self.style.methods.mousego();
                }
            }
            this.Dom.onmouseout = function () {
                if (self.isboxShadow) {
                    self.Dom.style.boxShadow = self.styles.box.boxShadow;
                } else {
                    self.Dom.style.boxShadow = "none";
                }
                if (self.ismouseout) {
                    self.style.methods.mouseout();
                }
            }
        }
    }

    getBox() {
        return this.style.box;
    }

    setRotate(rotate) {
        this.Dom.style.transform = "rotate(" + rotate + "deg)";
    }
}

class CHE_Scrollbox extends CHE_Container {
    constructor(style) {
        super(style);

    }

    setStyle() {
        super.setStyle();
        this.Dom.className += " cui_scrollbar "
        this.Dom.style.overflow = "auto";
        if (this.style.hasOwnProperty("overflowH")) {
            if (this.style.overflowH) {
                this.Dom.style.overflowX = "auto"
            } else {
                this.Dom.style.overflowX = "hidden"
            }
        }
        if (this.style.hasOwnProperty("overflowV")) {
            if (this.style.overflowV) {
                this.Dom.style.overflowY = "auto"
            } else {
                this.Dom.style.overflowY = "hidden"
            }
        }
    }

    setOverflowH(over) {
        if (over) {
            this.Dom.style.overflowX = "auto"
        } else {
            this.Dom.style.overflowX = "hidden"
        }
    }

    setOverflowV(over) {
        if (over) {
            this.Dom.style.overflowY = "auto"
        } else {
            this.Dom.style.overflowY = "hidden"
        }
    }
}

class CHE_Flexlayout extends CHE_Widget {
    constructor(style) {
        super(style);
        this.Dom = document.createElement("div");
        this.ChildDom = this.Dom;
        this.setStyle();
        return this.Dom;
    }

    setStyle() {
        super.setStyle();
        let self = this;
        this.Dom.style.display = "flex"
        let styles = this.style;

        if (styles.hasOwnProperty("rotate")) {
            this.Dom.style.transform = "rotate(" + styles.rotate + "deg)";
        }
        if (styles.hasOwnProperty("type")) {
            if (styles.type == "V") {
                this.Dom.style.flexDirection = "column";
            }
            if (styles.type == "H") {
                this.Dom.style.flexDirection = "row";
            }
        }
        if (styles.hasOwnProperty("wrap")) {
            if (styles.wrap) {
                this.Dom.style.flexWrap = "wrap";
            } else {
                this.Dom.style.flexWrap = "nowrap";
            }

        }

    }

    setType(type) {
        this.style = type;
        if (type == "V") {
            this.Dom.style.flexDirection = "column";
        }
        if (type == "H") {
            this.Dom.style.flexDirection = "row";
        }
    }

    setWrap(wrap) {
        this.style.wrap = wrap;
        if (wrap) {
            this.Dom.style.flexWrap = "wrap";
        } else {
            this.Dom.style.flexWrap = "nowrap";
        }

    }

    setRotate(rotate) {
        this.Dom.style.transform = "rotate(" + rotate + "deg)";
    }
}

class CHE_FlexlayoutItem extends CHE_Widget {
    constructor(style) {
        super(style);
        this.Dom = document.createElement("div");
        this.ChildDom = this.Dom;
        this.setStyle();
        return this.Dom;
    }

    setStyle() {
        super.setStyle();
        let self = this;
        if (this.style.hasOwnProperty("flex")) {
            this.Dom.style.flex = this.style.flex;
        }
    }

    setFlex(flex) {
        this.Dom.style.flex = flex;
    }
}

class CHE_Staticlayout extends CHE_Widget {
    constructor(style) {
        super(style);
        this.Dom = document.createElement("div");
        this.ChildDom = this.Dom;
        this.setStyle();
        return this.Dom;
    }

    setStyle() {
        super.setStyle();
        let self = this;
        let styles = this.style;
        if (styles.hasOwnProperty("xy")) {
            let xy = styles.xy
            if (xy.hasOwnProperty("left")) {
                if (typeof xy.left == "number") {
                    this.Dom.style.left = xy.left + "px";
                }
                if (typeof xy.left == "string") {
                    this.Dom.style.left = xy.left;
                }
            }
            if (xy.hasOwnProperty("top")) {
                if (typeof xy.top == "number") {
                    this.Dom.style.top = xy.top + "px";
                }
                if (typeof xy.top == "string") {
                    this.Dom.style.top = xy.top;
                }
            }
            if (xy.hasOwnProperty("right")) {
                if (typeof xy.right == "number") {
                    this.Dom.style.right = xy.right + "px";
                }
                if (typeof xy.right == "string") {
                    this.Dom.style.right = xy.right;
                }
            }
            if (xy.hasOwnProperty("bottom")) {
                if (typeof xy.bottom == "number") {
                    this.Dom.style.bottom = xy.bottom + "px";
                }
                if (typeof xy.bottom == "string") {
                    this.Dom.style.bottom = xy.bottom;
                }
            }
        }
        if (styles.hasOwnProperty("rotate")) {
            this.Dom.style.transform = "rotate(" + styles.rotate + "deg)";
        }
        if (styles.hasOwnProperty("methods")) {
            let methods = styles.methods;

            if (methods.hasOwnProperty("mousego")) {
                this.Dom.onmouseenter = function (e) {
                    methods.mousego(e, self)
                };
            }
            if (methods.hasOwnProperty("mouseout")) {
                this.Dom.onmouseout = function (e) {
                    methods.mouseout(e, self)
                };
            }
            if (methods.hasOwnProperty("click")) {
                this.Dom.onclick = function (e) {
                    methods.click(e, self)
                };
            }
            if (methods.hasOwnProperty("mousedown")) {
                this.Dom.onmousedown = function (e) {
                    methods.mousedown(e, self)
                };
            }
            if (methods.hasOwnProperty("mouseup")) {
                this.Dom.onmouseup = function (e) {
                    methods.mouseup(e, self)
                };
            }
        }
    }

    setXY(xy) {
        this.style.xy = xy;
        if (xy.hasOwnProperty("left")) {
            if (typeof xy.left == "number") {
                this.Dom.style.left = xy.left + "px";
            }
            if (typeof xy.left == "string") {
                this.Dom.style.left = xy.left;
            }
        }
        if (xy.hasOwnProperty("top")) {
            if (typeof xy.top == "number") {
                this.Dom.style.top = xy.top + "px";
            }
            if (typeof xy.top == "string") {
                this.Dom.style.top = xy.top;
            }
        }
        if (xy.hasOwnProperty("right")) {
            if (typeof xy.right == "number") {
                this.Dom.style.right = xy.right + "px";
            }
            if (typeof xy.right == "string") {
                this.Dom.style.right = xy.right;
            }
        }
        if (xy.hasOwnProperty("bottom")) {
            if (typeof xy.bottom == "number") {
                this.Dom.style.bottom = xy.bottom + "px";
            }
            if (typeof xy.bottom == "string") {
                this.Dom.style.bottom = xy.bottom;
            }
        }
    }
    setRotate(rotate) {
        this.Dom.style.transform = "rotate(" + rotate + "deg)";
    }
}

class CHE_Button extends CHE_Widget{
    constructor(style) {
        super(style);
        this.Dom = document.createElement("button");
        this.ChildDom = this.Dom;
        this.setStyle();
        return this.Dom;

    }
    setStyle() {
        super.setStyle();
        let self = this;
        this.Dom.style.border = "0";

        if(this.style.hasOwnProperty("outline")){
            if(this.style.outline){}else{
                this.Dom.style.outline = "none";
            }
        }else{
            this.Dom.style.outline = "none";
        }
        if(this.style.hasOwnProperty("text")){
            this.ChildDom.innerHTML = this.style.text;
        }
        let ButtonType = this.style.type;
        let SizeType = this.style.size;
        if(!this.style.hasOwnProperty("type")){ButtonType = "Default";}
        if(!this.style.hasOwnProperty("size")){SizeType = "Default";}

        if(this.style.type === "Link"){
            this.Dom.style.background = "none";
            this.Dom.style.textDecoration = "underline";
            this.Dom.style.color = CHE_STYLE.Color.Link;
            this.Dom.style.cursor = "pointer";
        }else
            {
            this.Dom.style.cursor = "pointer";

            this.Dom.style.background = 'linear-gradient('+CHE_STYLE.Background[ButtonType][0]+','+CHE_STYLE.Background[ButtonType][1]+')';
            this.Dom.style.color = CHE_STYLE.Color[ButtonType];
            this.Dom.style.padding = CHE_STYLE.size[SizeType]["Padding"];
            this.Dom.style.fontSize = CHE_STYLE.size[SizeType]["FontSize"];
            this.Dom.style.borderRadius = CHE_STYLE.BorderRadius;
        }
        if(this.style.type === "Disabled"){
            this.Dom.style.cursor = "wait";
            return false;
        }
        if(this.style.hasOwnProperty("methods")){
            let method = this.style.methods;
            this.Dom.onmousedown = function (e){
                if(ButtonType === "Link"){
                    self.Dom.style.color = CHE_STYLE.Background[ButtonType][1];
                }else{
                    self.Dom.style.background = 'linear-gradient('+CHE_STYLE.Background[ButtonType][1]+','+CHE_STYLE.Background[ButtonType][0]+')';
                }

                if(method.hasOwnProperty("mousedown")){
                    method.mousedown(e,self);
                }
            }
            this.Dom.onmouseup = function (e){
                if(ButtonType === "Link"){
                    self.Dom.style.color = CHE_STYLE.Background[ButtonType][0];
                }else{
                    self.Dom.style.background = 'linear-gradient('+CHE_STYLE.Background[ButtonType][0]+','+CHE_STYLE.Background[ButtonType][1]+')';
                }
                if(method.hasOwnProperty("mouseup")){
                    method.mouseup(e,self);
                }
            }
            if(method.hasOwnProperty("mousego")){
                this.Dom.onmouseenter = function (e){
                    method.mousego(e,self);
                }
            }

            this.Dom.onmouseout = function (e){
                    if(ButtonType === "Link"){
                        self.Dom.style.color = CHE_STYLE.Background[ButtonType][0];
                    }else{
                        self.Dom.style.background = 'linear-gradient('+CHE_STYLE.Background[ButtonType][0]+','+CHE_STYLE.Background[ButtonType][1]+')';
                    }

                    if(method.hasOwnProperty("mouseout")){
                        method.mouseout(e,self);
                    }

                }
            if(method.hasOwnProperty("click")){
                this.Dom.onclick = function (e){
                    method.click(e,self);
                }
            }
        }else{
            this.Dom.onmousedown = function (e){
                if(ButtonType === "Link"){
                    self.Dom.style.color = CHE_STYLE.Background[ButtonType][1];
                }else{
                    self.Dom.style.background = 'linear-gradient('+CHE_STYLE.Background[ButtonType][1]+','+CHE_STYLE.Background[ButtonType][0]+')';
                }

            }
            this.Dom.onmouseup = function (e){
                if(ButtonType === "Link"){
                    self.Dom.style.color = CHE_STYLE.Background[ButtonType][0];
                }else{
                    self.Dom.style.background = 'linear-gradient('+CHE_STYLE.Background[ButtonType][0]+','+CHE_STYLE.Background[ButtonType][1]+')';
                }
            }
            this.Dom.onmouseout = function (e){
                if(ButtonType === "Link"){
                    self.Dom.style.color = CHE_STYLE.Background[ButtonType][0];
                }else{
                    self.Dom.style.background = 'linear-gradient('+CHE_STYLE.Background[ButtonType][0]+','+CHE_STYLE.Background[ButtonType][1]+')';
                }

            }
        }


    }


}

class CHE_Text extends CHE_Widget {
    constructor(style) {
        super(style);
        this.Dom = document.createElement("div");
        this.Dom.style.display = "flex";
        this.Dom.style.flexDirection = "column";

        this.topContainer = document.createElement("div");
        this.centerContainer = document.createElement("div");
        this.bottomContainer = document.createElement("div");

        this.Dom.append(this.topContainer);
        this.Dom.append(this.centerContainer);
        this.Dom.append(this.bottomContainer);


        let textalign = "left";
        if (style.hasOwnProperty("textAlign")) {
            textalign = style.textAlign;
        }
        this.textDiv = document.createElement("div");
        if (style.hasOwnProperty("text")) {
            this.textDiv.innerText = style.text;
        }

        this.textDiv.style.textAlign = textalign;

        this.textDiv.style.wordBreak = "break-all";

        if (style.hasOwnProperty("ellipsis")) {
            if (style.ellipsis) {
                this.textDiv.style.overflow = "hidden";
                this.textDiv.style.textOverflow = "ellipsis";
                this.textDiv.style.whiteSpace = "nowrap";
            }
        }
        this.centerContainer.append(this.textDiv);
        this.ChildDom = this.textDiv;
        if (style.hasOwnProperty("colorStyle")) {
            let font = style.colorStyle;
            if (font.hasOwnProperty("size")) {
                this.textDiv.style.fontSize = font.size + "px";
            }
            if (font.hasOwnProperty("bold")) {
                if (font.bold) {
                    this.textDiv.style.fontWeight = "bold";
                } else {
                    this.textDiv.style.fontWeight = "normal";
                }
            }
            if (font.hasOwnProperty("italic")) {
                if (font.italic) {
                    this.textDiv.style.fontStyle = "italic";
                } else {
                    this.textDiv.style.fontStyle = "normal";
                }
            }
            if (font.hasOwnProperty("disabled")) {
                if (font.disabled) {
                    this.textDiv.style.textDecoration = "line-through";
                } else {
                    this.textDiv.style.textDecoration = "none";
                }
            }
            if (font.hasOwnProperty("color")) {
                this.textDiv.style.color = font.color;
            }
        }
        if (style.hasOwnProperty("lineAlign")) {
            if (style.lineAlign == "top") {
                this.topContainer.style.flex = "0";
                this.bottomContainer.style.flex = "1";
            }
            if (style.lineAlign == "center") {
                this.topContainer.style.flex = "1";
                this.bottomContainer.style.flex = "1";
            }
            if (style.lineAlign == "bottom") {
                this.topContainer.style.flex = "1";
                this.bottomContainer.style.flex = "0";
            }
        }


        this.setStyle();
        return this.Dom;
    }

    setStyle() {
        super.setStyle();
    }

    setText(text) {
        this.style.text = text;
        this.textDiv.innerText = text;
    }

    getText() {
        return {
            StyleText:this.style.text,
            DomText:this.textDiv.innerText,
            DomHtml:this.textDiv.innerHTML
        };
    }

    setTextalign(talign) {
        this.textDiv.style.textAlign = talign;
    }

    setLinealign(lalign) {
        switch (lalign) {
            case "top":
                this.topContainer.style.flex = "0";
                this.bottomContainer.style.flex = "1";
                break;
            case "center":
                this.topContainer.style.flex = "1";
                this.bottomContainer.style.flex = "1";
                break;
            case "bottom":
                this.topContainer.style.flex = "1";
                this.bottomContainer.style.flex = "0";
                break;
        }
    }

    setColorstyle(font) {

        if (font.hasOwnProperty("size")) {
            this.textDiv.style.fontSize = font.size + "px";
        }
        if (font.hasOwnProperty("bold")) {
            if (font.bold) {
                this.textDiv.style.fontWeight = "bold";
            } else {
                this.textDiv.style.fontWeight = "normal";
            }
        }
        if (font.hasOwnProperty("italic")) {
            if (font.italic) {
                this.textDiv.style.fontStyle = "italic";
            } else {
                this.textDiv.style.fontStyle = "normal";
            }
        }
        if (font.hasOwnProperty("disabled")) {
            if (font.disabled) {
                this.textDiv.style.textDecoration = "line-through";
            } else {
                this.textDiv.style.textDecoration = "none";
            }
        }
        if (font.hasOwnProperty("color")) {
            this.textDiv.style.color = font.color;
        }

    }

    setEllipsis(ell) {
        if (ell) {
            this.textDiv.style.overflow = "hidden";
            this.textDiv.style.textOverflow = "ellipsis";
            this.textDiv.style.whiteSpace = "nowrap";
        } else {
            this.textDiv.style.overflow = "";
            this.textDiv.style.textOverflow = "";
            this.textDiv.style.whiteSpace = "";
        }
    }
}

class CHE_TextItem extends CHE_Widget {
    constructor(style) {
        super(style);
        this.Dom = document.createElement("span");
        this.ChildDom = this.Dom;
        if (style.hasOwnProperty("text")) {
            this.Dom.innerText = style.text;
        }
        if (style.hasOwnProperty("colorStyle")) {
            let font = style.colorStyle;
            if (font.hasOwnProperty("size")) {
                this.Dom.style.fontSize = font.size + "px";
            }
            if (font.hasOwnProperty("bold")) {
                if (font.bold) {
                    this.Dom.style.fontWeight = "bold";
                } else {
                    this.Dom.style.fontWeight = "normal";
                }
            }
            if (font.hasOwnProperty("italic")) {
                if (font.italic) {
                    this.Dom.style.fontStyle = "italic";
                } else {
                    this.Dom.style.fontStyle = "normal";
                }
            }
            if (font.hasOwnProperty("disabled")) {
                if (font.disabled) {
                    this.Dom.style.textDecoration = "line-through";
                } else {
                    this.Dom.style.textDecoration = "none";
                }
            }
            if (font.hasOwnProperty("color")) {
                this.Dom.style.color = font.color;
            }
        }
        this.setStyle();
        return this.Dom;
    }

    setStyle() {
        super.setStyle();
    }

    setText(text) {
        this.style.text = text;
        this.Dom.innerText = text;
    }

    getText() {
        return {
            StyleText:this.style.text,
            DomText:this.Dom.innerText,
            DomHtml:this.Dom.innerHTML
        };
    }

    setColorstyle(font) {

        if (font.hasOwnProperty("size")) {
            this.Dom.style.fontSize = font.size + "px";
        }
        if (font.hasOwnProperty("bold")) {
            if (font.bold) {
                this.Dom.style.fontWeight = "bold";
            } else {
                this.Dom.style.fontWeight = "normal";
            }
        }
        if (font.hasOwnProperty("italic")) {
            if (font.italic) {
                this.Dom.style.fontStyle = "italic";
            } else {
                this.Dom.style.fontStyle = "normal";
            }
        }
        if (font.hasOwnProperty("disabled")) {
            if (font.disabled) {
                this.Dom.style.textDecoration = "line-through";
            } else {
                this.Dom.style.textDecoration = "none";
            }
        }
        if (font.hasOwnProperty("color")) {
            this.Dom.style.color = font.color;
        }

    }
}

class CHE_Tag extends CHE_Widget{
    constructor(style) {
        super(style);
        this.Dom = document.createElement("span");
        this.ChildDom = this.Dom;
        this.setStyle();
        return this.Dom;
    }
    setStyle() {
        super.setStyle();
        if(!this.style.hasOwnProperty("type")){
            this.style.type = "Default";
        }
        if(!this.style.hasOwnProperty("size")){
            this.style.type = "Default";
        }
        if(this.style.hasOwnProperty("text")){
            this.Dom.innerHTML = this.style.text;
        }
        this.Dom.style.backgroundColor = CHE_STYLE.Background[this.style.type][0];
        this.Dom.style.color = CHE_STYLE.Color[this.style.type];
        this.Dom.style.padding = CHE_STYLE.size[this.style.size].Padding;
        this.Dom.style.fontSize = CHE_STYLE.size[this.style.size].FontSize;
        this.Dom.style.borderRadius = CHE_STYLE.BorderRadius;
    }
    setText(text){
        this.style.text = text;
        this.Dom.innerHTML = text;
    }
    getText(){
        return {
            StyleText:this.style.text,
            DomText:this.Dom.innerText,
            DomHtml:this.Dom.innerHTML,
        };
    }
    setType(type){
        this.Dom.style.backgroundColor = CHE_STYLE.Background[type][0];
        this.Dom.style.color = CHE_STYLE.Color[type];
    }
    setSize(size){
        this.Dom.style.padding = CHE_STYLE.size[size].Padding;
        this.Dom.style.fontSize = CHE_STYLE.size[size].FontSize;
    }
}

class CHE_Image extends CHE_Widget{
    constructor(style) {
        super(style);
        this.Dom = document.createElement("img");
        this.ChildDom = this.Dom;
        if(this.style.hasOwnProperty("child")){
            this.style.child = [];
        }
        this.setStyle();
        return this.Dom;
    }
    setStyle() {
        super.setStyle();
        if(this.style.hasOwnProperty("src")){
            this.Dom.src = this.style.src;
        }
    }
    setSrc(src) {
        this.style.src = src;
        this.Dom.src = src;
    }
    getSrc(){
        return this.style.src;
    }
}

class CHE_ImageMode extends CHE_Widget {
    //照搬老代码
    constructor(style) {
        super(style);
        this.Dom = document.createElement("div");
        this.ChildDom = this.Dom;
        this.setStyle();

        return this.Dom;
    }

    setStyle() {
        super.setStyle();
        let styles = this.style;
        if (styles.hasOwnProperty("src")) {
            this.Dom.style.backgroundImage = "url(" + styles.src + ")";
        }
        if (styles.hasOwnProperty("full")) {
            if (styles.full === true) {
                this.Dom.style.backgroundSize = "cover";
            }
            if (styles.full === false) {
                this.Dom.style.backgroundSize = "auto";
            }
            if (typeof styles.full == "string") {
                this.Dom.style.backgroundSize = styles.full;
            }
            if (typeof styles.full == "object") {
                let a = styles.full[0];
                let b = styles.full[1];
                if (typeof a == "number") {
                    a = a + "px"
                }
                if (typeof b == "number") {
                    b = b + "px"
                }
                this.Dom.style.backgroundSize = a + " " + b;
            }
        }
        if (styles.hasOwnProperty("repeat")) {
            if (styles.repeat == "none") {
                this.Dom.style.backgroundRepeat = "no-repeat";
            } else if (styles.repeat == "x") {
                this.Dom.style.backgroundRepeat = "repeat-x";
            } else if (styles.repeat == "y") {
                this.Dom.style.backgroundRepeat = "repeat-y";
            } else {
                this.Dom.style.backgroundRepeat = "repeat";
            }
        }
        if (styles.hasOwnProperty("xy")) {

            let a = styles.xy[0];
            let b = styles.xy[1];
            if (typeof a == "number") {
                a = a + "px"
            }
            if (typeof b == "number") {
                b = b + "px"
            }
            this.Dom.style.backgroundPosition = a + " " + b;

        }
    }

    setSrc(src) {
        this.Dom.style.backgroundImage = "url(" + src + ")";
    }

    setFull(full) {
        if (full === true) {
            this.Dom.style.backgroundSize = "cover";
        }
        if (full === false) {
            this.Dom.style.backgroundSize = "auto";
        }
        if (typeof full == "string") {
            this.Dom.style.backgroundSize = full;
        }
        if (typeof full == "object") {
            let a = full[0];
            let b = full[1];
            if (typeof a == "number") {
                a = a + "px"
            }
            if (typeof b == "number") {
                b = b + "px"
            }
            this.Dom.style.backgroundSize = a + " " + b;
        }
    }

    setRepeat(repeat) {
        if (repeat == "none") {
            this.Dom.style.backgroundRepeat = "no-repeat";
        } else if (repeat == "x") {
            this.Dom.style.backgroundRepeat = "repeat-x";
        } else if (repeat == "y") {
            this.Dom.style.backgroundRepeat = "repeat-y";
        } else {
            this.Dom.style.backgroundRepeat = "repeat";
        }
    }

    setXY(xy) {
        let a = xy[0];
        let b = xy[1];
        if (typeof a == "number") {
            a = a + "px"
        }
        if (typeof b == "number") {
            b = b + "px"
        }
        this.Dom.style.backgroundPosition = a + " " + b;
    }
}

class CHE_Input extends CHE_Widget{
    constructor(style) {
        super(style);
        this.Dom = document.createElement("input");
        this.ChildDom = this.Dom;
        if(this.style.hasOwnProperty("child")){
            this.style.child = [];
        }
        this.setStyle();
        return this.Dom;
    }
    setStyle() {
        super.setStyle();
        let self = this;
        if(!this.style.hasOwnProperty("type")){
            this.style.type = "Default";
        }
        this.Dom.style.border = "1px solid "+CHE_STYLE.Background[this.style.type][0];
        this.Dom.style.backgroundColor = CHE_STYLE.Background[this.style.type][1] ;
        this.Dom.style.position = "relative";
        this.Dom.style.padding = CHE_STYLE.size.Mini.Padding;
        this.Dom.style.borderRadius = CHE_STYLE.BorderRadius;

        this.Dom.style.border = "0";
        this.Dom.style.outline = "none";
        this.Dom.style.color = CHE_STYLE.Color[this.style.type];

        if(this.style.hasOwnProperty("title")){
            this.Dom.placeholder = this.style.title;
        }
        if(this.style.hasOwnProperty("value")){
            this.Dom.value = this.style.value;
        }
        if(this.style.hasOwnProperty("Itype")){
            switch (this.style.Itype){
                case "text":
                    break;
                case "pwd":
                    this.Dom.type = "password";
                    break;
                case "number":
                    this.Dom.type = "number";
                    break;
                default:
                    this.Dom.type = this.style.Itype;
                    break;
            }
        }
        if(this.style.hasOwnProperty("methods")){
            let methods = this.style.methods;
            if(methods.hasOwnProperty("click")){
                this.Dom.onclick = function (e){
                    methods.click(e,self)
                }
            }
            if(methods.hasOwnProperty("change")){
                this.Dom.onchange = function (e){
                    methods.change(e,self)
                }
            }
        }
    }

    setTitle(title){
        this.style.title = title;
        this.Dom.placeholder = title;
    }
    setText(text){
        this.style.text = text;
        this.Dom.value = text;
    }
    getText(){
        return this.Dom.value;
    }
    getValue(){
        return this.Dom.value;
    }

}

class CHE_InputTextarea extends CHE_Widget{
    constructor(style) {
        super(style);
        this.Dom = document.createElement("textarea");
        this.ChildDom = this.Dom;
        if(this.style.hasOwnProperty("child")){
            this.style.child = [];
        }
        this.setStyle();
        return this.Dom;
    }
    setStyle() {
        super.setStyle();
        let self = this;
        this.Dom.className += " cui_scrollbar";
        if(!this.style.hasOwnProperty("type")){
            this.style.type = "Default";
        }
        this.Dom.style.border = "1px solid "+CHE_STYLE.Background[this.style.type][0];
        this.Dom.style.backgroundColor = CHE_STYLE.Background[this.style.type][1] ;
        this.Dom.style.position = "relative";
        this.Dom.style.borderRadius = CHE_STYLE.BorderRadius;
        this.Dom.style.border = "0";
        this.Dom.style.outline = "none";
        this.Dom.style.color = CHE_STYLE.Color[this.style.type];

        if(this.style.hasOwnProperty("title")){
            this.Dom.placeholder = this.style.title;
        }
        if(this.style.hasOwnProperty("value")){
            this.Dom.innerText = this.style.value;
        }
        if(this.style.hasOwnProperty("methods")){
            let methods = this.style.methods;
            if(methods.hasOwnProperty("click")){
                this.Dom.onclick = function (e){
                    methods.click(e,self)
                }
            }
            if(methods.hasOwnProperty("change")){
                this.Dom.onchange = function (e){
                    methods.change(e,self)
                }
            }
        }

        this.Dom.onkeydown = function (e){
            if(e.key === "Tab"){
                self.Dom.value += "\t";
                self.Dom.focus();
                e.stopPropagation();
                return false;
            }
        }
    }
    setTitle(title){
        this.style.title = title;
        this.Dom.placeholder = title;
    }
    setText(text){
        this.style.text = text;
        this.Dom.innerText = text;
    }
    getText(){
        return this.Dom.value;
    }
}

class CHE_Select extends CHE_Widget{
    constructor(style) {
        super(style);
        this.Dom = document.createElement("select");
        this.ChildDom = this.Dom;
        if(this.style.hasOwnProperty("child")){
            this.style.child = [];
        }
        this.setStyle();
        return this.Dom;

    }
    setStyle() {
        super.setStyle();
        let self = this;
        if(!this.style.hasOwnProperty("type")){
            this.style.type = "Default";
        }
        if(!this.style.hasOwnProperty("size")){
            this.style.size = "Mini";
        }
        if(!this.style.hasOwnProperty("multiple")){
            this.style.multiple = false;
        }
        this.Dom.style.border = "0";
        this.Dom.style.outline = "none";
        this.Dom.style.borderRadius = CHE_STYLE.BorderRadius;
        this.Dom.style.backgroundColor = CHE_STYLE.Background[this.style.type][0];
        this.Dom.style.color = CHE_STYLE.Color[this.style.type];
        this.Dom.style.padding = CHE_STYLE.size[this.style.size].Padding;
        this.Dom.style.fontSize = CHE_STYLE.size[this.style.size].FontSize;

        if(this.style.multiple){
            this.Dom.multiple = "multiple";
        }
        if(this.style.hasOwnProperty("init")){
            let option = document.createElement("option");
            option.value = this.style.init.value;
            option.innerText = this.style.init.label;
            option.style.color = CHE_STYLE.Color[this.style.type];
            if(this.style.init.hasOwnProperty("disabled")){
                if(this.style.init.disabled){
                   option.disabled = "disabled";
                }
            }
            let initOption = document.createElement("option");
            initOption.innerText = "——————————";
            initOption.disabled = "disabled";
            this.Dom.append(option);
            this.Dom.append(initOption);
        }
        if(this.style.hasOwnProperty("value")){
            for(let i in this.style.value){
                let data = this.style.value[i];
                switch (data.type) {
                    case "single":
                        let option = document.createElement("option");
                        option.value = data.value.value;
                        option.innerText = data.value.label;
                        if (data.value.hasOwnProperty("disabled")) {
                            if (data.value.init.disabled) {
                                option.disabled = "disabled";
                            }
                        }
                        this.Dom.append(option);
                        break;
                    case "group":
                        let optgroup = document.createElement("optgroup");
                        if (data.hasOwnProperty("label")) {
                            optgroup.label = data.label;
                            for (let i2 in data.value) {
                                let tmp = data.value[i2];
                                let option = document.createElement("option");
                                option.value = tmp.value;
                                option.innerText = tmp.label;
                                option.style.color = CHE_STYLE.Color[this.style.type];
                                if (tmp.hasOwnProperty("disabled")) {
                                    if (tmp.disabled) {
                                        option.disabled = "disabled";
                                    }
                                }
                                optgroup.append(option);
                            }
                            this.Dom.append(optgroup);
                            break;
                        }
                }
            }
        }
        if(this.style.hasOwnProperty("methods")){
            if(this.style.methods.hasOwnProperty("change")){
                this.Dom.onchange = function (e){
                    self.style.methods.change(e,self);
                }
            }
        }
    }
    setValue(value){
        this.style.value = value;
        this.Dom.innerHTML = "";
        for(let i in value){
            let data = value[i];
            switch (data.type) {
                case "single":
                    let option = document.createElement("option");
                    option.value = data.value.value;
                    option.innerText = data.value.label;
                    if (data.value.hasOwnProperty("disabled")) {
                        if (data.value.init.disabled) {
                            option.disabled = "disabled";
                        }
                    }
                    this.Dom.append(option);
                    break;
                case "group":
                    let optgroup = document.createElement("optgroup");
                    if (data.hasOwnProperty("label")) {
                        optgroup.label = data.label;
                        for (let i2 in data.value) {
                            let tmp = data.value[i2];
                            let option = document.createElement("option");
                            option.value = tmp.value;
                            option.innerText = tmp.label;
                            if (tmp.hasOwnProperty("disabled")) {
                                if (tmp.disabled) {
                                    option.disabled = "disabled";
                                }
                            }
                            optgroup.append(option);
                        }
                        this.Dom.append(optgroup);
                        break;
                    }
            }
        }
    }
    getValue(){
        return this.Dom.value;
    }
}

class CHE_Radio extends CHE_Widget{
    constructor(style) {
        super(style);
        this.Dom = document.createElement("label");
        this.ChildDom = this.Dom;
        if(this.style.hasOwnProperty("child")){
            this.style.child = [];
        }
        this.setStyle();
        return this.Dom;
    }
    setStyle() {
        super.setStyle();
        if(!this.type){
            this.type = "radio";
        }
        let self = this;
        this.radio = document.createElement("input");
        this.radio.type = this.type;
        this.radio.onclick = function (e){e.stopPropagation();}
        if(this.style.hasOwnProperty("text")){
            this.Dom.innerHTML = this.style.text;
        }
        if(this.style.hasOwnProperty("form")){
            this.radio.name = this.style.form;
        }
        if(this.style.hasOwnProperty("init")){
            if(this.style.init){
                this.radio.checked = "checked";
            }
        }
        // if(this.style.hasOwnProperty("methods")){
        //     if(this.style.methods.hasOwnProperty("click")){
        //         this.Dom.onclick = function (e){
        //             self.style.methods.click(e,self);
        //         }
        //     }
        // }
        this.Dom.prepend(this.radio);
    }
    getValue(){
        return this.radio.checked;
    }
    setValue(val){
        if(val){
            this.radio.checked = true;
        }else{
            this.radio.checked = false;
        }

    }
}

class CHE_Checkbox extends CHE_Radio{

    constructor(style) {
        super(style);

    }
    setStyle() {
        this.type = "checkbox";
        super.setStyle();
    }

}

class CHE_Iframe extends CHE_Widget{
    constructor(style) {
        super(style);
        this.Dom = document.createElement("iframe");
        this.ChildDom = this.Dom;
        if(this.style.hasOwnProperty("child")){
            this.style.child = [];
        }
        this.setStyle();
        return this.Dom;
    }
    setStyle() {
        super.setStyle();
        this.Dom.style.border = "0";
        if(this.style.hasOwnProperty("src")){
            this.Dom.src = this.style.src
        }

    }
    setSrc(src){
        this.style.src = src;
        this.Dom.src = src;
    }
    getSrc(){
        return this.Dom.src;
    }
}

class CHE_Media extends CHE_Widget{
    constructor(style) {
        super(style);
        if(this.style.hasOwnProperty("child")){
            this.style.child = [];
        }
        if(this.style.type === "audio"){
            this.Dom = document.createElement("audio")
        }
        if(this.style.type === "video"){
            this.Dom = document.createElement("video")
        }
        this.ChildDom = this.Dom;
        this.setStyle();
        return this.Dom;

    }
    setStyle() {
        super.setStyle();
        if(this.style.hasOwnProperty("src")){
            this.Dom.src = this.style.src;
        }
        if(this.style.hasOwnProperty("autoplay")){
            this.Dom.autoplay = this.style.autoplay;
        }
        if(this.style.hasOwnProperty("controls")){
            if(this.style.controls){
                this.Dom.controls = "controls";
            }
        }
        if(this.style.hasOwnProperty("muted")){
            if(this.style.muted){
                this.Dom.muted = "muted";
            }
        }
        if(this.style.hasOwnProperty("preload")){
            if(this.style.preload){
                this.Dom.preload = "preload";
            }
        }
        if(this.style.hasOwnProperty("loop")){
            if(this.style.loop){
                this.Dom.loop = "loop";
            }
        }
    }
    getDom(){
        return this.Dom;
    }
}