<template>
  <div>
    <div style="margin-bottom: 10px">
      <el-button type="primary" @click="setBigger">放大</el-button>
      <el-button type="primary" @click="setSmaller">缩小</el-button>
      <el-button type="primary" @click="resetSize">复位</el-button>
    </div>
    <div id="mapContainer2" :style="{width:props.width,height:props.height}" @touchstart="moveOn" @touchmove="dragMove"
         @mousedown="moveOn"
         @mouseup="moveOff" @mousemove="dragMove" @mouseleave="moveOff" @wheel.prevent="wheel">
      <div id="labelMap2" :style="mapStyle">
        <div :key="index" class="labelItem "
             :style="getItemStyle(item)"
             v-for="(item,index) in props.value">
          <span :style="{color:setMarkStyle(item)?.color}">{{ setMarkStyle(item)?.label }}</span>
        </div>
      </div>
    </div>


  </div>


</template>
<script setup>
import { computed, onMounted, reactive, ref, watch } from "vue";
import request from "/@/api/request";
import { building, mapMark } from "/@/api/controllerUrls";
import { ElMessageBox } from "element-plus";

const props = defineProps({
  imgUrl: {
    type: String,
    default: ""
  },
  mapId: {
    type: String,
    default: ""
  },
  width: {//外边框尺寸
    type: String,
    default: "100%"
  },
  height: {//外边框尺寸
    type: String,
    default: "400px"
  },
  value: {//标记点列表
    type: Array,
    default: []
  }
});

defineExpose({
  setImgSize
});

//图片高度
let height = ref(0);
let width = ref(0);

//图层样式
let mapStyle = computed(() => {
  return {
    backgroundImage: `url(${props.imgUrl})`,
    width: width.value + "px",
    height: height.value + "px",
    left: dragOption.x1 + "px",
    top: dragOption.y1 + "px"
  };
});


//图层实例
let labelMap;

onMounted(() => {
  labelMap = document.getElementById("labelMap2");
  // setTimeout(()=>{
  //   setImgSize(props.imgUrl);
  // },100)
});


//根据容器宽度和原始图片长宽比例设置图层高度
function setImgSize(url) {
  const m = document.getElementById("mapContainer2");
  let img = new Image();
  img.onload = function() {
    width.value = m.clientWidth;
    height.value = m.clientWidth * (img.naturalHeight / img.naturalWidth);
  };
  img.src = url;
  console.log(m.clientWidth);
}


//拖拽参数
let dragOption = reactive({
  x1: 0,
  y1: 0,
  x: 0,
  y: 0,
  status: false
});


//启动拖拽
function moveOn(event) {
  dragOption.status = true;
  dragOption.x = event.clientX;
  dragOption.y = event.clientY;
}

//关闭拖拽
function moveOff() {
  dragOption.status = false;
}

//拖拽
function dragMove(event) {
  if (dragOption.status) {
    dragOption.x1 += event.clientX - dragOption.x;
    dragOption.y1 += event.clientY - dragOption.y;

    dragOption.x = event.clientX;
    dragOption.y = event.clientY;

  }

}

function getItemStyle(item) {
  //标记点新尺寸
  let itemSize = item.mapSize * width.value / item.mapInitWidth;
  return {
    left: (item.mapX - item.mapSize / 2) * width.value / item.mapInitWidth + "px",
    top: (item.mapY - item.mapSize / 2) * width.value / item.mapInitWidth + "px",
    backgroundColor: setMarkStyle(item)?.backGround,
    width: itemSize + "px",
    height: itemSize + "px",
    fontSize: itemSize / 3 + "px"
  };
}

let statusList = [
  { label: "可售", backGround: "#0bc933", color: "#000000" },
  { label: "已售", backGround: "#fd0002", color: "#ffffff" },
  { label: "待租", backGround: "#fde801", color: "#000000" },
  { label: "已租", backGround: "#006efd", color: "#ffffff" }
];

function setMarkStyle(row) {
  if (row.saleStatus == 1) {
    return { label: "已售", backGround: "#fd0002", color: "#ffffff" };
  } else if (row.isSale == 1) {
    return { label: "待售", backGround: "#0bc933", color: "#000000" };
  } else if (row.isHire == 1) {
    return { label: "已租", backGround: "#006efd", color: "#ffffff" };
  } else {
    return { label: "待租", backGround: "#fde801", color: "#000000" };
  }

}


let size = 1;

//缩小
function setSmaller() {
  //边界条件
  if (size < 0.3) return;
  size -= 0.1;
  labelMap.style.transform = `scale(${size})`;
}


//放大
function setBigger() {
  //边界条件
  if (size > 3) return;
  size += 0.1;
  labelMap.style.transform = `scale(${size})`;
}

function resetSize() {
  size = 1;
  labelMap.style.transform = `scale(${size})`;
  dragOption.x1 = 0;
  dragOption.y1 = 0;
}

function wheel(event) {
  if (event.wheelDeltaY > 0) {
    setBigger();
  } else {
    setSmaller();
  }
}

</script>
<style scoped lang="scss">

#mapContainer2 {
  overflow: hidden;
  border: #888888 1px solid;
  position: relative
}

#labelMap2 {
  position: absolute;
  background-size: 100% 100%;
  transition: transform 0.5s ease;
  left: 0;
  top: 0;
  min-width: 100px;
  min-height: 100px;
  //width: 100%;
  //height: 100%;
}

:deep(.labelItem) {
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  font-size: 13px;
  user-select: none;
  position: absolute;
  cursor: pointer;


}

</style>
