<template>
  <el-container v-loading="loading" class="content-height-fit">
    <el-container class="resize-fit-container">
      <div class="app-container">
        <el-row :xs="24" class="sum-row" style="padding-bottom: 15px">
          <el-col :sm="6" :md="6" class="sum-row-col sum-row-cols">
            <div
              class="info-box bg-deep-blue"
              style="margin-bottom: 0px"
            >
              <span class="info-box-icon"><i class="fa fa-steam" /></span>
              <div class="info-box-content">
                <span class="info-box-text">架桥机总数量</span>
                <span
                  class="info-box-number"
                >{{ deviceMode.grideCount }}台</span>
                <div class="progress">
                  <div class="progress-bar" :style="deviceMode.gridePercentage" />
                </div>
                <span class="progress-description">
                  在线 {{ deviceMode.grideOnlineCount }}台，离线 {{ deviceMode.grideOfflineCount }}台
                </span>
              </div>
            </div>
          </el-col>
          <el-col :sm="6" :md="6" class="sum-row-col sum-row-cols">
            <div
              class="info-box bg-cyan"
              style="margin-bottom: 0px"
            >
              <span
                class="info-box-icon"
              ><i
                class="fa fa-exclamation-triangle"
              /></span>
              <div class="info-box-content">
                <span class="info-box-text">架桥机问题点</span>
                <span class="info-box-number">
                  {{ deviceMode.grideWarningCount }}个</span>
                <div class="progress">
                  <div class="progress-bar" :style="deviceMode.grideWarningPercentage" />
                </div>
                <span class="progress-description">
                  已处理 {{ deviceMode.grideWarningProcessedCount }} 个，未处理 {{ deviceMode.grideWarningUnProcessCount }} 个
                </span>
              </div>
            </div>
          </el-col>
          <el-col :sm="6" :md="6" class="sum-row-col sum-row-cols">
            <div
              class="info-box bg-teal"
              style="margin-bottom: 0px"
            >
              <span class="info-box-icon"><i class="fa fa-truck" /></span>
              <div class="info-box-content">
                <span class="info-box-text">运梁车总数量</span>
                <span
                  class="info-box-number"
                > {{ deviceMode.beamCarrierCount }}台</span>
                <div class="progress">
                  <div class="progress-bar" :style="deviceMode.beamCarrierPercentage" />
                </div>
                <span class="progress-description">
                  在线 {{ deviceMode.beamCarrierOnlineCount }}台，离线 {{ deviceMode.beamCarrierOfflineCount }}台
                </span>
              </div>
            </div>
          </el-col>
          <el-col :sm="6" :md="6" class="sum-row-col">
            <div
              class="info-box bg-aqua"
              style="margin-bottom: 0px"
            >
              <span
                class="info-box-icon"
              ><i
                class="fa fa-exclamation-triangle"
              /></span>
              <div class="info-box-content">
                <span class="info-box-text">运梁车问题点</span>
                <span class="info-box-number">
                  {{ deviceMode.beamCarrierWarningCount }}个</span>
                <div class="progress">
                  <div class="progress-bar" :style="deviceMode.beamCarrierWarningPercentage" />
                </div>
                <span class="progress-description">
                  已处理 {{ deviceMode.beamCarrierWarningProcessedCount }} 个，未处理 {{ deviceMode.beamCarrierWarningUnProcessCount }} 个
                </span>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :xs="24">
          <el-col :xs="24" :sm="15" :md="15" style="padding-right: 15px">
            <box icon="el-icon-help" title="GPS定位">
              <baidu-map
                style="width:100%;height:360px"
                class="map"
                :ak="baiduKey"
                :zoom="14"
                :center="{lng:112.893835,lat:28.253065}"
                :scroll-wheel-zoom="true"
                @ready="handler"
              >
                <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT" />
                <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" />
              </baidu-map>
            </box>
          </el-col>
          <el-col :xs="24" :sm="9" :md="9">
            <box icon="el-icon-chart" title="过孔图表">
              <div>
                <histogram-chart style="height:160px" series-name="过孔数" :x-axis-data="viaMode.xAxisData" :series-data="viaMode.seriesData" />
              </div>
              <div>
                <pie-chart style="height:200px" series-name="过孔数" :is-hollow="false" :series-data="viaMode.pieSeriesData" />
              </div>
            </box>
          </el-col>
        </el-row>
        <el-row :xs="24">
          <el-col :xs="24" :sm="15" :md="15" style="padding-right: 15px">
            <box icon="el-icon-help" title="风速/风力统计图表">
              <el-radio-group v-model="tabPosition" @change="GettabPosition(tabPosition)">
                <el-radio-button label="一周">一周</el-radio-button>
                <el-radio-button label="一月">一月</el-radio-button>
                <el-radio-button label="半年">半年</el-radio-button>
                <el-radio-button label="一年">一年</el-radio-button>
              </el-radio-group>
              <multi-function-histogram-chart style="height:317px" />
            </box>
          </el-col>
          <el-col :xs="24" :sm="9" :md="9">
            <box icon="el-icon-help" title="问题点图表">
              <pie-chart style="height:360px" series-name="问题点" :is-hollow="true" :series-data="problemPointMode.pieSeriesData" :graphictext="problemPointMode.graphictext" />
            </box>
          </el-col>
        </el-row>
        <el-row :xs="24">
          <el-col :xs="24" :sm="24" :md="24">
            <box icon="el-icon-picture-outline-round" title="列表">
              <el-table
                :data="tableData"
                height="235px"
                border
                style="width: 100%"
              >
                <el-table-column
                  prop="deviceNo"
                  label="设备编号"
                  align="center"
                />
                <el-table-column
                  prop="deviceName"
                  label="设备名称"
                  align="center"
                />
                <el-table-column
                  prop="deviceTypeName"
                  label="设备类型"
                  align="center"
                />
                <el-table-column label="最近运行时间" align="center">
                  <template slot-scope="{ row }">
                    {{ row.lastUploadTime |datetime }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="allTime"
                  label="累计工作时长(小时)"
                  align="center"
                />
                <el-table-column
                  prop="viaCount"
                  label="过孔总数"
                  align="center"
                />
                <el-table-column
                  prop="warningProcessedCount"
                  label="问题点(已处理)"
                  align="center"
                />
                <el-table-column
                  prop="warningUnprocessCount"
                  label="问题点(未处理)"
                  align="center"
                />
                <el-table-column label="问题点(未处理)" width="100" align="center">
                  <template slot-scope="{ row }">
                    {{ row.warningCount - row.warningProcessedCount }}
                  </template>
                </el-table-column>
                <el-table-column label="状态" width="100" align="center">
                  <template slot-scope="{ row }">
                    {{ row.isOnLine?'在线':'离线' }}
                  </template>
                </el-table-column>
              </el-table>
            </box>
          </el-col>
        </el-row>
      </div></el-container>
  </el-container>
</template>

<script>

import * as interfaceApi from '@/api/dashboard.js'
import Box from '@/components/Box/Box'
import HistogramChart from '@/components/Chart/histogram-chart'
import MultiFunctionHistogramChart from '@/components/Chart/multi-function-histogram-chart'
import pieChart from '@/components/Chart/pieChart'
import waves from '@/directive/waves' // waves directive
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import BmScale from 'vue-baidu-map/components/controls/Scale'
import BmNavigation from 'vue-baidu-map/components/controls/Navigation'
export default {
  name: 'BeamCarrierWorkInfoMng',
  directives: { waves },
  // eslint-disable-next-line vue/no-unused-components
  components: {
    BaiduMap,
    BmScale,
    BmNavigation,
    Box, //, InnerSidebar , ProjectSectionDeviceTree
    HistogramChart,
    pieChart,
    MultiFunctionHistogramChart
  },
  props: {
    query: { type: Object, default: null, required: false }
  },
  data() {
    return {
      loading: true,
      tabPosition: '一周',
      deviceMode: {},
      tableData: [],
      viaMode: { // 过孔
        xAxisData: [],
        seriesData: [],
        pieSeriesData: []
      },
      problemPointMode: { // 问题点
        pieSeriesData: [],
        graphictext: ''
      },
      optiondata: { // 风速、风力
        xAxisData: [],
        legendData: [],
        seriesData: []
      }
    }
  },
  computed: {
    baiduKey() {
      return process.env.VUE_APP_BD_MAP_KEY
    }
  },
  mounted() {
    this.DeviceStatistics()
    this.GetDeviceChartData()
    this.GettabPosition(this.tabPosition)
  },
  methods: {
    DeviceStatistics() {
      interfaceApi
        .deviceStatistics({})
        .then(res => {
          // 架桥机 在线率 百分比
          res.gridePercentage = 'width:' + ((res.grideOnlineCount / res.grideCount) * 100) + '%'
          // 架桥机问题 已处理 百分比
          res.grideWarningPercentage = 'width:' + ((res.grideWarningProcessedCount / res.grideWarningCount) * 100) + '%'
          // 运梁车 在线率 百分比
          res.beamCarrierPercentage = 'width:' + ((res.beamCarrierOnlineCount / res.beamCarrierCount) * 100) + '%'
          // 运梁车问题 已处理 百分比
          res.beamCarrierWarningPercentage = 'width:' + ((res.beamCarrierWarningProcessedCount / res.beamCarrierWarningCount) * 100) + '%'
          this.deviceMode = res
        })
    },
    GetDeviceChartData() {
      interfaceApi
        .getDeviceChartData({})
        .then(res => {
          this.tableData = res
          var throughHoleData = []
          res.forEach(t => {
            if (t.deviceType === 1) {
              throughHoleData.push(t)
            }
          })
          this.GetThroughHole(throughHoleData)
          this.GetProblemPoint(res)
          console.log(res)
        })
    },
    GetThroughHole(data) {
      this.viaMode.xAxisData = []
      this.viaMode.seriesData = []
      this.viaMode.pieSeriesData = []
      data.forEach(t => {
        this.viaMode.xAxisData.push(t.deviceName)
        this.viaMode.seriesData.push(t.viaCount)
        this.viaMode.pieSeriesData.push({ value: t.viaCount, name: t.deviceName })
      })
      // debugger
      // this.xAxisData =  ['设备1', '设备2', '设备3', '设备4', '设备5', '设备6', '设备7']
      // this.seriesData = [10, 52, 200, 334, 390, 330, 220]
      // this.pieSeriesData =  [{ value: 10, name: '设备1' }, { value: 52, name: '设备2' },{ value: 200, name: '设备3' },{ value: 334, name: '设备4' },{ value: 390, name: '设备5' }]
    },
    GetProblemPoint(data) {
      var warningCount = 0
      this.problemPointMode.pieSeriesData = []
      data.forEach(t => {
        warningCount = warningCount + t.warningCount
        this.problemPointMode.pieSeriesData.push({ value: t.warningCount, name: t.deviceName })
      })
      this.problemPointMode.graphictext = '总计' + warningCount
      this.loading = false
    },
    GettabPosition(v) {
      console.log(v)
    },
    handler({ BMap, map }) {
      // 鼠标缩放
      map.enableScrollWheelZoom(true)
      // 点击事件获取经纬度
      var path = []// 本人的示例是要走规定经过的路线，所以中间有多经过点
      path.push([113.763924, 22.938634])
      path.push([113.759621, 22.933625])

      path.push([113.759621, 22.933625])
      path.push([113.76654, 22.934174])

      path.push([113.76654, 22.934174])
      path.push([113.766558, 22.932916])

      path.push([113.766558, 22.932916])
      path.push([113.768745, 22.93173])

      path.push([113.768745, 22.93173])
      path.push([113.76945, 22.930731])

      path.push([113.76945, 22.930731])
      path.push([113.772022, 22.93014])

      path.push([113.772022, 22.93014])
      path.push([113.775806, 22.932607])

      map.centerAndZoom(new BMap.Point(116.404, 39.915), 11)
      for (let i = 0; i < path.length; i += 2) {
        var walking = new BMap.WalkingRoute(map, {
          renderOptions: {
            map: map,
            autoViewport: true
          },
          onPolylinesSet: function(routes) {
            const searchRoute = routes[0].getPolyline()// 导航路线
            map.removeOverlay(searchRoute)// 移除查询出来 的路线
          },
          onMarkersSet: function(routes) {
            map.removeOverlay(routes[0].marker) // 删除起点
            map.removeOverlay(routes[routes.length - 1].marker) // 删除终点
          }
        })
        var start = new BMap.Point(path[i][0], path[i][1])
        var end = new BMap.Point(path[i + 1][0], path[i + 1][1])
        walking.search(start, end)
        walking.setSearchCompleteCallback(function() {
          var plan = walking.getResults().getPlan(0)
          for (let j = 0; j < plan.getNumRoutes(); j++) {
            var pts = plan.getRoute(j).getPath()
            var polyline = new BMap.Polyline(pts, { strokeColor: '#ff0000', strokeWeight: 5, strokeOpacity: 1 })// 重新划路线
            map.addOverlay(polyline)
          }
        })
      }
      map.addEventListener('click', function(e) { // 点击地点获取经纬度
        console.log(e.point.lng, e.point.lat)
      })
    }
  }
}
</script>
<style scoped>
.table {
    border-top: 1px solid #dcdfe6;
    border-collapse: collapse;
    width: 100%;
    background-color: #fff;
    font-size: 14px;
    line-height: 0.8em;
}
.el-table {
    line-height: 0.8em;
}
.el-table >>> .el-table__cell {
    padding: 8px 0;
}
.y-tbody{
    max-height: 200px;
    overflow-y: scroll;
}
.table td,table th {
     border-top: none;
    border: 1px solid #dcdfe6;
    background-color:aliceblue;
    max-width: 250px;
}
/* .el-table >>> thead{
    color: #fff;
}
.el-table >>> thead th {
      background-color: red  !important;
} */
/* table tr:nth-child(odd){
background: #ccc;
} */
table tr:nth-child(even){
background: #efefef;

}
.el-table >>> tr:nth-child(even){
background: #efefef;

}
.card >>> .card-body {
    padding: 0.2rem !important;
}
.card >>> .card-header
{
  padding: 0.5rem 1rem;
}
.sum-row {
  margin-top: 0px;
}
.sum-row-cols {
  padding-right: 15px;
}
.sum-row-col .info-box {
  height: 100px;
  margin: 0px;
  padding: 0px;
}
.sum-row-col .bg-aqua {
  background-color: #00c0ef !important;
  color: #fff !important;
}
.progress-description,
.info-box-text {
  display: block;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bg-deep-blue {
  background-color: #3e72c5 !important;
  color: #fff;
}
.info-box .progress {
  background-color: rgba(0, 0, 0, 0.125);
  height: 2px;
  margin: 5px 0;
}
.info-box .progress {
  background: rgba(0, 0, 0, 0.2);
  margin: 5px -10px 5px -10px;
  height: 2px;
}
.info-box-icon {
  border-top-left-radius: 2px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 2px;
  display: block;
  float: left;
  height: 100px;
  width: 80px;
  text-align: center;
  font-size: 45px;
  line-height: 100px;
  /* background: rgba(0, 0, 0, 0.2); */
}
.box-div
{
    width: 25%;float: left;
    height:290px;
    padding-right: 8px;
}
.box-div-alert
{
    width: 100%;
    float: left;
    height:254px;
}
.div-circular {
  width:16px;
  height:16px;
  border-radius:50%;
  }
.div-normal
{
  background-color:#25b38e;
}
.div-abnormal
{
  background-color:#686868;
}
/* .bg-red {
    background: #bab000 !important;
} */
.map >>>.BMap_cpyCtrl{
  display: none !important;
}
.map >>> .anchorBL{
       display:none !important;
   }
</style>
