<template>
  <div class="edit-add-detail detail">
    <div class="edit-add-detail-new-content">
      <div class="form-content">
        <el-form
          ref="formInfo"
          :model="detailForm"
          label-position="right"
          label-suffix="："
        >
          <div class="rows">
            <div class="rows-left">
              <div class="rows-hr"></div>
            </div>
            <div class="rows-title">
              <div class="text-overflow">巡查点位信息</div>
            </div>
          </div>
          <el-row :gutter="24" style="flex-wrap: wrap;margin-left: 80px" type="flex">
            <el-col :span="12">
              <el-form-item label="所属路段">
                <span :title="detailForm.roadName" class="text">
                  {{ detailForm.roadName || '-' }}
                </span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" style="flex-wrap: wrap;margin-left: 80px" type="flex">
            <el-col :span="24">
              <el-form-item label="点位名称">
                <span :title="detailForm.name" class="text">
                  {{ detailForm.name || '-' }}
                </span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24" style="flex-wrap: wrap;margin-left: 80px" type="flex">
            <el-col :span="12">
              <el-form-item label="点位类型">
                <span :title="dictionaryEscape('xcdwlx', detailForm.type)" class="text">
                  {{ dictionaryEscape('xcdwlx', detailForm.type) || '-' }}
                </span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" style="flex-wrap: wrap;margin-left: 80px" type="flex">
            <el-col :span="12">
              <el-form-item label="点位级别">
                <span :title="dictionaryEscape('dwjb', String(detailForm.pointLevel))" class="text">
                  {{ dictionaryEscape('dwjb', String(detailForm.pointLevel)) || '-' }}
                </span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" style="flex-wrap: wrap;margin-left: 80px" type="flex">
            <el-col :span="12">
              <el-form-item label="巡检周期">
                <span :title="dictionaryEscape('xjzq', String(detailForm.inspectionCycle))" class="text">
                  {{ dictionaryEscape('xjzq', String(detailForm.inspectionCycle)) || '-' }}
                </span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" style="flex-wrap: wrap;margin-left: 80px" type="flex">
            <el-col :span="12">
              <el-form-item label="内容">
                <span :title="detailForm.content" class="text">
                  {{ detailForm.content || '-' }}
                </span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24" style="flex-wrap: wrap;margin-left: 80px" type="flex">
            <el-col :span="12">
              <el-form-item label="点位类别">
                <span :title="dictionaryEscape('xcdwlb', detailForm.category)" class="text">
                  {{ dictionaryEscape('xcdwlb', detailForm.category) || '-' }}
                </span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" style="flex-wrap: wrap;margin-left: 80px" type="flex">
            <el-col :span="12">
              <el-form-item label="方向">
                <span :title="dictionaryEscape('xsfx', detailForm.direction)" class="text">
                  {{ dictionaryEscape('xsfx', detailForm.direction) || '-' }}
                </span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" style="flex-wrap: wrap;margin-left: 80px" type="flex">
            <el-col :span="12">
              <el-form-item label="点位桩号">
               <span :title="detailForm.pegVal" class="text">
                  {{ detailForm.pegVal || '-' }}
                </span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24" style="flex-wrap: wrap;margin-left: 80px" type="flex">
            <el-col :span="12">
              <el-form-item label="经度">
               <span :title="detailForm.lng" class="text">
                  {{ detailForm.lng || '-' }}
                </span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" style="flex-wrap: wrap;margin-left: 80px" type="flex">
            <el-col :span="12">
              <el-form-item label="纬度">
               <span :title="detailForm.lat" class="text">
                  {{ detailForm.lat || '-' }}
                </span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" style="flex-wrap: wrap;margin-left: 80px" type="flex">
            <el-col :span="12">
              <el-form-item label="登记时间">
               <span :title="detailForm.createTime" class="text">
                  {{ detailForm.createTime || '-' }}
                </span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import {dictionaryEscape} from '@/utils/dictionary'
import {tableDetail} from '@/api/patrolAndRescue/infoMgmtPatrolsRescues/inspectionPointMgmt'
import PubSub from 'pubsub-js'
import MineMap from '@/components/MineMap/index.vue'

