<!--
 * @Description: 总览地图
 * @Author: 王晓颖
 * @Date:2021-01-12 09:59:26
 -->
<template>
  <div class="container">
    <!--数量整体显示-->
    <div class="top-board">
      <div class="board-div">
        <div class="board-div-value">
          3
        </div>
        <div class="board-div-title">
          垃圾桶
        </div>
      </div>
      <el-divider direction="vertical"></el-divider>
      <div class="board-div">
        <div class="board-div-value">
          0
        </div>
        <div class="board-div-title">
          分类箱
        </div>
      </div>
    </div>
    <map-view>
      <!--人员显示-->
      <div v-if="type=='staff'&&staffShow">
        <l-marker v-for="(staff,index) in staffs" :key="'staff'+index" :icon="staffIcon" :lat-lng="staff.latlng" @click="openPopup($event,'staff',staff)">
          <l-popup>
            <popwindow :data="currentData" type="staff"/>
          </l-popup>
        </l-marker>
      </div>
      <!--设施显示-->
      <div v-if="type=='device'">
        <div v-if="wastebinShow">
          <l-marker v-for="(wastebin,index) in wastebins" :key="'wastebin'+index" :icon="wastebinIcon" :lat-lng="wastebin.latlng" @click="openPopup($event,'wastebin',wastebin)">
            <l-popup @ready="fetchWastebinDetail">
              <popwindow :data="currentData" type="wastebin"/>
            </l-popup>
          </l-marker>
        </div>
        <div v-if="transferStationShow">
          <l-marker v-for="(transferStation,index) in transferStations" :key="'transfer'+index" :icon="transferStationIcon" :lat-lng="transferStation.latlng" @click="openPopup($event,'transferStation',transferStation)">
            <l-popup @ready="fetchTransferStationDetail">
              <popwindow :data="currentData" type="transferStation"/>
            </l-popup>
          </l-marker>
        </div>
      </div>
    </map-view>
  </div>
</template>

<script>
import MapView from '@/views/mapViews/mapView'
import * as L from 'leaflet'
import { LMarker, LIcon, LPopup } from 'vue2-leaflet'
import Popwindow from './components/popwindow'
import { getWastebinListPage } from '@/api/biz/wastebin'

export default {
  name: 'MapOverview',
  components: { Popwindow, MapView, LMarker, LIcon, LPopup },
  data() {
    return {
      type: 'device', // 地图显示类型: staff人员， device设施， car 车辆
      staffs: [], // 人员列表
      wastebins: [], // 垃圾桶列表
      transferStations: [], // 垃圾中转站列表
      toilets: [], // 公厕
      cars: [], // 车辆
      staffIcon: L.icon({
        iconUrl: require('@/assets/overview/staff-yellow.png'),
        iconSize: [32, 32],
        iconAnchor: [16, 32]
      }), // 人员图标
      toiletIcon: L.icon({
        iconUrl: require('@/assets/overview/toilet.png'),
        iconSize: [32, 32],
        iconAnchor: [16, 32]
      }), // 公厕图标
      wastebinIcon: L.icon({
        iconUrl: require('@/assets/overview/wastebin.png'),
        iconSize: [32, 32],
        iconAnchor: [16, 32]
      }), // 垃圾桶图标
      transferStationIcon: L.icon({
        iconUrl: require('@/assets/overview/transferstation.png'),
        iconSize: [32, 32],
        iconAnchor: [16, 32]
      }), // 转运站图标
      staffShow: true, // 人员是否显示
      wastebinShow: true, // 垃圾桶是否显示
      transferStationShow: true, // 转运站是否显示
      toiletShow: true, // 公厕是否显示
      carShow: true, // 车辆是否显示
      currentData: {} // 当前弹窗数据
    }
  },
  created() {
    this.getWastebins()
  },
  methods: {
    // 获取垃圾桶列表
    getWastebins() {
      // this.wastebins = [
      //   { id: '12346', name: '李四', latlng: [27.73252, 116.05321], lng: 27.73252, lat: 116.05321, sex: '0', tel: '13382739123', type: '0', typeName: '普通职工', post: '1', jobs: '0', responseArea: '崇仁县', responseAreaName: '崇仁县' },
      //   { id: '12347', name: '王五', latlng: [27.72852, 116.03721], lng: 27.72852, lat: 116.03721, sex: '0', tel: '13382739123', type: '0', typeName: '普通职工', post: '1', jobs: '1', responseArea: '崇仁县', responseAreaName: '崇仁县' }
      // ]
      const params = {
        offset: 1,
        limit: 200,
        sort: '',
        order: 'desc'
      }
      getWastebinListPage(params).then(response => {
        if (response.code === 200) {
          this.wastebins = response.data.rows.map(item => {
            return {
              ...item,
              latlng: [parseFloat(item.lat), parseFloat(item.lng)]
            }
          })
        }
      })
    },
    // 获取垃圾桶详情
    fetchWastebinDetail(data) {
      this.currentData = data
    }

  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.container{
  width: 100%;
  height: calc(100vh - 150px);
  position: relative;
  .top-board{
    height: 100px;
    width:300px;
    background-color: #ffffff;
    position: absolute;
    z-index:1001;
    top:10px;
    left:10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:12px;
    .board-div{
      width: 45%;
      font-size:19px;
      text-align: center;
      .board-div-value{
        padding-bottom: 10px;
      }
      .board-div-title{
        font-size:17px;
      }
    }
  }
  .legend-group{
    position:absolute;
    z-index:3000;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    background: rgba(82, 82, 82, 0.6);
    width:100%;
    padding:10px 10px;
    .legend-div{
      display:flex;
      align-items: center;
      margin-right: 20px;
      .legend-icon{
        img{
          width:32px;
          height:32px;
          margin-right: 10px;
        }
        .grey-img{
          -webkit-filter: grayscale(100%);
          -moz-filter: grayscale(100%);
          -ms-filter: grayscale(100%);
          -o-filter: grayscale(100%);
          filter: grayscale(100%);
          filter: gray;
        }
      }
      .legend-text{
        line-height: 32px;
        color:white;
        font-weight: bold;
        font-size:0.9rem;

      }
    }
    .legend-div:hover{
      cursor:pointer;
    }
  }
}
</style>