<template>
  <div id="container">
    <!--筛选条件-->
    <div class="map-search-div">
      <el-date-picker
        v-model="query.date"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="选择日期"
        :clearable="false"
        :disabled="!isWarehouse"
        size="small"
        @change="changeDate">
      </el-date-picker>
    </div>
    <!--报警列表-->
    <div v-if="isWarehouse && showAlarm && alarmList.length>0" class="map-alarm-div">
      <div class="map-alarm-div-header">
        报警列表
        <span class="icon-right" @click="tableShow=!tableShow">
          <i v-if="tableShow" class="el-icon-arrow-up"/>
          <i v-else class="el-icon-arrow-down"/>
        </span>
      </div>
      <transition name="el-collapse-transition">
        <el-scrollbar
          v-show="tableShow"
          :style="{visibility: tableShow?'visible':'hidden'}"
          :class="{moredatascollor:alarmList.length>6}"
          :native="false">
          <el-table
            :data="alarmList"
            class="alarm-list-table"
            border
            @row-click="showAlarmDeviceDetail">
            <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row[column.value] }}
              </template>
            </el-table-column>
          </el-table>
        </el-scrollbar>
      </transition>
    </div>
    <div v-if="!isWarehouse" class="map-alarm-button">
      <el-button type="danger" plain @click="backToWarehouse">返回</el-button>
    </div>
    <!--右侧弹出卡片-->
    <el-card v-if="isShowCard && currentWarehouse" class="box-card map-card" body-style="{padding: 0px;padding: 0px;overflow: auto;max-height:400px;}">
      <div slot="header" class="clearfix">
        <span>{{ currentWarehouse.warehouseName }}</span>
        <el-button style="float: right; padding: 0px" type="text" @click="hideCard"><i class="el-icon-close"/></el-button>
        <div style="margin-top: 10px; font-size: 14px;">共 {{currentWarehouse.allDevices}} 个开孔机，{{currentWarehouse.alarmDevices}}个发生位移</div>
      </div>
      <div v-for="item in kkjList" :key="'kkj_'+item.id" class="box-card-item">
        <div class="card-row">
          <el-row type="flex" justify="space-between">
            <span style="font-weight:bold">{{ item.kkjName }}</span>
            <!-- 查看位置-->
            <el-button type="primary" class="alarm-button" size="mini" round @click="historyLoc(item.devcode)">查看位置</el-button>
          </el-row>
          <!--开孔机编号-->
          <el-row>
            <span>{{ item.kkjCode }}</span>
            <!--发生位移-->
            <div v-if="item.flag=='1'" style="color:red;display: inline-block;padding-left: 10px;">
              <svg-icon icon-class="alarm-kkj" style="width: 15px;height:15px"/>发生位移</div>
          </el-row>
        </div>
      </div>
    </el-card>
    <!--地图-->
    <div v-loading="loading" id="mapcontainer" class="overview-map-container">
      <AMapContainer ref="map" :center="center" :amap-manager="aMapManager" mapStyle="normal" :zoom="zoom" :zooms="zooms" :events="events" vid="overview" @ready="mapReady" class="map-demo" >
        <!--全部仓库 markers-->
        <template v-if="isWarehouse">
          <AMapMarker
            v-for="(marker,index) in markers"
            :key="index"
            :position="marker.position"
            :offset="offset"
            :vid="index"
            :visible= "true"
          >
            <div style="width: 72px;height:72px;display: flex;flex-direction: column;align-items: center">
              <img :src="marker.alarmDevices>0?warehouseAlarmIcon:warehouseIcon"
                   :style="{width: marker.alarmDevices>0?'40px':'35px', height: marker.alarmDevices>0?'40px':'35px'}"
                   @click="getKkjList(marker)" />
              <div class="warehouse-label">{{marker.warehouseName}}</div>
              <div class="warehouse-label"><span :style="{color:marker.alarmDevices>0?'red':'black'}">{{marker.alarmDevices}}</span>/{{marker.allDevices}}</div>
            </div>
          </AMapMarker>
        </template>
        <!--开孔机位置某日位置 positions-->
        <template v-else>
          <!--当前仓库位置-->
          <AMapMarker
            :position="currentWarehouse.position"
            :offset="offset"
            :vid="currentWarehouse.id"
            :visible= "true"
          >
            <div style="width: 72px;height:72px;display: flex;flex-direction: column;align-items: center">
              <img :src="currentWarehouse.alarmDevices>0?warehouseAlarmIcon:warehouseIcon"
                   :style="{width: currentWarehouse.alarmDevices>0?'40px':'35px', height: currentWarehouse.alarmDevices>0?'40px':'35px'}"/>
              <div class="warehouse-label">{{currentWarehouse.warehouseName}}</div>
            </div>
          </AMapMarker>
          <!--开孔机位置-->
          <AMapMarker
            v-for="(marker,index) in positions"
            :key="index"
            :position="marker.position"
            :offset="positionOffset"
            :vid="index"
            :visible= "true"
          >
            <div style="width: 72px;height:72px;display: flex;flex-direction: column;align-items: center">
              <img :src="locationIcon"
                   :style="{width: '30px', height: '30px'}" />
              <div class="warehouse-label">{{marker.uptime.substring(10,16)}}</div>
            </div>
          </AMapMarker>

        </template>

      </AMapContainer>
    </div>
    <!--<select-date v-show="dateShow" ref="selectdate" @closeMain="closeMain"/>-->
  </div>
