<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="margin-left: 80px">
            <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="margin-left: 80px">
            <el-col :span="12">
              <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="margin-left: 80px">
            <el-col :span="12">
              <el-form-item label="场所类型">
                                <span :title="dictionaryEscape('jyd-cslx', detailForm.type)" class="text">
                                    {{ dictionaryEscape('jyd-cslx', detailForm.type + '') || '-' }}
                                </span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" style="margin-left: 80px">
            <el-col :span="12">
              <el-form-item label="驻点类型">
                                <span :title="detailForm.type" class="text">
                                    {{ detailForm.type === 1 ? '巡查驻点' : '-' }}
                                </span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" style="margin-left: 80px">
            <el-col :span="24">
              <el-form-item label="所属巡查队伍">
                                <span :title="detailForm.teamName" class="text">
                                        {{ detailForm.teamName || '-' }}
                                </span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24" style="margin-left: 80px">
            <el-col :span="12">
              <el-form-item label="所属监控中心电话">
                                <span :title="detailForm.monitorTel" class="text">
                                    {{ detailForm.monitorTel || '-' }}
                                </span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24" style="margin-left: 80px">
            <el-col :span="12">
              <el-form-item label="所管辖区交通综合执法大队">
                                <span :title="detailForm.managementD" class="text">
                                    {{ detailForm.managementD || '-' }}
                                </span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" style="margin-left: 80px">
            <el-col :span="12">
              <el-form-item label="所管辖区交通综合执法支队">
                                <span :title="detailForm.managementZ" class="text">
                                    {{ detailForm.managementZ || '-' }}
                                </span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" style="margin-left: 80px">
            <el-col :span="12">
              <el-form-item label="所管辖区交巡警大队">
                                <span :title="detailForm.trafficPoliceD" class="text">
                                    {{ detailForm.trafficPoliceD || '-' }}
                                </span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" style="margin-left: 80px">
            <el-col :span="12">
              <el-form-item label="所管辖区交巡警支队">
                                <span :title="detailForm.trafficPoliceZ" class="text">
                                    {{ detailForm.trafficPoliceZ || '-' }}
                                </span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24" style="margin-left: 80px">
            <el-col :span="6">
              <el-form-item label="点位桩号">
                                <span :title="detailForm.peg" class="text">
                                    {{ detailForm.peg || '-' }}
                                </span>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="点位桩号附加">
                                <span :title="detailForm.pegAdd" class="text">
                                    {{ detailForm.pegAdd || '-' }}
                                </span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <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="margin-left: 80px">-->
          <!--            <el-col :span="12">-->
          <!--              <el-form-item label="方向">-->
          <!--                                <span :title="detailForm.direction" class="text">-->
          <!--                                    {{ detailForm.direction || '-' }}-->
          <!--                                </span>-->
          <!--              </el-form-item>-->
          <!--            </el-col>-->
          <!--          </el-row>-->
          <el-row :gutter="24" style="margin-left: 80px">
            <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="margin-left: 80px">
            <el-col :span="12">
              <el-form-item label="纬度">
                                <span :title="detailForm.lat" class="text">
                                    {{ detailForm.lat || '-' }}
                                </span>
              </el-form-item>
            </el-col>
          </el-row>
          <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="margin-left: 80px">
            <el-col :span="12">
              <el-form-item label="负责人">
                                <span :title="detailForm.linkName" class="text">
                                    {{ detailForm.linkName || '-' }}
                                </span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" style="margin-left: 80px">
            <el-col :span="12">
              <el-form-item label="负责人联系电话">
                                <span :title="detailForm.linkTel" class="text">
                                    {{ detailForm.linkTel || '-' }}
                                </span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" style="margin-left: 80px">
            <el-col :span="12">
              <el-form-item label="值班电话">
                                <span :title="detailForm.dutyTel" class="text">
                                    {{ detailForm.dutyTel || '-' }}
                                </span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" style="margin-left: 80px">
            <el-col :span="12">
              <el-form-item label="值班人数">
                                <span :title="detailForm.dutyNum" class="text">
                                    {{ detailForm.dutyNum || '-' }}
                                </span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24" style="margin-left: 80px">
            <el-col :span="12">
              <el-form-item label="轮班人数">
                                <span :title="detailForm.turnNum" class="text">
                                    {{ detailForm.turnNum || '-' }}
                                </span>
              </el-form-item>
            </el-col>
          </el-row>


          <el-row :gutter="24" style="margin-left: 80px">
            <el-col :span="12">
              <el-form-item label="救援服务电话">
                                <span :title="detailForm.rescusTel" class="text">
                                    {{ detailForm.rescusTel || '-' }}
                                </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/infoMgmtPatrolsManage'
