import * as style from './style.scss'
const cornerIcon = require('@assets/lieguan/corner_icon.png'); 
const BMap = (window as any)['BMap']

interface memberObj {
    center:any,
    width: number,
    height:number,

    name: string,
    sex: string,
    age: number,
    attribute:  string,
    status: string,
    rotate: string,
    thumb:any
}

export default class SquareOverlay  extends BMap.Overlay{
    _center:any;
    _width:number;
    _height:number;

    _name:string;
    _sex:string;
    _age:string;
    _attribute:string;
    _status:string;
    _rotate: string;
    _thumb:any;

    _map:any;
    _div:any;
    constructor(memberObj:any){
        super()
        this._center = memberObj.center;
        this._width = memberObj.width;
        this._height = memberObj.height;

        this._name = memberObj.name;
        this._sex = memberObj.sex
        this._age = memberObj.age
        this._attribute = memberObj.attribute
        this._status = memberObj.status
        this._rotate = memberObj.rotate
        this._thumb = memberObj.thumb
    };

    initialize(map:any) {
        // 保存map对象实例
        this._map = map;
        // 创建div元素，作为自定义覆盖物的容器
        var layerDiv = document.createElement("div");
        layerDiv.className = style.layerItem
        layerDiv.style.width = this._width + 'px';
        layerDiv.style.height = this._height + 'px';
        layerDiv.style.transform = `scale(${this._rotate})`

        var bigHeadBgTag = document.createElement('img')
        // bigHeadBgTag.className = style.layerIcon
        bigHeadBgTag.src = this._thumb

        var cornerImgTag = document.createElement('img');
        // cornerImgTag.className = style.cornerImg
        cornerImgTag.src = cornerIcon


        var picDiv = document.createElement("div");
        picDiv.className = style.leftPic
        picDiv.appendChild(bigHeadBgTag)


        var cornerDiv = document.createElement("div");
        cornerDiv.className = style.cornerPic
        cornerDiv.appendChild(cornerImgTag)
        layerDiv.appendChild(cornerDiv)

        var tableDiv = document.createElement("div");
        tableDiv.className = style.rightTable

        var nameDiv = document.createElement("div");
        nameDiv.innerHTML = `姓名:${this._name}`

        var sexDiv = document.createElement("div");
        sexDiv.innerHTML = `性别:${this._sex}`

        var ageDiv = document.createElement("div");
        ageDiv.innerHTML = `年龄:${this._age}`

        var attributeDiv = document.createElement("div");
        attributeDiv.innerHTML = `属性:${this._attribute}`

        var statusDiv = document.createElement("div");
        statusDiv.innerHTML = `状态:${this._status}`

        tableDiv.appendChild(nameDiv)
        tableDiv.appendChild(sexDiv)
        tableDiv.appendChild(ageDiv)
        tableDiv.appendChild(attributeDiv)
        tableDiv.appendChild(statusDiv)
        
        // 将div添加到覆盖物容器中
        map.getPanes().markerPane.appendChild(layerDiv).appendChild(picDiv).appendChild(tableDiv);

        // 保存div实例
        this._div = layerDiv;
        // 需要将div元素作为方法的返回值，当调用该覆盖物的show、
        // hide方法，或者对覆盖物进行移除时，API都将操作此元素。
        return layerDiv;
    }

    draw() {
        // 根据地理坐标转换为像素坐标，并设置给容器    
        var position = this._map.pointToOverlayPixel(this._center);    
        this._div.style.left = position.x - this._width / 2 + "px";    
        this._div.style.top = position.y - this._height / 2 + "px";  
    }

    show() {
        if (this._div){    
            this._div.style.display = "";    
        }    
    }

    hide() {
        if (this._div){    
            this._div.style.display = "none";    
        }    

    }
    toggle() {    
        if (this._div){    
            if (this._div.style.display == ""){    
                this.hide();    
            }    
            else {    
                this.show();    
            }    
        }    

    }
}