export default {
  name: 'DetailPage',
  props: {
    componentName: {
      default: 'TablePage',
      type: String
    }
  },
  components: {MineMap},
  data() {
    return {
      detailForm: {},
      mapLoading: true, // 地图加载loading
      mapDefaultOptions: {
        center: [106.5507, 29.5647] /*地图中心点*/,
        zoom: 6.5 /*地图默认缩放等级*/
      },
      pubSub: null,
      markers: []
    }
  },
  watch: {
    componentName(newVal) {
      if (newVal === this.$options.name) {
        this.openPage()
      } else {
        this.closePage()
      }
    }
  },
  mounted() {
    this.pubSub = PubSub.subscribe('DetailPage', (_, data) => {
      if (data.id) this.getDetail(data.id)
    })
  },
  methods: {
    dictionaryEscape,

    r() {
      this.$refs.mineMap?.resetMap() // 重置地图
    },

    // 打开页面执行
    openPage() {
      this.$refs.mineMap?.map?.resize() // 根据地图的 container 元素的尺寸调整地图的大小。
    },

    // 关闭页面执行
    closePage() {
      const {pubSub} = this
      // 重置组件数据
      Object.assign(this.$data, this.$options.data.call(this), {pubSub})
      this.$refs.mineMap?.resetMap(_ => this.mapLoading = false) // 重置地图
      this.$nextTick(_ => {
        this.$refs.formInfo.$el.scrollTop = 0
      })
    },

    // 地图挂载后
    mapLoad() {
      this.mapLoading = false
    },

    // 获取详情
    async getDetail(id) {
      let {lng, lat, name, ...detailForm} = await tableDetail(id)

      // 创建点位并聚焦点位
      if (Number.isFinite(lng) && Number.isFinite(lat)) {
        this.$nextTick(_ => {
          this.customTagPoints([lng, lat], name)
          this.$refs.mineMap.map.setCenter([lng, lat])
          this.$refs.mineMap.map.panTo([lng, lat], {
            duration: 6000, // 动画过渡时间
            zoom: 14 // 新的缩放级别
          })
        })
      }

      this.detailForm = {...detailForm, name, lng, lat}
    },

    // 添加点位
    customTagPoints(lngLat = [], pointNam = '') {
      // 创建一个 div 元素并设置其 HTML 内容
      const el = document.createElement('div')
      el.className = 'custom-marker' //custom-marker为自定义的css类名
      el.innerHTML = `
            <div class="custom-icon"></div>
            <div class="custom-label">巡查点位${pointNam ? `（${pointNam}）` : ''}</div>
        `

      // 创建一个新的标记并将自定义 HTML 元素添加进去
      const marker = new this.$refs.mineMap.mineMap.Marker(el, {
        anchor: 'left',
        offset: [-24, -24] // offset参数为标注点相对于其左上角偏移像素大小
      })
        .setLngLat(lngLat)
        .addTo(this.$refs.mineMap.map)
      this.markers.push(marker)
    }
  },
  beforeDestroy() {
    // 在组件销毁之前 清除订阅消息
    PubSub.unsubscribe(this.pubSub)
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/element-variables";

.edit-add-detail {
  .edit-add-detail-new-content {
    width: 100%;
    display: flex;
    height: 0;
    flex: 1;
    column-gap: 20px;

    .form-content {
      flex: 1;
    }

    .map-content {
      flex: 2.5;
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid darken($--system-border-color2, 10%);

      /* 自定义标记样式 */
      ::v-deep .mine-map {

        /* 自定义标记样式 */
        .custom-marker {
          display: flex;
          align-items: center;
          cursor: pointer;

          .custom-icon {
            width: 48px;
            height: 48px;
            background-size: cover;
            background-image: url('~@/assets/img/patrolAndRescue/inspection-points-icon.png'); /* 替换为你的图标 URL */
          }

          .custom-label {
            box-shadow: 0 0 6px rgba($--color-warning, 0.8);
            background-color: rgba(darken($--color-warning, 70%), 0.9);
            padding: 6px 8px;
            border-radius: 3px;
            font-size: 16px;
            color: $--color-warning;
          }
        }
      }
    }
  }
}
</style>