</template>

<script>
import { getWarehouseList, getKkj, getHistoryKkj, getKkjAlarm } from '@/api/overview/wellOverview'
import selectDate from './components/selectDate'
import { getYesterDay } from '@/utils/dateutils'
import { AMapManager } from 'vue-amap'
import TempData from './components/tempData'
import AMapContainer from '@/components/Amap/AMapContainer'
import AMapMarker from '@/components/Amap/AMapMarker'
// const aMapManager = new AMapManager()
export default {
  name: 'OverviewKkj',
  components: { TempData, selectDate, AMapContainer, AMapMarker },
  data() {
    return {
      loadingMap: false,
      aMapManager: AMapManager,
      isWarehouse: true, // 是否是仓库层
      loading: true, // 加载框
      isShowCard: false, // 是否显示卡片
      currentWarehouse: null, // 当前选中仓库
      kkjList: [], // 开孔机列表
      query:{
        date:''
      }, // 查询所有仓库列表的查询条件
      listQuery: {
        date:'',// 日期
        deptid: '' // 仓库id
      }, // 查询开孔机列表筛选条件
      center: [this.$store.getters.lng, this.$store.getters.lat], // 地图中心
      zoom: 11, // 地图缩放比例
      zooms: [11, 19], // 最小地图比例
      markers: [], // 仓库markers
      positions:[] , // 开孔机点位
      warehouseIcon:require('@/assets/overview/ck.png'), // 正常仓库图标
      warehouseAlarmIcon: require('@/assets/overview/ck-alarm.png'), // 位移仓库图标
      locationIcon: require('@/assets/overview/position.png'), // 开孔机位置图标
      offset: [-36, -36], // 仓库偏移量
      positionOffset: [-10, -10], // 位置图标偏移量
      events: {
        complete: () => {
          this.init()
          // this.$refs.map.$$getInstance().setFitView()
        }
      },
      showAlarm: true, // 是否显示报警
      tableShow: true, // 报警列表显示
      alarmList: [], // 报警列表
      columns: [
        { text: '开孔机编号', value: 'kkjCode', width: 110, align: 'center' },
        { text: '设备编号', value: 'devcode', width: 100, align: 'center' },
        { text: '所属仓库', value: 'warehouseName', align: 'center', width: 110 },
        { text: '权属单位', value: 'companyName', width: 120, align: 'center' },
        { text: '使用单位', value: 'deptName', width: 110, align: 'center' },
      ], // 报警列表显示列
    }
  },
  computed: {},
  watch: {},
  created() {
    // 获取昨日时间，赋值给query
    this.query.date = getYesterDay().Format('yyyy-MM-dd')
    this.aMapManager = new AMapManager()
  },
  mounted() {
    // 判断路径中是否有plain,如果有就计算高度，100%填充，否则mapdemo按原高度
    // const con = document.getElementById('container')
    // const mapcon = document.getElementById('mapcontainer')
    // const conp = con.parentNode
    // this.$nextTick(() => {
    //   if (this.$route.path.includes('plain')) {
    //     con.style.height = conp.offsetHeight + 'px'
    //     mapcon.style.height = conp.offsetHeight + 'px'
    //     const map = this.$refs.map
    //     map.$el.style.height = '100%'
    //   }

    // })
  },
  methods: {
    init() {
      this.fetchData() // 获取仓库列表
      this.fetchAlarmList() // 获取报警列表
    },
    // 初始化放这里
    mapReady(map) {
      this.map = map
      this.init()
    },
    changeDate(){
      if(this.isWarehouse){
        this.fetchData()
        this.fetchAlarmList()
        this.markers = []
        this.positions = []
      }
    },
    // 获取仓库列表
    fetchData() {
      this.isWarehouse = true
      getWarehouseList(this.query).then(response => {
        this.markers = []
        if (response.code === 200) {
          this.loading = false
          const locations = response.data
          if (locations.length > 0) {
            const centerxs = []
            const centerys = []
            for (const loc of locations) {
              this.markers.push({
                lnglat: [parseFloat(loc.lng), parseFloat(loc.lat)],
                position: [parseFloat(loc.lng), parseFloat(loc.lat)],
                warehouseName: loc.name,
                id: loc.id,
                allDevices: loc.allDevices,
                alarmDevices: loc.alarmDevices,
                visible: true
              })
              centerxs.push(parseFloat(loc.lng))
              centerys.push(parseFloat(loc.lat))
            }
            centerxs.sort()
            centerys.sort()
            const index = Math.floor(centerxs.length / 2)
            this.center = [centerxs[index], centerys[index]]
            this.$refs.map.$$getInstance().setFitView()
          } else {
            this.$message.success('无数据可展示!')
          }
        }
      })
    },
    // 获取报警列表
    fetchAlarmList(){
      getKkjAlarm(this.query).then(res=>{
        this.alarmList = res.data
      })
      // this.alarmList = [
      //   {kkjCode:'KKJ150-D102',devcode:'622018016201',warehouseName:'一分公司仓库', companyName:'高压管网分公司',deptName:'运行维护一所',alarmDate:'2021-09-13'},
      //   {kkjCode:'KKJ151',devcode:'622018016201',warehouseName:'一分公司仓库', companyName:'一分公司',deptName:'运行维护一所',alarmDate:'2021-09-13'},
      //   {kkjCode:'KKJ151',devcode:'622018016201',warehouseName:'一分公司仓库', companyName:'一分公司',deptName:'运行维护一所',alarmDate:'2021-09-13'},
      // ]
    },
    // 显示报警设备详情
    showAlarmDeviceDetail(row, column, event){
      // find current warehouse
      for(const house of this.markers){
        if(house.warehouseName==row.warehouseName){
          this.currentWarehouse = house
          break
        }
      }
      this.historyLoc(row.devcode)
    },
    // 查看设备某日数据数据查询
    historyLoc(devcode) {
      this.loading = true
      const query = {
        date: this.query.date,
        keywords: devcode
      }
      getHistoryKkj(query).then(response => {
        this.isWarehouse = false
        this.loading = false
        if (response.code === 200) {
          const locations = response.data
          // todo: 模拟点位
          // const locations = [
          //   {lat:'39.94309235', lng:'116.28181458', flag:'1', uptime:'2021-09-01 05:00:00'},
          //   {lat:'39.94149235', lng:'116.28581458', flag:'1', uptime:'2021-09-01 04:00:00'},
          //   {lat:'39.94529235', lng:'116.28781458', flag:'1', uptime:'2021-09-01 03:00:00'},
          //   {lat:'39.94949235', lng:'116.28881458', flag:'1', uptime:'2021-09-01 02:00:00'},
          // ]
          if (locations.length > 0) {
            this.positions = []
            const centerxs = []
            const centerys = []
            for (const loc of locations) {
              // 坐标转换
              AMap.convertFrom(new AMap.LngLat(loc.lng, loc.lat), 'gps', function(status, res) {
                loc.lng = res.locations[0].lng
                loc.lat = res.locations[0].lat
              })
              this.positions.push({
                lnglat: [parseFloat(loc.lng), parseFloat(loc.lat)],
                position: [parseFloat(loc.lng), parseFloat(loc.lat)],
                flag: loc.flag,
                uptime: loc.uptime,
                visible: true
              })
              centerxs.push(parseFloat(loc.lng))
              centerys.push(parseFloat(loc.lat))
            }
            centerxs.sort()
            centerys.sort()
            const index = Math.floor(centerxs.length / 2)
            this.center = [centerxs[index], centerys[index]]
          } else {
            this.$message.success('查无数据!')
            this.fetchData() // 获取仓库列表
          }
        }
      })
    },
    // 返回仓库页面
    backToWarehouse(){
      this.isWarehouse = true
    },
    // 获取开孔机列表
    getKkjList(marker) {
      if (this.isWarehouse) {
        this.center = [parseFloat(marker.position[0]), parseFloat(marker.position[1])]
        this.currentWarehouse = marker
        this.isShowCard = true
        this.loading = true
        const params = {
          id: marker.id,
          date: this.query.date
        }
        getKkj(params).then(response => {
          this.loading = false
          if (response.code === 200) {
            this.kkjList = response.data
          }
        })
      }
    },
    // 隐藏卡片
    hideCard() {
      this.isShowCard = false
      this.fetchData()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
// 查询框
.map-search-div{
  position: absolute;
  z-index: 100;
  padding: 5px 20px;
  background-color: rgba(244, 244, 244, 0.9);
  /*left: 90px;*/
  .el-form-item{
    margin-bottom: 0px;
  }
}
.map-alarm-button{
  position: absolute;
  z-index: 100;
  top: 60px;
  left: 20px;
}
// 报警列表
.map-alarm-div{
  position: absolute;
  z-index: 100;
  background-color: rgba(255, 234, 241,0.8);
  top: 60px;
  left: 10px;
  .map-alarm-div-header{
    line-height: 40px;
    width: 550px;
    padding-left: 10px;
    .icon-right{
      position: absolute;
      right: 15px;
    }
    .icon-right:hover{
      color: #409EFF;
      cursor: pointer;
    }
  }
  .el-scrollbar {
    /*height: 200px;*/
    width: 100%;
  }
  .moredatascollor{
    height: 200px;
  }
  .el-scrollbar__wrap {
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 0px !important;
}

.el-table th{
/*background-color: rgba(255, 229, 230, 0.8);*/
    padding: 7px 0px;
  }
  .el-table td{
    /*background-color: rgba(255, 234, 241, 0.8);*/
    padding: 5px 0px;
    /*line-height: 1;*/
  }
  .el-table td:hover{
    /*background-color: rgba(255, 234, 241, 0.8);*/
  }
  .transition-box {
    margin-bottom: 10px;
    width: 200px;
    height: 100px;
    border-radius: 4px;
    background-color: #409EFF;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-right: 20px;
  }
}
// 刷新框
.refresh-div{
  position: absolute;
  right: 10px;
  top: 7px;
  z-index: 100;
  padding: 10px;
  color: #ce8b74;
  font-size: 14px;
  background-color: rgba(244, 233, 230, 1.0);
  .font-red{
    color: red;
    font-weight: bold;
  }
  .el-icon-refresh:hover{
    color: red;
    font-weight: bold;
    cursor: pointer;
  }
}
// 地图
.overview-map-container{
  width: 100%;
  padding: 5px;
  height: 100%;
  .map-demo{
    width: 100%;
    height: calc(100vh - 146px);
    .svg-icon{
      width: 20px;
      height: 20px;
    }
    .alarm-icon{
      width: 29px;
      height: 30px;
    }
    .nomal-info-window{
      background-color: pink;
    }
    .info-window{
      max-width: 250px;
      /*background-color: lightcyan;*/
      .info-header{
        padding: 10px 10px 5px 10px;
        line-height: 30px;
        font-weight: bold;
        /*background-color: #eaf4ff;*/
      }
      .info-body{
        padding: 5px 10px 10px 10px;
        line-height: 23px;
        font-size: 14px;
      }
    }
    .alarm-window{
      max-width: 250px;
      /*background-color: #ffeaf1;*/
      .alarm-header {
        padding: 10px 10px 5px 10px;
        line-height: 30px;
        color: red;
        font-weight: bold;
        /*background-color: #ffecec;*/
      }
      .alarm-body{
        padding: 5px 10px 10px 10px;
        line-height: 23px;
        font-size: 14px;
        .alarm-red{
          color: #ff0000;
        }
      }
    }
  }
}
  .el-divider--horizontal{
    margin: 5px 0;
  }
// 刷新框
.function-div{
  position: absolute;
  right: 10px;
  top: 7px;
  z-index: 1100;
  padding: 10px;
  color: #ce8b74;
  font-size: 14px;
  /*background-color: rgba(244, 233, 230, 1.0);*/
  .font-red{
    color: red;
    font-weight: bold;
  }
  .el-icon-refresh:hover{
    color: red;
    font-weight: bold;
    cursor: pointer;
  }
}
  .map-select-div{
    position: absolute;
    width:210px;
    right: 0px;
    bottom: 0px;
    z-index: 1100;
    padding: 15px;
    background-color: #ffffff;
    font-size: 14px;
    line-height: 1.5;
  }
.map-card {
  z-index: 2000;
  position: absolute;
  top:20px;
  width: 300px;
  //left: 20px;
  right: 20px;
  float:right;
  overflow: auto;
  background-color: white;
}
.box-card-item {
  border-bottom: #33333347 1px solid;
  padding: 10px 20px 10px 20px;
  font-size: 14px;
  font-weight: 500;
}
  .warehouse-label{
    font-size:12px;
    background-color: #f0f2f5;
    text-align: center;
    font-weight: bold;
  }
</style>