<template>
    <el-dialog
      title="地图坐标拾取"
      class="manage-dialog xy-dialog"
      :visible.sync="xyDialogVisible"
      :close-on-click-modal="false"
      @close="closeHandle">
        <div class="xy-row">
            <div class="xy-row">
                <span class="xy-row-text">X 轴: </span>
                <el-input v-model="xVal" placeholder="已选择X坐标" readonly class="pos-inp"></el-input>
                <span class="xy-row-text">Y 轴: </span>
                <el-input v-model="yVal" placeholder="已选择Y坐标" readonly class="pos-inp"></el-input>
            </div>
        </div>
        <div class="xy-container">
            <canvas id="xycanvas" class="xycanvas" @click="getXyAxis">
            </canvas>
            <img :src="floorImg" class="floorimg" @click="getXyAxis" />
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button class="dialog-btn" @click="xyDialogVisible = false">{{$t('dialog.cancel')}}</el-button>
            <el-button type="primary" class="dialog-btn dialog-confirm-btn" @click="transferXy()">{{$t('dialog.confirm')}}</el-button>
        </div>
    </el-dialog>
</template>

<script>
import xyImg from '@/assets/img/manage/xy.png'
export default {
    data() {
        return {
            xyDialogVisible: false,
            xVal: '',
            yVal: '',
            floorImg: ''
        }
    },
    methods: {
        dialogInit(imgPath) {
            this.floorImg = imgPath;
            this.xyDialogVisible = true;
        },
        getXyAxis(e) {
			// var imgWscale,imgHscale
			var that = this
			var newImg = new Image()
			newImg.src = this.floorImg
			newImg.onload = function(){
				var width = that.getStyleFn('.floorimg', 'width');
				var height = that.getStyleFn('.floorimg', 'height');
				// imgWscale = that.normalWidth/width;
                // imgHscale = that.normalWidth/height;
				let ev = e || window.event;
				var eleRect = ev.target.getBoundingClientRect();
				let _top = (eleRect.top - ev.target.clientTop).toFixed(0);
				let _left = eleRect.left - ev.target.clientLeft;
				let startX = ev.pageX - _left - $(document).scrollLeft();
                let startY = ev.pageY - _top - $(document).scrollTop();
				that.xVal = (startX * that.normalWidth / width).toFixed(2);
				that.yVal = (startY * that.normalWidth / height).toFixed(2);
                var canvas = document.getElementById('xycanvas');
                    canvas.width = width;
                    canvas.height = height;
				if(!canvas.getContext) return;
				var ctx = canvas.getContext("2d");
				ctx.clearRect(0,0,canvas.width,canvas.height);
				var img = new Image();
				img.src = xyImg;
				var getPixelRatio = function(context) {
				var backingStore = context.backingStorePixelRatio ||
                    context.webkitBackingStorePixelRatio ||
                    context.mozBackingStorePixelRatio ||
                    context.msBackingStorePixelRatio ||
                    context.oBackingStorePixelRatio ||
                    context.backingStorePixelRatio || 1;
                    return (window.devicePixelRatio || 1) / backingStore;
				};
                // var ratio = getPixelRatio(ctx);
				img.onload = function(){ 
					ctx.drawImage(img, startX - 15, startY - 30, 30, 30)
				}
			}
			// ctx.fillStyle = "rgb(200,0,0)";
			// ctx.fillRect (sx*startX, sy*startY, 0, 0);
		},
        transferXy() {
            this.$emit('posXY', { x: this.xVal, y: this.yVal });
            this.xyDialogVisible = false;
        },
        closeHandle() {
            this.xVal = '';
            this.yVal = '';
            this.floorImg = '';
            let canvas = document.getElementById('xycanvas');
			if(!canvas.getContext) return;
            let ctx = canvas.getContext("2d");
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        },
    }
}
</script>

<style scoped>
    .pos-inp {
        height: 30px !important;
        width: 120px;
    }

    .xy-row {
        padding-bottom: 5px;
    }

    .floorimg {
        left: auto;
        /* object-fit: contain; */
        /* width: 100%; */
        height: 460px; 
    }
    .xy-container{
        text-align: center;
        position: relative;
        overflow-x: auto;
        overflow-y: hidden;
    }
    .xycanvas {
        /* height: 460px; */
        position: absolute;
        top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
    }
</style>