<!--
 * @Description: 总览地图
 * @Author: 王晓颖
 * @Date:2021-01-12 09:59:26
 -->
<template>
  <div class="container">
    <!--选择类型按钮组-->
    <div class="top-btn-group">
      <el-button type="primary" round @click="showStaff">人员</el-button>
      <el-button type="primary" round @click="showDevice">设施</el-button>
      <el-button type="primary" round @click="showCar">车辆</el-button>
    </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 v-if="toiletShow">
          <l-marker v-for="(toilet,index) in toilets" :key="'toilet'+index" :icon="toiletIcon" :lat-lng="toilet.latlng" @click="openPopup($event,'toilet',toilet)">
            <l-popup @ready="fetchToiletDetail">
              <popwindow :data="currentData" type="toilet"/>
            </l-popup>
          </l-marker>
        </div>
      </div>
      <!--车辆显示-->
      <div v-if="type=='car'&&carShow">
        <l-marker v-for="(car,index) in cars" :key="'car'+index" :icon="carIcon" :lat-lng="car.latlng" @click="openPopup($event,'car',car)">
          <l-popup>
            <popwindow v-if="currentData" :data="car" type="car"/>
          </l-popup>
        </l-marker>
      </div>
    </map-view>
    <!--图例-->
    <!--人员图例-->
    <div v-show="type=='staff'" class="legend-group">
      <div class="legend-div" @click="staffShow=!staffShow">
        <div class="legend-icon"><img :class="{'grey-img':staffShow?false:true}" src="../../../assets/overview/staff-yellow.png"></div>
        <div class="legend-text">保洁员</div>
      </div>
    </div>
    <!--设施图例-->
    <div v-show="type=='device'" class="legend-group">
      <div class="legend-div" @click="toiletShow=!toiletShow">
        <div class="legend-icon"><img :class="{'grey-img':toiletShow?false:true}" src="../../../assets/overview/toilet.png"></div>
        <div class="legend-text">公厕</div>
      </div>
      <div class="legend-div" @click="transferStationShow=!transferStationShow">
        <div class="legend-icon"><img :class="{'grey-img':transferStationShow?false:true}" src="../../../assets/overview/transferstation.png"></div>
        <div class="legend-text">垃圾中转站</div>
      </div>
      <div class="legend-div" @click="wastebinShow=!wastebinShow">
        <div class="legend-icon"><img :class="{'grey-img':wastebinShow?false:true}" src="../../../assets/overview/wastebin.png"></div>
        <div class="legend-text">垃圾桶</div>
      </div>
    </div>
    <!--车辆图例-->
    <div v-show="type=='car'" class="legend-group">
      <div class="legend-div" @click="carShow=!carShow">
        <div class="legend-icon"><img :class="{'grey-img':carShow?false:true}" src="../../../assets/overview/car.png"></div>
        <div class="legend-text">环卫车</div>
      </div>
    </div>
  </div>
</template>

<script>
import MapView from '@/views/mapViews/mapView'
import * as L from 'leaflet'
import { LMarker, LIcon, LPopup } from 'vue2-leaflet'
import Popwindow from './popwindow'
import { getStaffList } from '@/api/sanitation/staff'
import { getToiletList } from '@/api/sanitation/toilet'
import { getWastebinList } from '@/api/sanitation/wastebin'
import { getTransferstationList } from '@/api/sanitation/transferstation'
import { getCarList, getCarDetail } from '@/api/sanitation/car'

