<!--
 * @Author: your name
 * @Date: 2021-06-03 10:55:54
 * @LastEditTime: 2022-06-21 14:34:30
 * @LastEditors: 许宏杰
 * @Description: In User Settings Edit
 * @FilePath: \MuduAPP\src\views\Leader\Analysis\Index.vue
-->
<template>
  <div class="park-container">
    <div class="tab-main">
      <div
        class="tab-item"
        :class="active == index ? 'activeTab' : ''"
        v-for="(item, index) in tabList"
        :key="item.value"
        @click="changeTab(item.name, index)"
      >
        {{ item.name }}

        <div class="tab-line" v-show="active == index"></div>
      </div>
    </div>
    <div class="container-box" ref="targetElement">
      <div class="tab0 tab-type" v-show="active == 0">
        <div class="map">
          <div id="newMaps"></div>
        </div>
        <div class="timer-shaft">
          <div class="timer-item">
            <div class="circle"></div>
            <div class="circle-line"></div>
            <div class="data-mian">
              <div class="timer-line-title enterprise-name">
                {{ dataList.parkName }}
              </div>
              <div class="address-cell">
                <div class="cell-item">
                  <div class="item-icon icon-address"></div>
                  <div class="item-data">{{ dataList.parkAddress }}</div>
                </div>
                <div class="cell-item">
                  <div class="item-icon"></div>
                  <div class="item-data">{{ dataList.homeLocation }}</div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="timer-item"
            v-for="(item, index) in handlerParkMan"
            :key="index"
          >
            <div class="circle"></div>
            <div class="circle-line"></div>
            <div class="data-mian">
              <div class="timer-line-title">
                {{ item.type }}
              </div>
              <div class="link-man">
                <div class="man-box">
                  <div>
                    <div class="linkMan-icon"></div>
                    <div class="linkMan-text">{{ item.name }}</div>
                  </div>
                  <div>
                    <div class="linkMan-tel"></div>
                    <a
                      :href="'tel:' + item.phone"
                      style="color: #177fd4; text-decoration: underline"
                      class="linkMan-text"
                      >{{ item.phone }}</a
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="timer-item">
            <div class="circle"></div>
            <div class="circle-line"></div>
            <div class="data-mian">
              <div class="timer-line-title">网格员</div>
              <div
                class="link-man"
                v-for="(item, index) in handlerNetMan"
                :key="index"
                style="padding-bottom: 0.3rem"
              >
                <div class="man-box">
                  <div>
                    <div class="linkMan-icon"></div>
                    <div class="linkMan-text">{{ item.name }}</div>
                  </div>
                  <div>
                    <div class="linkMan-tel"></div>
                    <a
                      :href="'tel:' + item.phone"
                      style="color: #177fd4; text-decoration: underline"
                      class="linkMan-text"
                      >{{ item.phone }}</a
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="timer-item">
            <div class="circle"></div>
            <div class="data-mian" style="padding-bottom: 0.1rem">
              <div class="timer-line-title" style="margin-bottom: 0.1rem">
                应急物资
              </div>
              <div class="grid-view">
                <div
                  class="grid-item"
                  v-for="(item, index) in options"
                  :key="index"
                >
                  <div class="child-item">
                    <img
                      :src="
                        require('@/assets/image/vxEwm/grid' +
                          (index + 1) +
                          '.png')
                      "
                      alt=""
                    />
                    <div class="grid-item-name">{{ item.name }}</div>
                    <div class="grid-item-num">{{ item.label || 0 }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="statistical" v-if="active == 1">
        <statistical
          :dataList="dataList"
          :parkOrgId="dataList.parkOrgId"
        ></statistical>
      </div>
      <enterpriseList
        v-if="active == 2"
        :parkProfileId="dataList.parkOrgId"
      ></enterpriseList>
    </div>
  </div>
</template>

<script>
import L from 'leaflet'
import 'proj4'
import 'proj4leaflet'
import '@/util/leaflet.ChineseTmsProviders.js'
import '@/util/leaflet.mapCorrection.min.js'
import mapJson from '@/assets/newmap/index.js'
import statistical from './components/statistics.vue'
import enterpriseList from '@/views/vxEwm/garden/park/components/enterpriseList.vue'
import { Toast } from 'vant'
import { getProfile, listPrincipal, listMaterials } from '@/api/mudu/park.js'
export default {
  data() {
    return {
      topDistance: 0,
      tabList: [
        { name: '园区概况', value: 0 },
        { name: '统计分析', value: 1 },
        { name: '企业列表', value: 2 },
      ],
      options: [
        {
          name: '灭火器',
          eng: 'fireExtinguisher',
          label: '',
        },
        {
          name: '消防栓',
          eng: 'fireHydrant',
          label: '',
        },
        {
          name: '喷淋',
          eng: 'spray',
          label: '',
        },
        {
          name: '安全帽',
          eng: 'helmet',
          label: '',
        },
        {
          name: '防护服',
          eng: 'protectiveClothing',
          label: '',
        },
        {
          name: '雪糕筒',
          eng: 'iceCreamCone',
          label: '',
        },
      ],

      active: 0,
      parkName: '',
      parkId: null,
      //地图
      map: null,
      //底图
      basemap: null,
      mapLayer: {
        mapLayer1: null,
        mapLayer2: null,
        mapLayer3: null,
      },
      face: null,
      center: null,
      goodsObj: {},
      list: [],
      total: 0,
      querParams: {
        pageNum: 1,
        pageSize: 100,
        parkProfileId: undefined,
      },
      dataList: {},
      //负责人
      fuzeList: [],
      loading: null,
      //tabs
      tabListChange: false,
    }
  },

  components: {
    statistical,
    enterpriseList,
  },
  computed: {
    handlerParkMan() {
      return this.fuzeList.filter((item) => item.type == '园区负责人')
    },
    handlerNetMan() {
      return this.fuzeList.filter((item) => item.type == '网格员')
    },
  },
  created() {
    mapJson.forEach((item) => {
      if (item.parkOrgId == this.$route.query.id) {
        this.querParams.parkProfileId = item.id
      }
    })

    this.$store.commit('SET_PERK_ID', this.$route.query.id)

    this.loading = Toast.loading('加载中...')
    this.$nextTick(() => {
      this.getList()
      this.initMap()
      this.getWuzi()
      this.getFzr()
      this.loading.clear()
    })
  },
  methods: {
    changeTab(name, index) {
      if (this.active == index) return
      this.active = index
      this.$nextTick(() => {
        // 滚动页面至顶部
        this.$refs.targetElement.scrollTo({
          top: 0,
          behavior: 'smooth', // 使用平滑滚动效果
        })
      })
    },
    //园区信息
    getList() {
      getProfile(this.querParams.parkProfileId).then((res) => {
        this.dataList = res.data
        document.title = this.dataList.parkName || '企业' //修改浏览器标题
      })
    },
    //应急物资
    getWuzi() {
      listMaterials(this.querParams).then((res) => {
        let arr = res.rows[0]
        for (let key in arr) {
          this.options.forEach((values, index) => {
            if (values.eng == key) {
              this.options[index].label = arr[key]
            }
          })
        }
      })
    },
    //园区负责人
    getFzr() {
      listPrincipal(this.querParams).then((res) => {
        this.fuzeList = res.rows
        console.log(this.fuzeList, '负责人')
      })
    },

    initMap(id, name) {
      this.map = L.map('newMaps', {
        center: [31.238343492627237, 120.48826217651367],
        crs: L.CRS.Baidu,
        zoom: 13,
        attributionControl: false,
        zoomControl: false,
        dragging: false,
        doubleClickZoom: false,
        scrollWheelZoom: false,
      })
      //底图
      this.basemap = L.tileLayer
        .chinaProvider('Baidu.Normal.Map', {
          maxZoom: 18,
          minZoom: 5,
        })
        .addTo(this.map)
      this.map.createPane('mapLayer1')
      this.map.getPane('mapLayer1').style.zIndex = 501
      this.map.getPane('mapLayer1').style.pointerEvents = 'none'
      this.map.createPane('mapLayer2')
      this.map.getPane('mapLayer2').style.zIndex = 502
      this.map.getPane('mapLayer2').style.pointerEvents = 'none'
      this.map.createPane('mapLayer3')
      this.map.getPane('mapLayer3').style.zIndex = 503
      this.map.getPane('mapLayer3').style.pointerEvents = 'none'

      //获取geoJSON数据的一个面的中心点可以用onEachFeature获取每个图层
      //也可以把数据放到一个要素组里面
      //也可以直接用数据去接收
      this.mapLayer.mapLayer1 = L.featureGroup()
      this.mapLayer.mapLayer2 = L.featureGroup()
      let parkId = this.$route.query.id
      let parkName = ''
      mapJson.forEach((item) => {
        if (item.parkOrgId == parkId) {
          parkName = item.parkName
        }
      })
      if (!parkName) {
        this.$message.error('暂无该工业园面数据...')
        return
      }
      this.setParks(id, parkName)
    },
    setParks(parkOrgId, name) {
      this.mapLayer.mapLayer1.clearLayers() //清除该图层中数据
      this.parkName = name
      let mapObj = mapJson.filter((item) => item.parkName == name)
      if (mapObj.length == 0) {
        this.$message.error('暂无该工业园面数据...')
        return
      }

      let mapGeoJons = L.geoJSON(mapObj[0].floorLayer, {
        pane: 'mapLayer1',
        style: function (feature) {
          return {
            color: '#177FD4',
            weight: 2,
            fillColor: '#177FD4',
            fillOpacity: 0.2,
            dashArray: '6,4',
          }
        },
      }).addTo(this.mapLayer.mapLayer1)

      let bounds = mapGeoJons.getBounds()
      let latlng = bounds.getCenter()

      var myIcon = L.divIcon({
        className: 'map-icon-box',
        html: `<div class="park-icon">
          <div class="icon"></div>
          <div class="icon-name">${this.parkName}</div>
          </div >`,
        iconSize: [200, 0],
      })

      L.marker([latlng.lat, latlng.lng], { icon: myIcon }).addTo(
        this.mapLayer.mapLayer1
      )

      this.face = L.geoJSON(mapObj[0].parkLayer, {
        pane: 'mapLayer2',
        style: function (feature) {
          var backgroundColor
          if (feature.properties.level === '低风险') {
            backgroundColor = '#4CBAF3'
          } else if (feature.properties.level === '一般风险') {
            backgroundColor = '#FFD619'
          } else if (feature.properties.level === '较大风险') {
            backgroundColor = '#FF9600'
          } else {
            backgroundColor = '#E8B25F'
          }
          return {
            color: backgroundColor,
            weight: 1,
            fillColor: backgroundColor,
            fillOpacity: 1,
          }
        },
        onEachFeature: (feature, layer) => {
          // console.log(feature)
          let name = feature.properties.name
          // 获取面的中心点
          let bounds = layer.getBounds()
          let latlng = bounds.getCenter()
          // console.log(latlng)
          let myIcon1 = L.divIcon({
            className: 'layerText',
            html: `
              <div class='layerItem'>${name ? name : ''}</div>  `,
            iconSize: name ? [name.length + 60, 20] : [],
            // iconAnchor: [name.length / 2, 34]
          })
          L.marker(latlng, {
            pane: 'mapLayer3',
            icon: myIcon1,
          }).addTo(this.mapLayer.mapLayer1)
        },
      }).addTo(this.mapLayer.mapLayer1)
      if (name == '金星富民置业工业园') {
        this.map.setView(this.face.getBounds().getCenter(), 17)
      } else if (name == '金桥汽配产业园') {
        this.map.setView(this.face.getBounds().getCenter(), 18)
      } else if (name == '尧峰工业小区') {
        this.map.setView(this.face.getBounds().getCenter(), 18)
      } else if (name == '木渎南金桥工业园(南金桥工业园)') {
        this.map.setView(this.face.getBounds().getCenter(), 18)
      } else if (name == '新华工业区') {
        this.map.setView(this.face.getBounds().getCenter(), 17)
      } else if (name == '木胥东路39号工业园') {
        this.map.setView(this.face.getBounds().getCenter(), 18)
      }

      this.mapLayer.mapLayer1.addTo(this.map)
    },
  },
}
</script>

<style lang="scss" scoped>
div {
  text-align: left;
}
.park-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tab-main {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 0.4rem;
  & > div {
    flex: 1;
    font-size: 0.25rem;
    color: #666666;
    text-align: center;
    font-weight: bold;
    position: relative;
    .tab-line {
      position: absolute;
      bottom: -0.35rem;
      left: 50%;
      transform: translateX(-50%);
      width: 0.65rem;
      height: 0.26rem;
      background: url('~@/assets/image/vxEwm/tab-line.png');
      background-size: 100% 100%;
    }
  }
  .activeTab {
    color: #177fd4;
  }
}
.container-box {
  height: calc(100% - 0.5rem);
  overflow-y: auto;
  padding: 0 0.1rem;
}
.tab-type {
  padding-bottom: 0.2rem;
  .map {
    overflow: hidden;
    height: 5.58rem;
    border-radius: 0.48rem 0.48rem 0.48rem 0.48rem;
    border: 0.02rem solid #add5fe;
    #newMaps {
      height: 100%;
      width: 100%;
    }
  }

  .timer-shaft {
    margin-top: 0.4rem;
    .timer-item {
      position: relative;
      .circle {
        position: absolute;
        left: 0;
        top: 0.08rem;
        z-index: 2;
        width: 0.33rem;
        height: 0.34rem;
        background: url('~@/assets/image/vxEwm/circle.png');
        background-size: 100% 100%;
      }
      .circle-line {
        position: absolute;
        left: calc(0.33rem / 2.3);
        top: 0.33rem;
        z-index: 1;
        width: 0.03rem;
        height: calc(100%);
        background: url('~@/assets/image/vxEwm/circle-line.png');
        background-size: 100% 100%;
      }
      .data-mian {
        box-sizing: border-box;
        padding-left: 0.33rem;
        width: 100%;
        .timer-line-title {
          font-weight: bold;
          font-size: 0.24rem;
          color: #333333;
        }
        .enterprise-name {
          font-weight: 800;
          font-size: 0.29rem;
          color: #333333;
        }
        .address-cell {
          padding-bottom: 0.35rem;
          .cell-item {
            display: flex;
            align-items: center;
            margin-top: 0.1rem;
            .item-icon {
              width: 0.23rem;
              height: 0.26rem;
              background: url('~@/assets/image/vxEwm/community.png');
              background-size: 100% 100%;
              margin-right: 0.14rem;
            }
            .icon-address {
              background: url('~@/assets/image/vxEwm/Marker.png');
              background-size: 100% 100%;
            }
            .item-data {
              font-weight: 500;
              font-size: 0.24rem;
              color: #666666;
            }
          }
        }
        .link-man {
          padding: 0.2rem 0 0.5rem;
          .man-box {
            width: 97%;
            background-color: #fff;
            border-radius: 28px;
            display: flex;
            align-items: center;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            & > div {
              padding: 0.3rem 0.3rem;
              flex: 1;
              display: flex;
              align-items: center;

              .linkMan-icon {
                height: 0.3rem;
                width: 0.3rem;
                background: url('~@/assets/image/vxEwm/linkMan.png');
                background-size: 100% 100%;
              }
              .linkMan-tel {
                height: 0.3rem;
                width: 0.3rem;
                background: url('~@/assets/image/vxEwm/linkMan-tel.png');
                background-size: 100% 100%;
              }
              .linkMan-text {
                margin-left: 0.15rem;
                font-weight: 500;
                font-size: 0.24rem;
                color: #666666;
              }
            }
          }
        }
        .grid-view {
          // padding: 0.15rem 0;
          display: flex;
          align-items: center;
          flex-wrap: wrap;

          .grid-item {
            width: calc(100% / 3);
            display: flex;
            align-items: center;
            height: 1.5rem;
            .child-item {
              width: 90%;
              height: 85%;
              border-radius: 10px;
              background-color: #fff;
              box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              img {
                width: 0.28rem;
                height: 0.35rem;
              }
              .grid-item-name {
                font-weight: bold;
                font-size: 0.21rem;
                color: #666666;
                margin: 0.05rem 0;
              }
              .grid-item-num {
                font-weight: bold;
                font-size: 0.24rem;
                color: #333333;
                font-family: 'PingFang-SC-Bold';
              }
            }
          }
        }
      }
    }
  }
}

::v-deep .leaflet-container {
  font-size: 0.24rem !important ;
  color: #fff;
  font-family: 'AlibabaPuHuiTi-Medium';
}
</style>
