<template>
  <Dialog
    v-model="dialogFormVisible"
    title="库区选择"
    width="1200"
    class="location-selection-dialog"
    :fullscreen="false"
    top="4vh"
  >
    <div class="location-selection-dialog-map">
      <div
        class="location-selection-map"
        :style="{
          width: imgBgObj.showWidth + 'px',
          height: imgBgObj.showHeight + 'px',
          backgroundImage: `url(${imgBgObj.imgUrl})`
        }"
      >
        <div
          v-for="(item, index) in allMapPointInfo"
          :key="index"
          class="location-selection-map-item"
        >
          <template v-if="locationTypeNumber == 1">
            <el-popover placement="top" trigger="click" :popper-style="{ padding: '0px' }">
              <template #reference>
                <img
                  src="https://api.znkjfw.com/admin-api/infra/file/4/get/库位库存_png_179_1739326653035.png"
                  alt=""
                  :style="{
                    position: 'absolute',
                    left: Number(item.locationX) - Number(item.locationWidePx) / 2 + 'px',
                    top: Number(item.locationY) - Number(item.locationDeepPx) / 2 + 'px',
                    width: item.locationWidePx + 'px',
                    height: item.locationDeepPx + 'px',
                    zIndex: 999
                  }"
                />
              </template>
              <div class="drop-down-menu">
                <!-- 楼层展开 -->
                <div
                  v-for="(floor, floorIndex) in item.dataList"
                  :key="floorIndex"
                  class="drop-down-menu-item"
                  :class="currentItem && currentItem.id == floor.id ? 'tool-active' : ''"
                  @click="choosePoint(floor)"
                >
                  {{ floor.locationNo }}
                </div>
              </div>
            </el-popover>
          </template>
          <template v-else>
            <el-popover placement="top" trigger="click" :popper-style="{ padding: '0px' }">
              <template #reference>
                <img
                  @click="choosePoint(item)"
                  src="https://api.znkjfw.com/admin-api/infra/file/4/get/库位库存_png_179_1739326653035.png"
                  alt=""
                  :style="{
                    position: 'absolute',
                    left: Number(item.locationX) - Number(item.locationWidePx) / 2 + 'px',
                    top: Number(item.locationY) - Number(item.locationDeepPx) / 2 + 'px',
                    width: item.locationWidePx + 'px',
                    height: item.locationDeepPx + 'px',
                    zIndex: 999,
                    border:
                      (currentItem &&
                        locationTypeNumber == 2 &&
                        currentItem.laneId == item.laneId) ||
                      (locationTypeNumber == 3 && currentItem.areaId == item.areaId)
                        ? '1px dashed #000'
                        : 'none'
                  }"
                />
              </template>
              <div class="drop-down-menu">
                <div class="drop-down-menu" v-if="locationTypeNumber == 2">
                  <div class="drop-down-menu-item"> {{ item.laneName }} </div>
                </div>
                <div class="drop-down-menu" v-if="locationTypeNumber == 3">
                  <div class="drop-down-menu-item">{{ item.areaName }}</div>
                </div>
              </div>
            </el-popover>
          </template>
        </div>
      </div>
    </div>
    <div class="location-selection-dialog-footer">
      <el-button style="width: 90px" @click="dialogFormVisible = false">取消</el-button>
      <el-button style="width: 90px" type="primary" @click="submitAddForm"> 确定 </el-button>
    </div>
  </Dialog>
</template>

<script setup>
import JSONBigInt from 'json-bigint'
import { reactive, ref } from 'vue'
import * as MapApi from '@/api/map/map'

const dialogFormVisible = ref(false) //列表的
const message = useMessage() // 消息弹窗

const props = defineProps({
  positionMapId: {
    type: String,
    default: () => ''
  }
})

const locationTypeNumber = ref(1)
const open = (locationTypeNum) => {
  dialogFormVisible.value = true
  currentItem.value = null
  locationTypeNumber.value = locationTypeNum
  imgBgObj.positionMapId = props.positionMapId
  getMapList()
}

const allMapPointInfo = ref([]) //点位信息
const imgBgObj = reactive({
  imgUrl: '',
  positionMapId: '',
  width: '',
  height: '',
  floor: '',
  area: '',
  resolution: 0,
  origin: null,
  showWidth: 1150,
  showHeight: 0
})
const getMapList = async () => {
  if (props.positionMapId) {
    let res = await MapApi.getPositionMap(props.positionMapId)
    let yamlJson = JSON.parse(res.yamlJson)
    imgBgObj.positionMapId = res.id
    imgBgObj.floor = res.floor
    imgBgObj.area = res.area
    imgBgObj.width = yamlJson.width
    imgBgObj.height = yamlJson.height
    imgBgObj.origin = yamlJson.origin
    imgBgObj.resolution = yamlJson.resolution
    imgBgObj.showHeight = (imgBgObj.showWidth * imgBgObj.height) / imgBgObj.width
  } else {
  }

  getMapData()
  getAllNodeList()
}