export default {
  name: 'MapOverview',
  components: { Popwindow, MapView, LMarker, LIcon, LPopup },
  data() {
    return {
      type: 'staff', // 地图显示类型: 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]
      }), // 转运站图标
      carIcon: L.icon({
        iconUrl: require('../../../assets/overview/car.png'),
        iconSize: [32, 32],
        iconAnchor: [16, 16]
      }), // 车辆图标
      staffShow: true, // 人员是否显示
      wastebinShow: true, // 垃圾桶是否显示
      transferStationShow: true, // 转运站是否显示
      toiletShow: true, // 公厕是否显示
      carShow: true, // 车辆是否显示
      currentData: {} // 当前弹窗数据
    }
  },
  created() {
    this.getStaffs()
  },
  methods: {
    // 展示人员
    showStaff() {
      this.type = 'staff'
      this.staffShow = true
      this.getStaffs()
    },
    // 展示设施
    showDevice() {
      this.type = 'device'
      this.getToilets()
      this.getWastebins()
      this.getTransferStation()
    },
    // 显示车辆
    showCar() {
      this.type = 'car'
      this.carShow = true
      this.getCars()
    },
    // 获取人员列表
    getStaffs() {
      getStaffList().then(response => {
        if (response.code === 200) {
          this.staffs = response.data.filter(item => item.lng !== '')
          this.staffs = this.staffs.map(item => {
            return {
              ...item,
              latlng: [parseFloat(item.lat), parseFloat(item.lng)]
            }
          })
        }
      })
    },
    // 打开弹窗
    async openPopup(event, type, data) {
      switch (type) {
        case 'staff':
          await this.fetchStaffDetail(data)
          break
        case 'wastebin':
          await this.fetchWastebinDetail(data)
          break
        case 'toilet':
          await this.fetchToiletDetail(data)
          break
        case 'transferStation':
          await this.fetchTransferStationDetail(data)
          break
        case 'car':
          await this.fetchCarDetail(data)
          break
      }
      this.$nextTick(() => {
        event.target.openPopup()
      })
    },
    // 获取人员详情
    fetchStaffDetail(staff) {
      this.currentData = staff
    },
    // 获取公厕列表
    getToilets() {
      // this.toilets = [
      //   { id: '12345', name: '张三', latlng: [27.74912, 116.00421], lng: 27.74912, lat: 116.00421, sex: '0', tel: '13382739123', type: '0', typeName: '普通职工', post: '1', jobs: '0;1', responseArea: '崇仁县', responseAreaName: '崇仁县' }
      // ]
      getToiletList().then(response => {
        if (response.code === 200) {
          this.toilets = response.data.map(item => {
            return {
              ...item,
              latlng: [parseFloat(item.lat), parseFloat(item.lng)]
            }
          })
        }
      })
    },
    // 获取公厕详情
    fetchToiletDetail(data) {
      this.currentData = data
    },
    // 获取转运站列表
    getTransferStation() {
      // this.transferStations = [
      //   { id: '12348', name: '赵六', latlng: [27.71652, 116.06121], lng: 27.71652, lat: 116.06121, sex: '0', tel: '13382739123', type: '0', typeName: '普通职工', post: '1', jobs: '', responseArea: '崇仁县', responseAreaName: '崇仁县' },
      //   { id: '12349', name: '李现', latlng: [27.70552, 116.09921], lng: 27.70552, lat: 116.09921, sex: '0', tel: '13382739123', type: '0', typeName: '普通职工', post: '1', jobs: '0;1', responseArea: '崇仁县', responseAreaName: '崇仁县' }
      // ]
      getTransferstationList().then(response => {
        if (response.code === 200) {
          this.transferStations = response.data.map(item => {
            return {
              ...item,
              latlng: [parseFloat(item.lat), parseFloat(item.lng)]
            }
          })
        }
      })
    },
    // 获取人员详情
    fetchTransferStationDetail(data) {
      this.currentData = data
    },
    // 获取人员列表
    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: '崇仁县' }
      // ]
      getWastebinList().then(response => {
        if (response.code === 200) {
          this.wastebins = response.data.map(item => {
            return {
              ...item,
              latlng: [parseFloat(item.lat), parseFloat(item.lng)]
            }
          })
        }
      })
    },
    // 获取人员详情
    fetchWastebinDetail(data) {
      this.currentData = data
    },
    // 获取人员列表
    getCars() {
      // this.cars = [
      //   { 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 = { sys: '1' }
      const params = {}
      getCarList(params).then(response => {
        if (response.code === 200) {
          // 过滤数组
          this.cars = response.data.map(item => {
            return {
              carId: item.carId,
              carCode: item.carCode,
              carType: item.carType,
              carTypeName: item.carTypeName,
              deptId: item.deptId,
              deptName: item.deptName,
              description: item.description,
              lat: parseFloat(item.lat),
              lng: parseFloat(item.lng),
              latlng: [parseFloat(item.lat), parseFloat(item.lng)],
              status: item.status,
              speed: item.speed
            }
          })
        }
      })
    },
    // 获取人员详情
    fetchCarDetail(car) {
      this.currentData = car
      getCarDetail(car.carId).then(response => {
        if (response.code === 200) {
          this.currentData = response.data
        }
      })
    }

  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.container{
  width: 100%;
  height: 100%;
  position: relative;
  .top-btn-group{
    position: absolute;
    z-index:500;
    top:50px;
    left:50%;
    transform: translateX(-50%);
  }
  .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>