<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="mapContainer" :style="{width:props.width,height:props.height}" @touchstart="moveOn" @touchmove="dragMove"
         @mousedown="moveOn"
         @mouseup="moveOff" @mousemove="dragMove" @mouseleave="moveOff" @dblclick="dbClick" @wheel.prevent="wheel">
      <div id="labelMap" :style="mapStyle">
        <div :key="index" class="labelItem "
             :style="{left: (item.mapX-item.mapSize / 2)*width/item.mapInitWidth+'px',top:(item.mapY-item.mapSize / 2)*width/item.mapInitWidth+'px',backgroundColor:setMarkStyle(item)?.backGround,width:item.mapSize+'px',height:item.mapSize+'px',fontSize:item.mapSize/3+'px'}"
             v-for="(item,index) in mapData" @dblclick="dbClickItem(item)">
          <span :style="{color:setMarkStyle(item)?.color}">{{ setMarkStyle(item)?.label }}</span>
        </div>
      </div>
    </div>


    <el-dialog :title="dialogTitle" v-model="showDialog" width="400px">
      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px">
        <el-form-item label="标记尺寸" prop="mapSize">
          <el-radio-group v-model="formData.mapSize">
            <el-radio :label="51">大</el-radio>
            <el-radio :label="27">中</el-radio>
            <el-radio :label="15">小</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="选择车位" prop="id">
          <el-select v-model="formData.id">
            <el-option v-for="(item,index) in unMapData" :value="item.id" :label="item.parkingNumber"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="info" @click="showDialog=false">取消</el-button>
        <el-button type="primary" @click="submit()">确定</el-button>
      </template>
    </el-dialog>
  </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 emit = defineEmits(["update:value", "change"]);

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: []
  }
});


//图片高度
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("labelMap");
  setTimeout(()=>{
    setImgSize(props.imgUrl);
  },100)

});


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

watch(() => props.imgUrl, (newValue) => {
  setImgSize(newValue);
});

let unMapData = computed(() => {
  let res = [];
  for (let i in props.value) {
    if (props.value[i].mapId == 0) {
      res.push(props.value[i]);
    }
  }
  return res;
});

let mapData = computed(() => {
  let res = [];
  for (let i in props.value) {
    if (props.value[i].mapId != 0) {
      res.push(props.value[i]);
    }
  }
  return res;
});


//拖拽参数
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;

  }

}


let showDialog = ref(false);
let dialogTitle = ref("");
let formRef = ref();
let formData = ref({
  id: "",
  mapX: 0,
  mapY: 0,
  mapId: "",
  mapSize: 27,
  mapInitWidth: 0
});

let formRules = reactive({
  mapSize: [{ required: true, message: "不能为空", trigger: "blur" }],
  id: [{ required: true, message: "不能为空", trigger: "blur" }]
});

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" };
  }

}


//双击设置标记
function dbClick(event, item) {
  if (props.imgUrl == "") return;
  //点击地图
  if (event.target.id == "labelMap") {
    formRef.value?.resetFields();
    formData.value.mapInitWidth = width.value;
    formData.value.mapX = event.layerX;
    formData.value.mapY = event.layerY;
    dialogTitle.value = "添加";
    showDialog.value = true;
  }

}


//双击标记
function dbClickItem(item) {
  ElMessageBox.confirm(
    "是否确定清除该标记?",
    "warning",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    }
  ).then(() => {
    console.log(item);
    for (let key in formData.value) {
      formData.value[key] = item[key];
    }
    formData.value.mapId = "0";
    postMark();
  }).catch(() => {
  });

}

//提交表单
function submit() {
  if (dialogTitle.value == "添加") {
    // formData.value.mapX = (formData.value.mapX - formData.value.mapSize / 2).toFixed(0);
    // formData.value.mapY = (formData.value.mapY - formData.value.mapSize / 2).toFixed(0);
    formData.value.mapId = props.mapId;
    postMark();
    showDialog.value = false;
  }
}

function postMark() {
  request.edit(mapMark, {
    id: formData.value.id,
    entity: formData.value
  }, "").then((res) => {
    if (res.code == 1) {
      emit("change");
    }
  });
}


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">

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

#labelMap {
  position: absolute;
  background-size: 100% 100%;
  transition: transform 0.5s ease;
  left: 0;
  top: 0;
}

: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>