//调转换成png的接口
const getMapData = async () => {
  let data = await MapApi.getPositionMapdDwnloadPngBase64({
    floor: imgBgObj.floor,
    area: imgBgObj.area
  })
  imgBgObj.imgUrl = data
}

const currentItem = ref(null)
const getAllNodeList = async () => {
  let list = await MapApi.getPositionMapItemList({
    positionMapId: imgBgObj.positionMapId
  })
  allMapPointInfo.value = []

  list.forEach((item) => {
    //只要库位
    if (locationTypeNumber.value == 1 && item.type === 2) {
      item.locationX = Number(item.locationX) * (imgBgObj.showWidth / imgBgObj.width)
      item.locationY = Number(item.locationY) * (imgBgObj.showWidth / imgBgObj.width)
      item.dataList = JSONBigInt({ storeAsString: true }).parse(item.dataJson)
      item.locationDeep = item.dataList[0].locationDeep
      item.locationWide = item.dataList[0].locationWide

      //要将实际的cm改成px
      if (item.locationWide && item.locationDeep) {
        let pxObj = cmConversionPx(item.locationWide, item.locationDeep)
        item.locationWidePx = pxObj.pWidth
        item.locationDeepPx = pxObj.pHeight
      }
      allMapPointInfo.value.push(item)
    }

    //线库 laneId
    if (locationTypeNumber.value == 2 && item.laneId !== null) {
      item.locationX = Number(item.locationX) * (imgBgObj.showWidth / imgBgObj.width)
      item.locationY = Number(item.locationY) * (imgBgObj.showWidth / imgBgObj.width)
      item.dataList = JSONBigInt({ storeAsString: true }).parse(item.dataJson)
      item.locationDeep = item.dataList[0].locationDeep
      item.locationWide = item.dataList[0].locationWide
      item.laneName = item.dataList[0].laneName

      //要将实际的cm改成px
      if (item.locationWide && item.locationDeep) {
        let pxObj = cmConversionPx(item.locationWide, item.locationDeep)
        item.locationWidePx = pxObj.pWidth
        item.locationDeepPx = pxObj.pHeight
      }
      allMapPointInfo.value.push(item)
    }

    //区域 areaId
    if (locationTypeNumber.value == 3 && item.areaId !== null) {
      item.locationX = Number(item.locationX) * (imgBgObj.showWidth / imgBgObj.width)
      item.locationY = Number(item.locationY) * (imgBgObj.showWidth / imgBgObj.width)
      item.dataList = JSONBigInt({ storeAsString: true }).parse(item.dataJson)
      item.locationDeep = item.dataList[0].locationDeep
      item.locationWide = item.dataList[0].locationWide
      item.areaName = item.dataList[0].areaName

      //要将实际的cm改成px
      if (item.locationWide && item.locationDeep) {
        let pxObj = cmConversionPx(item.locationWide, item.locationDeep)
        item.locationWidePx = pxObj.pWidth
        item.locationDeepPx = pxObj.pHeight
      }
      allMapPointInfo.value.push(item)
    }
  })
}
//将节点实际宽高cm转换成px
const cmConversionPx = (cWidth, cHeight) => {
  let pWidth = (Number(cWidth) / imgBgObj.resolution / 100) * (imgBgObj.showWidth / imgBgObj.width)
  let pHeight =
    (Number(cHeight) / imgBgObj.resolution / 100) * (imgBgObj.showWidth / imgBgObj.width)

  return {
    pWidth,
    pHeight
  }
}

const choosePoint = (item) => {
  currentItem.value = item
}

const submitAddForm = () => {
  if (currentItem.value) {
    emit('locationSelectionDialogSuccess', currentItem.value)
    dialogFormVisible.value = false
  } else {
    message.warning('请选择一个位置')
  }
}

const emit = defineEmits(['locationSelectionDialogSuccess'])
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>

<style lang="scss">
.location-selection-dialog {
  padding: 0px;
  position: relative;

  .el-dialog__footer {
    padding: 10px 20px 20px 0;
    border-top: none !important;
  }

  .location-selection-dialog-map {
    position: relative;
    width: 100%;
    height: 80vh;
    overflow: auto;

    .location-selection-map {
      position: relative;
      width: 100%;

      .location-selection-map-item {
        position: absolute;
        top: 0;
        left: 0;
      }
    }
  }

  .location-selection-dialog-footer {
    position: absolute;
    bottom: 30px;
    right: 60px;
  }
}
.drop-down-menu {
  .drop-down-menu-item {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 11px 0;
    font-family:
      PingFangSC,
      PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #0d162a;
    line-height: 20px;
    text-align: left;
    font-style: normal;
    border-bottom: 1px solid #e9e9e9;
  }

  :last-child {
    border-bottom: none;
  }
}

.tool-active {
  background: #ebf1ff !important;
}
</style>
