class Drawer {
    constructor(canvas) {
        this.canvas = canvas;
        this.context = canvas.getContext('2d');
        this._init();
    }

    _init() {

    }

    cover(video) {
        //console.log('cover')
        let offsetLeft = 0, //canvas和video同级时
            offsetTop = 0,
            //offsetLeft = getOffsetRect(video).left, //canvas为body的子元素时，根据DOM文档定位
            //offsetTop = getOffsetRect(video).top,
            videoHeight = video.videoHeight,
            videoWidth = video.videoWidth,
            width = video.getBoundingClientRect().width || videoWidth,
            height = video.getBoundingClientRect().height || videoHeight;
        this.canvas.style.position = 'absolute';

        //this.canvas.style.top = offsetTop +'px';

        //this.canvas.style.height = height +'px';

        let tempHeight = width * videoHeight / videoWidth;
        if (tempHeight > height) { // 如果缩放后的高度大于标签宽度，则按照height缩放width
            this.canvas.height = height;
            this.canvas.width = videoWidth / videoHeight * height;
            this.canvas.style.height = height + 'px';
            this.canvas.style.width = videoWidth / videoHeight * height + 'px';
            this.canvas.style.top = offsetTop + 'px';
            this.canvas.style.left = offsetLeft + (width - videoWidth / videoHeight * height) / 2 + 'px';
        } else {
            this.canvas.width = width;
            this.canvas.height = width * videoHeight / videoWidth;
            this.canvas.style.width = width +'px';
            this.canvas.style.height = width * videoHeight / videoWidth +'px';
            this.canvas.style.left = offsetLeft + 'px';
            this.canvas.style.top = offsetTop + (height - width * videoHeight / videoWidth) / 2 + 'px';
        }
    }

    clearCanvas() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }

    terminate() {
        this.clearCanvas();
        this.canvas.width = 0;
        this.canvas.height = 0;
    }

    /**
     * 8191坐标系转真实坐标
     * @param x 8191坐标系 x坐标
     * @param y 8191坐标系 y坐标
     * @returns {number[]} 数组
     * @private
     */
    _toRealCoordinate(x, y) {
        return [parseInt(x * this.canvas.width / 8191), parseInt(y * this.canvas.height / 8191)];
    }

    /**
     * 真实坐标系转8191坐标系
     * @param point {x: x, y: y}
     * @param canvas 坐标系所在的画布
     * return {x: x, y: y}
     */
     _to8191Coordinate(point, canvas) {
        return {x: parseInt(point.x * 8191 / canvas.width), y: parseInt(point.y * 8191 / canvas.height)}
    }
}


/**
 * 获取元素相对于dom文档的坐标
 * @param elem
 * @returns {{top: number, left: number}}
 */
function getOffsetRect(elem) {
    let box = elem.getBoundingClientRect();
    let body = document.body;
    let docElem = document.documentElement;
    let scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
    let scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
    let clientTop = docElem.clientTop || body.clientTop || 0;
    let clientLeft = docElem.clientLeft || body.clientLeft || 0;
    let top = box.top + scrollTop - clientTop;
    let left = box.left + scrollLeft - clientLeft;
    return {top: Math.round(top), left: Math.round(left)}
}


export default Drawer;
