<!--
 * @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">
          <l-popup @ready="getStaffDetail">
            <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">
            <l-popup @ready="getWastebinDetail">
              <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">
            <l-popup @ready="getTransferStationDetail">
              <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">
            <l-popup @ready="getToiletDetail">
              <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">
          <l-popup @ready="getCarDetail">
            <popwindow :data="currentData" 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/toilet3d.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'
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, 16]
      }),
      toiletIcon: L.icon({
        iconUrl: require('../../../assets/overview/toilet3d.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, 32]
      }),
      staffShow: true,
      wastebinShow: true,
      transferStationShow: true,
      toiletShow: true,
      carShow: true,
      currentData: null,
      currentType: 'staff'
    }
  },
  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() {
      this.staffs = [
        { 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: '崇仁县' },
        { 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: '崇仁县' },
        { 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: '崇仁县' }
      ]
    },
    // 获取人员详情
    getStaffDetail() {
      this.currentData = {
        id: '12345',
        name: '张三',
        sexName: '男',
        idcard: '130827098484123',
        tel: '13382739123',
        type: '0',
        typeName: '普通职工',
        post: '1',
        postName: '保洁员',
        jobs: '0;1',
        responseArea: '崇仁县',
        responseAreaName: '崇仁县'
      }
    },
    // 获取公厕列表
    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: '崇仁县' }
      ]
    },
    // 获取公厕详情
    getToiletDetail() {
      this.currentData = {
        code: '12345',
        name: '1号公厕',
        position: '马路上',
        owner: '环卫所',
        responsiblePerson: '张三',
        responsiblePersonTel: '1302445824585',
        ts: '2020-01',
        area: '25',
        capacity: '845'
      }
    },
    // 获取转运站列表
    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: '崇仁县' }
      ]
    },
    // 获取人员详情
    getTransferStationDetail() {
      this.currentData = {
        code: '12345',
        name: '1号中转站',
        position: '小区里',
        owner: '环卫所',
        responsiblePerson: '张三',
        responsiblePersonTel: '1302445824585',
        ts: '2020-01',
        area: '25',
        capacity: '845'
      }
    },
    // 获取人员列表
    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: '崇仁县' }
      ]
    },
    // 获取人员详情
    getWastebinDetail() {
      this.currentData = {
        code: '12345',
        name: '1号垃圾桶',
        position: '小区里',
        responsiblePerson: '张三',
        ts: '2020-01'
      }
    },
    // 获取人员列表
    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: '崇仁县' }
      ]
    },
    // 获取人员详情
    getCarDetail() {
      this.currentData = {
        id: '12345',
        carCode: '赣F25445S',
        name: '环卫车',
        carTypeName: '高级车',
        brandModel: '奥迪',
        deptName: '环卫所',
        chargePerson: '张三'
      }
    }

  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.container{
  width: 100%;
  height: 100%;
  position: relative;
  .top-btn-group{
    position: absolute;
    z-index:3000;
    top:20px;
    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>