<template>
  <div class="map-container">
    <div id="map"></div>
    <el-dialog
      v-if="isShowDialog"
      title=""
      class="screen-dialog"
      :visible.sync="isShowDialog"
      width="650px"
      :modal-append-to-body="false"
      center
      :modal="false"
    >
      <div class="top_title">网络举报事件</div>
      <div class="dialog_ctn">
        <el-row>
          <el-col :span="24">
            <div class="col_title">被举报对象</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="col_ctn">{{ currentMsg.jbdx }}</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <div class="col_title">苏州编号</div>
          </el-col>
          <el-col :span="6">
            <div class="col_title">举报时间</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <div class="col_ctn_little">{{ currentMsg.szbh }}</div>
          </el-col>
          <el-col :span="8">
            <div class="col_ctn_little">{{ currentMsg.jbsj }}</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="col_title">地址</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="col_ctn_little">
              {{ currentMsg.dz }}
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="col_title">举报内容</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="col_ctn_little">{{ currentMsg.jbnr }}</div>
          </el-col>
        </el-row>
      </div>
      <div class="dialogClose" @click="isShowDialog = false">关闭</div>
    </el-dialog>
  </div>
</template>

<script>
import mapboxgl from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css'
import { reportList, reportInfo } from '@/api/zongzhi/manage'
export default {
  data() {
    return {
      isShowDialog: false,
      // 展示的内容
      currentMsg: {
        jbdx: '电子科技有限公司',
        szbh: 'SZ2023',
        jbsj: '2023-07-31',
        dz: '太仓人民政府',
        jbnr: '偷电'
      },
      map: null,
      pointList: [
        { id: 1, lng: 121.136909, lat: 31.463778, title: '太仓人民政府' },
        { id: 2, lng: 121.086958, lat: 31.460883, title: '苏州吉闽物流有限公司' },
        { id: 3, lng: 121.05452, lat: 31.515175, title: '太仓星兴亮机械设备有限公司' },
        { id: 4, lng: 121.127801, lat: 31.472566, title: '兴和电子有限公司' },
        { id: 5, lng: 121.142345, lat: 31.477655, title: '太仓裕盛体育用品有限公司' }
      ]
    }
  },
  async mounted() {
    let data = await reportList()
    let arr = []
    data.data.map((item)=>{
      let obj = {}
      obj.id = item.id
      obj.lng = item.longitude
      obj.lat = item.latitude
      obj.title = item.jbdx
      arr.push(obj)
    })
    this.pointList = arr
    const _this = this
    mapboxgl.accessToken = 'pk.eyJ1Ijoic2hhcmVhbGV4IiwiYSI6ImNsaXNhZmRjbTFhbnczZmxib3h1OW05YXYifQ.PhlKv60ar3K359d8x2yBPw'
    const map = new mapboxgl.Map({
      container: 'map', // 地图容器的id或元素
      style: 'mapbox://styles/sharealex/cl3ntpire000314ookb5o81oo', // 地图样式
      center: [121.136909, 31.463778], // 中心点经纬度
      zoom: 14.5,
      pitch: 50
    })

    // 地图加载完毕
    map.on('load', function() {
      // 地图点位
      _this.pointList.forEach(item => {
        const el = document.createElement('div')
        el.className = 'map-marker'
        el.innerHTML = `
        <img  class="marker-img" src= "${require('@/assets/ecosphere/point.png')}" />
        <div  class="marker-text">${item.title}</div>
    `
        new mapboxgl.Marker(el)
          .setLngLat([item.lng, item.lat])
          .addTo(map)
        el.addEventListener('click', () => {
          // 点击事件里去修改内容
          reportInfo(item.id).then(res=>{
            let { jbdx, jbbh, jbTime, address, content } = res.data
            _this.currentMsg.jbdx = jbdx
            _this.currentMsg.szbh = jbbh
            _this.currentMsg.jbsj = jbTime
            _this.currentMsg.dz = address
            _this.currentMsg.jbnr = content
            _this.isShowDialog = true
          })
        })
      })
      map.addLayer({
        id: 'lou-extrusion',
        type: 'fill-extrusion',
        source: {
          type: 'geojson',
          data: require('@/utils/mapGeojson/1.json')
        },
        paint: {
          // 设置填充颜色
          'fill-extrusion-color': '#2998F8',
          // 从属性中获得高度，这里用的是height字段
          'fill-extrusion-height': ['get', 'height'],
          'fill-extrusion-base': 0,
          // 透明度设置
          'fill-extrusion-opacity': 0.7
        }
      })
    })
    this.map = map
  },
  methods: {}
}
</script>

<style lang='scss' scoped>
.map-container{
      width: 100%;
  height: $ScreenHeight;
  #map{
    height: 100%;
    width: 100%;
    }
}
.screen-dialog {
  left: 30%;
  right: 30%;
  top: 10%;
  bottom: 20%;
  z-index: 9999;
  ::v-deep .el-dialog__header {
    background: rgba(255, 255, 255, 0);
  }
  ::v-deep .el-dialog {
    background: url('~@/assets/dialog/wlglDialog/bg.png') no-repeat 100% 100%;
    //width: 1260px;
    height: 590px;
    //padding-top:20px;
    background-size: cover;
  }
  ::v-deep .el-dialog__headerbtn {
    top: 1;
  }
  ::v-deep .el-dialog__footer {
    background: rgba(255, 255, 255, 0);
  }
  .top_title {
    font-family: SourceHanSansCN-Bold;
    font-size: 28px;
    letter-spacing: 1px;
    color: #ffffff;
    margin-top: -35px;
    margin-left: 20px;
  }
  .dialog_ctn {
    padding: 60px 0 0 60px;
  }
  .col_title {
    font-family: SourceHanSansCN-Regular;
    font-size: 28px;
    color: #1dd1fe;
  }
  .col_ctn {
    font-family: SourceHanSansCN-Bold;
    font-size: 30px;
    color: #ffe90c;
    margin: 13px 0;
  }
  .col_ctn_little {
    font-family: DIN-Medium;
    font-size: 28px;
    color: #ffffff;
    margin: 13px 0;
  }
  .dialogClose {
    text-align: center;
    width: 160px;
    height: 50px;
    position: absolute;
    bottom: 25px;
    left: 261px;
    background: url('~@/assets/dialog/btn-bg.png') no-repeat 100% 100%;
    font-family: SourceHanSansCN-Regular;
    font-size: 28px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 50px;
    letter-spacing: 2px;
    color: #ffffff;
    cursor: pointer;
  }
  .dialogClose:hover {
    background: url('~@/assets/dialog/btn-bg-act.png') no-repeat 100% 100%;
  }
}
.dialog-title {
  text-align: center;
  width: 756px;
  margin: 0 auto;
  font-family: SourceHanSansCN-Bold;
  font-size: 36px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 38px;
  letter-spacing: 0;
  color: #ffe850;
}
.dialog-explain {
  margin-top: 39px;
  height: 125px;
  background: url('~@/assets/dialog/信息-bg.png') no-repeat 100% 100%;
}
.dialog-content {
  width: 1073px;
  max-height: 500px;
  margin: 20px auto;
  font-family: SourceHanSansCN-Medium;
  font-size: 30px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 50px;
  letter-spacing: 2px;
  color: #ffffff;
}
</style>
