<template>
  <div class="screen-container">
    <bd-map :loaded="loaded"/>
    <div class="screen-title-container"><span class="title-content">Digital Construction Dashboard</span></div>
    <content-block title="Construction Management" class="screen-left-container">
      <template v-slot:content>
        <div class="control-content">
          <div class="ctl-item">
            <el-input placeholder="请输入内容" v-model="searchVal" class="input-with-select">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </div>
          <div class="ctl-item">
            <cons-unit-tree v-model="consUnit"/>
          </div>
        </div>
        <div class="machine-list">
          <div class="list-container-title">
            Machine List <span v-if="loading" style="font-size: 10px;color: #fefefe;margin-left: 10px">加载中...</span>
          </div>
          <div class="content-list infinite-list-wrapper"
               v-infinite-scroll="loadMachine"
               :infinite-scroll-disabled="disabled"
          >
            <div v-for="item in machineList" class="list-item" :key="item.id" @click="handleMachineClick(item)">
              {{ item.name }}({{ item.machineNum }})
            </div>
            <p v-if="noMore" class="no-more" style="margin-top: auto">没有更多了</p>
          </div>
        </div>
      </template>
    </content-block>
    <div class="screen-right-container">
      <content-block title="Online Machinery" class="online-machine-block">
        <template v-slot:content>
          <div class="online-summery">
            <div class="machine-pie-chart">
              <pie-chart-block :optCfg="machineOpt"/>
            </div>
            <div class="machine-pie-legend">
              <div class="legend-item">
                <i :style="{ backgroundColor:machineOpt.color[0] }"/>
                <span>Online Machinery</span>
                <span>{{ machineStatusCnt.online || 0 }}</span>
              </div>
              <div class="legend-item">
                <i :style="{ backgroundColor:machineOpt.color[1] }"/>
                <span>Offline Machinery</span>
                <span>{{ machineStatusCnt.offline || 0 }}</span>
              </div>
            </div>
          </div>
          <div class="online-list">
            <div class="list-item" v-for="item in onlineMachine">
              <span class="machine-name">{{ item.name }}</span>
              <span class="cons-unit">{{ item.machineNum }}</span>
            </div>
          </div>
        </template>
      </content-block>
      <MachineIndex v-if="selectMachine" :select-machine="selectMachine"></MachineIndex>
    </div>
    <PileHoleDetail ref="pileHoleDialog"/>
  </div>
</template>

<script>
import BdMap from "@/components/map/index.vue";
import Treeselect from "@riophae/vue-treeselect";
import ConsUnitTree from "@/views/cons/consUnit/ConsUnitTree.vue";
import ContentBlock from "@/views/cons/screen/ContentBlock.vue";
import PieChartBlock from "@/components/charts/PieChartBlock.vue";
import LineChartBlock from "@/components/charts/LineChartBlock.vue";
import {calcPileMachineOnOffline, getConsUnitMachine, listAllPileMachineInfo} from "@/api/cons/pileMachineInfo";
import {listPileHoleRealtimeIndex} from "@/api/cons/pileHoleInfo";
import maphandle from "@/components/map/maphandle";
import MachineIndex from "@/views/cons/screen/MachineIndex.vue";
import PileHoleDetail from "@/views/cons/screen/PileHoleDetail.vue";
import {copyObj} from "@/utils";
import pileMachine from "./img/pile-machine.svg"

