<template>
  <div class="main">
    <div class="full_page">
      <!-- 左-->
      <div class="trade_left">
        <div style="height: 37%;">
          <display-board style="display: flex; justify-content: space-between; height: 98%;" title="安全">
            <winners-list style="height: 96%;overflow: auto;" :mouseHand="true" @click.native="goArBar" id="safe_list"
                          :rows="arSafeList"/>
          </display-board>
        </div>
        <div style="height: 37%;">
          <display-board style="display: flex; justify-content: space-between; height: 98%;" title="质量">
            <winners-list style="height: 96%;overflow: auto;" :mouseHand="true" @click.native="goArBar"
                          id="quality_list" :rows="arQualityList"/>
          </display-board>
        </div>
        <div style="height: 26%;">
          <display-board style="display: flex; justify-content: space-between; height: 98%;" title="人员情况表">
            <div class="bar">
              <div ref="bar"></div>
            </div>
          </display-board>
        </div>
      </div>
      <!--中-->
      <display-board class="trade_middle">
        <div class="trade_middle" style="border: none;box-shadow: none;">
          <div style="justify-content: space-between; height: 80%;display: inline-block;">
            <div style="height: 100%;display: flex;justify-content: space-evenly;">
              <simple-card   @click.native="changeDevireMap('truckDis')" :class="{'selectedBtn': crurrDevireMapTyep === 'truckDis'}" style="width: 20%;height: 100%">
                <title-content-mark style="color: #5eeef4;" title="车辆" :content="truckCount" mark="辆"
                                    isCenter isBold/>
              </simple-card>
              <simple-card  @click.native="changeDevireMap('shipDis')" :class="{'selectedBtn': crurrDevireMapTyep === 'shipDis'}" style="width: 20%;height: 100%">
                <title-content-mark style="color: #5eeef4;" title="船舶" :content="shipCount" mark="艘"
                                    isCenter isBold/>
              </simple-card>
            </div>
            <map-point-mark style="width: calc(43vw); height: calc(50vh);" :derviceDis="derviceDis"></map-point-mark>
          </div>
          <div style="display: flex; justify-content: space-between; height: 20%;">
          </div>
        </div>
      </display-board>
      <!-- 右-->
      <div class="trade_right">
        <div style="height: 33%;">
          <display-board style="display: flex; justify-content: space-between; height: 98%;" title="汽运">

          </display-board>
        </div>
        <div style="height: 33%;">
          <display-board style="display: flex; justify-content: space-between; height: 98%;" title="水运">

          </display-board>
        </div>
        <div style="height: 34%;">
          <display-board style="display: flex; justify-content: space-between; height: 98%;" title="铁运">

          </display-board>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import DisplayBoard from "../components/container/display-board.vue";
import WinnersList from "../components/card/winners-list.vue";
import TitleContentMark from "../components/layout/title-content-mark.vue";
import SimpleCard from "../components/card/simple-card.vue";
import mapPointMark from "../components/map/map-point-mark.vue"
import {
  getTruckShipConditionData
} from "../../api/apiList"

export default {
  name: "SafeQuality",
  components: {
    TitleContentMark,
    DisplayBoard,
    WinnersList,
    mapPointMark,
    SimpleCard
  },
  data() {
    return {
      arSafeList: [],
      arQualityList: [],
      truckCount: "0",
      shipCount: "0",
      truckDis: [],
      shipDis: [],
      derviceDis: [],
      crurrDevireMapTyep: ""

    }
  },
  methods: {

    refreshData() {
      this.getPeopleInfos();
      this.getTruckShipCondition();
    },
    getPeopleInfos() {

      // var seriesBar = [];
      // seriesBar.push(adapterSeriesDataBar(null, "在编", [10,20]));
      // seriesBar.push(adapterSeriesDataBar(null, "出勤", [15]));
      // seriesBar.push(adapterSeriesDataBar(null, "请假", [8]));
      //
      // this.peopleInfoOption.series = seriesBar;
      // let barDom = this.$refs.bar;
      // let chart=echarts.init(barDom);
      // chart.setOption(this.peopleInfoOption);

    },
    getTruckShipCondition() {
      getTruckShipConditionData().then(res => {
        let data = res.data
        let truckCount = 0;
        let shipCount = 0;
        for (let device of data.device_type_sum) {
          if (device.device_type == '3' || device.device_type == '1') {
            truckCount = truckCount + parseInt(device.count)
          }
          if (device.device_type == '4') {
            shipCount = shipCount + parseInt(device.count)
          }
        }
        this.truckCount = truckCount + "";
        this.shipCount = shipCount + "";
        this.shipDis = data.ship_by_province_sum;
        this.truckDis = data.truck_by_province_sum;
        if(this.crurrDevireMapTyep == "") {
          this.changeDevireMap('truckDis');
        }
      })
    },
    changeDevireMap(dimension) {
      this.crurrDevireMapTyep = dimension;
      switch (dimension) {
        case 'truckDis':
          this.derviceDis = this.truckDis;
          break;
        case 'shipDis':
          this.derviceDis = this.shipDis;
          break;
        default:
          return;
      }
    },
  },
  mounted() {
    this.refreshData();
  },
  beforeDestroy() {

  },
  watch: {
    countDown(n, o) {
      if (n === 1) {
        this.refreshData();
      }
    },
  },
  props: {
    countDown: {
      type: Number
    }
  }
};
</script>

<style scoped>
#ar_company_list:hover {
  background-color: #19EBFF10;
  transform: scale(101%);
}

.selectedBtn {
  color: #1234a1 !important;
  background-color: #005dd6 !important;
}

.unSelectedBtn {
  color: #00c8d6;
  background-color: #1234a1;
}

</style>