import MineMap from '@/components/MineMap/index.vue'
import PubSub from 'pubsub-js'

export default {
  name: 'DetailPage',
  components: {MineMap},
  props: {
    componentName: {
      default: 'DetailPage',
      type: String
    }
  },
  data() {
    return {
      detailForm: {},
      pubSub: null,
      map: null,
      mapLoading: true,
      mapDefaultOptions: {
        center: [106.5507, 29.5647] /*地图中心点*/,
        zoom: 9 /*地图默认缩放等级*/
      },
      markers: []
    }
  },
  computed: {},
  watch: {
    componentName: {
      handler(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,
    // 打开页面执行
    openPage() {
      this.$refs.mineMap?.map?.resize()

    },

    // 关闭页面执行
    closePage() {
      // 重置组件数据
      Object.assign(this.$data, this.$options.data.call(this), {
        pubSub: this.pubSub
      })
      this.$refs.mineMap?.resetMap(_ => this.mapLoading = false) // 重置地图
      this.$nextTick((_) => {
        this.$refs.formInfo.$el.scrollTop = 0
      })
    },
    mapLoad() {
      this.mapLoading = false
    },
    // 获取详情
    async getDetail(id) {
      const response = await tableDetail(id)
      this.detailForm = {
        ...response,
        roadName: response.roadName || this.detailForm.roadName
      }
      console.log(this.detailForm, '15545454')
      const {lng, lat} = this.detailForm
      this.$nextTick(_ => {
        this.customTagPoints([lng, lat])
        this.$refs.mineMap.map.setCenter([lng, lat])
        this.$refs.mineMap.map.panTo([lng, lat], {
          duration: 6000, // 动画过渡时间
          zoom: 14 // 新的缩放级别
        })
      })
    },
    // 自定义标记点
    customTagPoints(lnglat = []) {
      this.markers[this.markers.length - 1]?.remove()
      // 自定义点标记的内部DOM元素
      let el = document.createElement('div')
      el.className = 'marker-tip'
      // Marker构造函数接收两个参数，一个为自定义的DOM元素，一个是Object参数，其中包括偏移量等
      let marker = new this.$refs.mineMap.mineMap.Marker(el, {
        anchor: 'center',
        offset: [0, 0] // offset参数为标注点相对于其左上角偏移像素大小

      })
        // 调用setLngLat方法指定Marker的坐标位置
        .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-new-content {
  width: 100%;
  display: flex;
  height: 0;
  flex: 1;
  column-gap: 20px;

  .form-content {
    flex: 2;
  }

  .map-content {
    flex: 3;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: $--system-border-color3 0.5px 0.5px 5px 1px;

    ::v-deep.marker-tip {
      position: relative;
      background-image: url('~@/assets/img/patrolAndRescue/inspection-points-icon.png');
      background-size: cover;
      width: 48px !important;
      height: 48px !important;
      z-index: 999;

      &::after {
        position: absolute;
        content: '救援点位置';
        left: 100%;
        top: 8px;
        width: 80px;
        height: 25px;
        font-size: 16px;
        color: $--color-warning;
        text-align: center;
        line-height: 25px;
        padding: 5px 10px;
        background-color: rgba(darken($--color-warning, 70%), 0.9);
        border-radius: 3px;
        box-shadow: 0 0 6px rgba($--color-warning, 0.8);
        border: none;
        z-index: 999;
      }
    }
  }
}
</style>
