<template>
  <div class="mapdata">
    <div id="container" ref="container" style="width:100%;"></div>
  </div>

</template>

<script>
import Konva from 'konva'
import { selectLotoMapById, selectIsLotoStationById } from '@/api/mes/lotoStation/lotoStation'
import { getTechnologyInfo } from '@/api/system/machinery'
import { selectIsMapById } from '@/api/system/mapconfig'

export default {
  name: 'KonvaExample',
  props: {
    machineryId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      stage: null,
      layer: null,
      selectedStates: [], // 用于存储每个元素的选中状态
      selectedText: [], // 用于存储未选中的元素文本
      rects: [], // 白色r        ect合集
      texts: [], // 白色text合集
      redrects: [], // 红色rect合集
      redtexts: [], // 白色text合集
      value: '',
      form: {},//拿到单个数据
      orignData: null,//原始数据
      pointIdList: [],//选中的隔离点
      selectPoints: [],//回显之前选中的隔离点
      imageUrl: '',//获取底图
      width: '',//底图宽
      height: '',//底图高
      x: '',//底图横坐标
      y: '',//底图纵坐标
      pointList: null//接口给的所有点位数据
    }
  },
  watch: {
    'machineryId': {
      handler(newValue) {
        if (newValue) {
          console.log(this.machineryId, 'Mapdata拿到的父组件machineryId')
          this.selectIsLotoStationById()
        }
      },
      immediate: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      if (this.machineryId) {
        this.selectIsLotoStationById()
        const machineryId = this.machineryId
        console.log(machineryId, 'Mapdata拿到的父组件传递数据')
      }
    })
  },

  methods: {
    selectIsLotoStationById() {
      const machineryId = this.machineryId
      getTechnologyInfo(machineryId).then((response) => {
        const lotoId = response.data.lotoId
        const sopId = ''
        const ticketId = ''
        selectIsLotoStationById(lotoId).then((response) => {
          console.log(response, '电柜信息')
          this.form = response.data
          // 获取不同底图 如地图或者柜子
          selectIsMapById(response.data.mapId).then((response) => {
            console.log(response, '获取底图')
            this.imageUrl = response.data.imageUrl
            this.width = response.data.width
            this.height = response.data.height
            this.x = response.data.x
            this.y = response.data.y
            this.pointList = response.data.pointList
            this.initKonva()
          })
        })
        // selectLotoMapById(lotoId, sopId, ticketId).then(response => {
        //   console.log(response, '电柜预览接口调用')
        //   this.form.map = response.data
        //
        //   if (response.data) {
        //     try {
        //       this.value = JSON.stringify(response.data, null, 4)
        //       this.orignData = this.value
        //     } catch (err) {
        //     }
        //   }
        //   this.initKonva()
        // })
      })

      //   设备工艺详情
      getTechnologyInfo(this.machineryId).then(response => {
        console.log(response, '设备/工艺详情')
        this.selectPoints = response.data.pointIdList
      })
    },

    // 校验字符串是否为有效的 JSON
    isJson(str) {
      try {
        JSON.parse(str)
        return true
      } catch (e) {
        return false
      }
    },
    initKonva() {
      // 创建舞台
      if (this.width > 1000) {
        this.stage = new Konva.Stage({
          container: this.$refs.container, // 容器元素
          width: 1200,
          height: 600
        })
      } else {
        this.stage = new Konva.Stage({
          container: this.$refs.container, // 容器元素
          width: 1000,
          height: 600
        })
      }

      // 创建底图图层
      this.bgLayer = new Konva.Layer()

      // 创建底图
      const bgImage = new Image()

      // bgImage.src = require('@/assets/images/MapImage.png')
      bgImage.src = this.imageUrl
      bgImage.onload = () => {
        if (this.width > 1000) {
          const knovaImage = new Konva.Image({
            x: this.x,
            y: this.y,
            image: bgImage,
            width: this.width / 1.3,
            height: this.height / 1.4,
            draggable: false
          })
          this.bgLayer.add(knovaImage)
          this.bgLayer.draw() // 绘制底图图层
        } else {
          const knovaImage = new Konva.Image({
            x: this.x - 130,
            y: this.y - 20,
            image: bgImage,
            width: this.width / 1.5,
            height: this.height / 1.5,
            draggable: false
          })
          this.bgLayer.add(knovaImage)
          this.bgLayer.draw() // 绘制底图图层
        }

      }

      // 将底图图层添加到舞台
      this.stage.add(this.bgLayer)

      // 创建点位图层
      this.layer = new Konva.Layer()

      // 将点位图层添加到舞台
      this.stage.add(this.layer)

      // 禁止舞台拖拽
      this.stage.draggable(false)

      // 渲染数据
      const imageSrc = require('@/assets/images/localSetIcon.jpg') // 图片路径
      this.renderGrid(imageSrc, 6, 3, 450, 100, 120, 100, 50, 50, 60, 25)
    },

    renderGrid(imageSrc) {
      this.selectedStates = [] // 用数组存储选中状态
      this.rects = {}
      this.texts = {}
      this.bgrects = {}
      this.redrects = {}
      this.redtexts = {}
      this.selectedText = []
      this.pointIdList = [] // 初始化选中的点ID列表

      // const positions = JSON.parse(this.value) // 获取点位数据
      const positions = this.pointList
      // **计算柜子的布局范围**
      const cabinetWidth = this.stage.width() // 柜子的宽度
      const cabinetHeight = this.stage.height() // 柜子的高度
      const cols = Math.max(...positions.map((p) => p.x)) + 1 // 根据数据动态计算总列数
      const rows = Math.max(...positions.map((p) => p.y)) + 1 // 根据数据动态计算总行数
      // 调整横向和纵向间距
      let horizontalSpacingFactor
      let verticalSpacingFactor
      if(this.width>1000){
        horizontalSpacingFactor = 1.032 // 横向间距放大倍数
        verticalSpacingFactor = 0.53 // 纵向间距缩小倍数
      }else{
        horizontalSpacingFactor = 0.6 // 横向间距放大倍数
        verticalSpacingFactor = 0.53 // 纵向间距缩小倍数
      }


      const cellWidth = (cabinetWidth / cols) * horizontalSpacingFactor // 调整横向间距
      const cellHeight = (cabinetHeight / rows) * verticalSpacingFactor // 调整纵向间距

      // 遍历点位，按行列布局计算位置
      positions.forEach((pos) => {
        let x, y

        if (this.width > 1000) {
          // 直接使用 positions 中的 x 和 y 坐标
          const col = pos.y  // 当前点位的列
          const row = pos.x  // 当前点位的行
          x = row * 2 * 18 // 调整偏移量，使其向左移动
          y = col * 2 * 18 // 调整偏移量，使其向上移动
          console.log(pos, '位置信息')
        } else {
          // 计算点位的实际位置，确保它们位于柜子显示区域内
          const col = pos.x // 当前点位的列
          const row = pos.y // 当前点位的行
          x = col * 3.2 * 12-85
          y = row *  2 * 12-1;
          // x = col * cellWidth - 100 // 调整偏移量，使其向左移动 这里之前是间距比较大的时候使用
          // y = row * cellHeight - 15 // 调整偏移量，使其向上移动
        }

        const labelText = pos.entityName // 对应的文字

        const point = new Image()
        point.src = pos.pointIcon
        point.onload = () => {
          const knovaImage = new Konva.Image({
            x: x + 6, // 适当的偏移确保点位不重叠
            y: y + 5, // 适当的偏移确保点位不重叠
            image: point,
            width: 29, // 增加宽度
            height: 28, // 增加高度
            draggable: false
          })

          // **绘制背景矩形**（以单元格大小为基础）
          const bgrect = new Konva.Rect({
            x: x,
            y: y,
            width: 40, // 增加宽度
            height: 46, // 增加高度
            cornerRadius: 5,
            stroke: 'white',
            strokeWidth: 2,
            fill: 'white'
          })
          this.layer.add(bgrect)
          this.bgrects[labelText] = bgrect

          // **普通矩形边框**（同样按照单元格尺寸）
          const rect = new Konva.Rect({
            x: x + 2,
            y: y + 2,
            width: 40 - 5, // 增加宽度
            height: 46 - 4, // 增加高度
            cornerRadius: 5,
            stroke: 'red',
            strokeWidth: 2,
            fill: 'white'
          })
          this.layer.add(rect)
          this.rects[labelText] = rect

          // 添加图片
          this.layer.add(knovaImage)

          // **绘制点位的文字**（确保与背景矩形不重叠）
          const text = new Konva.Text({
            x: x + 8, // 适当的偏移，确保文字不与背景矩形重叠
            y: y + 46 - 15, // 文字放在底部
            fontSize: 14,
            text: labelText,
            fontFamily: 'Calibri',
            fill: 'red'
          })
          this.layer.add(text)
          this.texts[labelText] = text

          // **选中覆盖矩形**（保持与背景矩形相同的尺寸）
          const redrect = new Konva.Rect({
            x: x,
            y: y,
            width: 40, // 增加宽度
            height: 46, // 增加高度
            cornerRadius: 5,
            fill: 'rgba(97, 97, 97, 0.5)', // 半透明灰色
            visible: false, // 初始状态隐藏
            listening: false
          })
          this.layer.add(redrect)
          this.redrects[labelText] = redrect

          // **对号文字（表示选中）**
          const redtext = new Konva.Text({
            x: x + 40 / 2 - 5, // 水平居中
            y: y + 46 / 2 - 5, // 垂直居中
            fontSize: 13,
            text: '✔',
            fontFamily: 'Arial',
            fill: 'white',
            align: 'center',
            visible: false, // 初始隐藏状态
            listening: false
          })
          this.layer.add(redtext)
          this.redtexts[labelText] = redtext

          // 如果初始化时有选中的点位
          if (
            Array.isArray(this.selectPoints) &&
            this.selectPoints.length > 0
          ) {
            if (this.selectPoints.includes(pos.entityId)) {
              // 设置选中状态
              this.redrects[labelText].visible(true)
              this.redtexts[labelText].visible(true)
              this.pointIdList.push(pos.entityId) // 添加ID
            }
          }

          this.layer.draw() // 刷新画布
        }
      })
    }

  }
}
</script>

<style scoped lang="scss">
#container {
  width: 100%;
  height: 100%;
}

.mapdata {
  width: 100%;
  height: 100%;
  display: flex;
}

.left {
  flex: 1;
  display: flex;
  flex-direction: column;
}
</style>