export default {
  components: {
    PileHoleDetail,
    MachineIndex,
    LineChartBlock,
    PieChartBlock,
    ContentBlock,
    ConsUnitTree,
    BdMap,
    Treeselect
  },
  mixins: [maphandle],
  props: {
    ws: {
      type: String,
      default: '',
    },
  },
  computed: {
    noMore() {
      return this.count >= 100
    },
    disabled() {
      return this.loading || this.noMore
    }
  },
  watch: {
    consUnit(val) {
      this.loadMachine()
    },
    searchVal(val) {
      this.searchValOnchange()
    },
    machineOriList(val) {
      val && this.addMachineMarker()
    }
  },
  data() {
    return {
      mapIns: null,
      consUnit: null,
      searchVal: "",
      count: 10,
      loading: false,
      machineList: [],
      machineOriList: [],
      selectMachine: null,
      pileMachineLayer: null,
      realtimeInterVal: null,
      machineLatextIndex: {},
      pileHoleList: [],
      pileHoleLayer: null,
      machineStatusCnt: {},
      onlineMachine: [],
      machineOpt: {
        color: ['#006699', '#4cabce'],
        tooltip: {
          show: false
        },
        legend: {
          show: false,
          top: 0
        },
        label: {
          show: false,
        },
        emphasis: {
          label: {
            show: false,
          }
        },
        labelLine: {
          show: false
        },
        series: [
          {
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['50%', '50%'],
            label: {
              show: false,
              position: 'center'
            },
            data: [
              {
                value: 19,
                name: 'online',
              },
              {
                value: 75,
                name: 'offline',
              }
            ],
          },
        ],
      },
    };
  },
  // 组件卸载前清空图层信息
  beforeDestroy() {
    this.destroyLayer(this.pileHoleLayer.cust.layerId, this.mapIns)
    this.destroyLayer(this.pileMachineLayer.cust.layerId, this.mapIns)
  },
  created() {

  },
  mounted() {

  },
  methods: {
    init() {
      this.loadMachine()
      this.loadMachineOnOffline()
      this.loadOnlineMachine()
    },
    loadMachine() {
      this.loading = true;
      getConsUnitMachine(this.consUnit).then((response) => {
        this.machineList = response.data
        this.machineOriList = copyObj(response.data)
        this.searchValOnchange()
        this.count = 100
        this.loading = false
      })
    },

    loadOnlineMachine() {
      listAllPileMachineInfo({
        status: "00"
      }).then(response => {
        this.onlineMachine = response.rows
      });
    },
    addMachineMarker() {
      this.machineOriList.forEach(item => {
        let marker = new BDLayers.Lib.Overlays.Marker(`marker${item.id}`, [item.lng, item.lat], {
          symbol: {
            'textName': `${item.name}`,
            'textSize': 10,
            markerWidth: 45,
            markerHeight: 45,
            markerDx: 30,
            textDx: 30,
            textDy: 10,
            'markerFile': pileMachine,
          }
        });
        marker.on('click', () => {
          this.selectMachine = item
        })
        this.pileMachineLayer.addMarker(marker)
      })
    },
    searchValOnchange() {
      if (this.searchVal) {
        this.machineList = this.machineOriList.filter(item => `${item.name}(${item.machineNum})`.includes(this.searchVal))
      }
    },
    loadMachineOnOffline() {
      calcPileMachineOnOffline().then(response => {
        if (response.data) {
          const {online, offline} = response.data
          this.machineStatusCnt = response.data
          this.machineOpt.series[0].data = [{
            value: online,
            name: 'online'
          },
            {
              value: offline,
              name: 'offline'
            }]
        }
      })
    },
    loadPileHole() {
      listPileHoleRealtimeIndex({}).then(response => {
        this.pileHoleList = response.data
        this.pileHoleList.forEach((item, index) => {
          let circle = new BDLayers.Lib.Overlays.Circle(`circle${index}`, {
            center: [item.lng, item.lat], // 圆的中心点点坐标
            radius: 2,
            symbol: {
              lineColor: '#34495e',
              lineWidth: 1,
              polygonFill: '#1bbc9b',
              polygonOpacity: 0.2
            },
          });
          circle.cust = item
          circle.on('click', (e) => {
            this.pileHoleClick(e.target.cust)
          })
          this.pileHoleLayer.addGeometry(circle);
        })
      })
    },
    loaded(map) {
      this.mapIns = map
      this.pileHoleLayer = this.createLayer(map)
      this.pileMachineLayer = this.createLayer(map)
      this.loadPileHole()
      this.init();
    },
    handleClick(e) {
    },
    pileHoleClick(pileHole) {
      this.$refs.pileHoleDialog.showDialog(pileHole)
    },
  },
};
</script>
<style lang="scss" src="./index.scss" scoped/>
