<template>
  <div class="main">
    <div class="full_page">
      <!-- 左-->
      <div class="trade_left" style="width: 20%">
      <div style="height: 37%;" >
        <display-board  style="display: flex; justify-content: space-between; height: 98%;"  title="安全">
          <div style="padding-top: 2rem;">
          <winners-list style="height: 60%;overflow: auto;" :mouseHand="true"  id="safe_list" :rows="arSafeList"/>
          </div>
        </display-board>
      </div>
      <div style="height: 37%;" >
        <display-board  style="display: flex; justify-content: space-between; height: 98%;"  title="质量">
          <div style="padding-top: 2rem;">
          <winners-list style="height: 60%;overflow: auto;" :mouseHand="true"  id="quality_list" :rows="arQualityList"/>
          </div>
        </display-board>
      </div>
        <div style="height: 26%;" >
          <display-board  style="display: flex; justify-content: space-between; height: 98%;"  title="人员情况表">
            <div style="height: 100%;width: 100%;padding-top: 2rem;">
              <div style="height: 100%;width: 100%" ref="people"></div>
            </div>
          </display-board>
        </div>
      </div>
      <!--中-->
      <div class="trade_middle" style="border: none;box-shadow: none;width: 54%;padding-left: 0.5rem">

        <display-board  style="height: 76%">
          <div style="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>
        </display-board>
        <div style="display: flex; justify-content: space-between; height: 23%; padding-top: 2rem;" >
          <showcase style="width: 16%;" title="当日订单量">
            <title-content-mark
              style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
              content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="drddl.weight+ ' 万吨'"
            />
            <title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
                                content-style="font-size: 14px;" mark-style="font-size: 10px;"
                                :content="drddl.amount+' 万元'" />
          </showcase>
          <showcase style="width: 16%;" title="当日运单量" :mouseHand="true" @click.native="routerTo('/department-shipment')">
            <title-content-mark
              style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
              content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="drydl.count + ' 车'"
            />
            <title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
                                content-style="font-size: 14px;" mark-style="font-size: 10px;"
                                :content="drydl.weight + ' 万吨'" />
          </showcase>
          <showcase style="width: 16%;" title="当日完成量">
            <title-content-mark
              style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
              content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="drwcl.weight+ ' 万吨'"
            />
            <title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
                                content-style="font-size: 14px;" mark-style="font-size: 10px;"
                                :content="drwcl.amount+ ' 万元'" />
          </showcase>
          <showcase style="width: 16%;" title="余量">
            <title-content-mark
              style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
              content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="yl.weight+ ' 万吨'" />
            <title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
                                content-style="font-size: 14px;" mark-style="font-size: 10px;"
                                :content="yl.amount+ ' 万元'" />
          </showcase>
          <showcase style="width: 16%;" title="流失客户" :mouseHand="true" @click.native="routerTo('/lost-add-customer',2)">
            <title-content-mark
              style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
              content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="lskh.weight+' 万吨'"
            />
            <title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
                                content-style="font-size: 14px;" mark-style="font-size: 10px;"
                                :content="lskh.amount+ ' 万元'" />
          </showcase>
          <showcase style="width: 16%;" title="新增客户" :mouseHand="true" @click.native="routerTo('/lost-add-customer',1)">
            <title-content-mark
              style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
              content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="xzkh.weight+ ' 万吨'"
            />
            <title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
                                content-style="font-size: 14px;" mark-style="font-size: 10px;"
                                :content="xzkh.amount + ' 万元'" />
          </showcase>
        </div>
      </div>

      <!-- 右-->
      <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="水运">
            <div style="height: 36%;display: flex;justify-content: space-evenly;padding-top: 1.5rem">
              <simple-card style="width:100%;height: 100%">
                <title-content-mark style="color: #5eeef4;display: inline-block;font-size: 14px;"   :title="arCarSum[0].title+'：'+arCarSum[0].value"/>
                <title-content-mark style="display: inline-block;padding-left: 6rem;font-size: 14px" :title-style="{color:'red',paddingLeft: '2rem'}" :title="arCarSum[1].title+'：'+arCarSum[1].value"/>
              </simple-card>
            </div>
            <div style="height: 70%;width: 100%;padding-right: 2rem">
              <div >
                <title-content-mark style="padding-bottom: 0px"   :title="barTitle+'：'+carPlan+'%'"  :title-style="{fontSize:'22px'}"  is-bold is-center/>
              </div>
              <div style="height: 100%;width: 100%" ref="ship"></div>
            </div>
          </display-board>
        </div>
        <div style="height: 34%;" >
          <display-board  style="display: flex; justify-content: space-between; height: 98%;"  title="铁运">
            <div style="height: 36%;display: flex;justify-content: space-evenly;padding-top: 1.5rem">
              <simple-card style="width:100%;height: 100%">
                <title-content-mark style="color: #5eeef4;display: inline-block;font-size: 14px;"   :title="arCarSum[0].title+'：'+arCarSum[0].value"/>
                <title-content-mark style="display: inline-block;padding-left: 6rem;font-size: 14px" :title-style="{color:'red',paddingLeft: '2rem'}" :title="arCarSum[1].title+'：'+arCarSum[1].value"/>
              </simple-card>
            </div>
            <div style="height: 70%;width: 100%;padding-right: 2rem">
              <div >
                <title-content-mark style="padding-bottom: 0px"   :title="barTitle+'：'+carPlan+'%'"  :title-style="{fontSize:'22px'}"  is-bold is-center/>
              </div>
              <div style="height: 100%;width: 100%" ref="train"></div>
            </div>
          </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 * as echarts from "echarts";
import SimpleCard from "../components/card/simple-card.vue";
import TitleContentMark from "../components/layout/title-content-mark.vue";
import Showcase from "../components/container/showcase.vue";
import {getSafetyQuality} from "../../api/apiList";

import mapPointMark from "../components/map/map-point-mark.vue"
import {
  getTruckShipConditionData
} from "../../api/apiList"


export default {
  name: "SafeQuality",
  components: {
    DisplayBoard,
    SimpleCard,
    TitleContentMark,
    Showcase,
    WinnersList,
    mapPointMark
  },
  data() {
      return {
        arSafeList:[],
        arQualityList:[],
        arCarSum:[
          {title:'当班车数',value:'1350'},
          {title:'异常车数',value:'0'}
        ],
        arShipSum:[
          {title:'当班船数',value:'1350'},
          {title:'异常船数',value:'0'}
        ],
        arTrainSum:[
          {title:'当班数',value:'1350'},
          {title:'异常数',value:'0'}
        ],
        barTitle:'今日计划完成',
        carPlan:'89',
        lskh: {
          weight: "2,000",
          amount: "20,000",
        },
        xzkh: {
          weight: "2,000",
          amount: "20,000",
        },
        drddl: {
          weight: "2,000",
          amount: "20,000",
        },
        drydl: {
          count: "2,000",
          weight: "20,000",
        },
        drwcl: {
          weight: "2,000",
          amount: "20,000",
        },
        yl: {
          weight: "2,000",
          amount: "20,000",
        },
        people_options: {
          tooltip: {
            trigger: 'axis'
          },
          textStyle: {
            color: "#FFFFFF",
            fontSize: "12"
          },
          grid: {
            containLabel: true,
            top: "10%",
            bottom: '0'
          },
          yAxis: {
            type: "value",
            splitLine: {
              lineStyle: {
                color: "#1E2C58"
              }
            },

          },
          xAxis: {
            data: ['在编', '出勤', '请假'],
            axisLabel: {
              color: "#FFFFFF",
              fontSize: "12",
            },
            axisTick: {
              show: false
            }
          },
          series: []
        },
        car_options: {
          tooltip: {
            trigger: 'axis'
          },
          textStyle: {
            color: "#FFFFFF",
            fontSize: "12"
          },
          grid: {
            containLabel: true,
            top: "10%",
            bottom: '0'
          },
          yAxis: {
            show:false
          },
          xAxis: {
            data: ['计划量', '完成量', '余量'],
            axisLabel: {
              color: "#FFFFFF",
              fontSize: "12",
            },
            axisTick: {
              show: false
            },
            axisLine:{
              show:false
            }
          },
          series: [{
            type: 'bar',
            xAxisIndex: null,
            smooth: true,
            itemStyle:{
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1, // 渐变方向从上到下
                [
                  { offset: 0, color: '#83bff6' },   // 柱图顶部颜色
                  { offset: 0.5, color: '#188df0' }, // 柱图中间颜色
                  { offset: 1, color: '#188df0' }    // 柱图底部颜色
                ]
              ),
              borderRadius:[3,3,3,3] ,
            },
            label:{
              show:true,
              position:'top',
              formatter: '{c}吨',
              color:'#FFFFFF',
            },
            barWidth: '30%',
            barGap: '10%',
            emphasis: {
              focus: 'series'
            },
            data: [19,11,33]
          }]
        },
        ship_options: {
          tooltip: {
            trigger: 'axis'
          },
          textStyle: {
            color: "#FFFFFF",
            fontSize: "12"
          },
          grid: {
            containLabel: true,
            top: "10%",
            bottom: '0'
          },
          yAxis: {
            show:false
          },
          xAxis: {
            data: ['计划量', '完成量', '余量'],
            axisLabel: {
              color: "#FFFFFF",
              fontSize: "12",
            },
            axisTick: {
              show: false
            },
            axisLine:{
              show:false
            }
          },
          series: [{
            type: 'bar',
            xAxisIndex: null,
            smooth: true,
            itemStyle:{
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1, // 渐变方向从上到下
                [
                  { offset: 0, color: '#83bff6' },   // 柱图顶部颜色
                  { offset: 0.5, color: '#188df0' }, // 柱图中间颜色
                  { offset: 1, color: '#188df0' }    // 柱图底部颜色
                ]
              ),
              borderRadius:[3,3,3,3] ,
            },
            label:{
              show:true,
              position:'top',
              formatter: '{c}吨',
              color:'#FFFFFF',
            },
            barWidth: '30%',
            barGap: '10%',
            emphasis: {
              focus: 'series'
            },
            data: [19,11,33]
          }]
        },
        train_options: {
          tooltip: {
            trigger: 'axis'
          },
          textStyle: {
            color: "#FFFFFF",
            fontSize: "12"
          },
          grid: {
            containLabel: true,
            top: "10%",
            bottom: '0'
          },
          yAxis: {
            show:false
          },
          xAxis: {
            data: ['计划量', '完成量', '余量'],
            axisLabel: {
              color: "#FFFFFF",
              fontSize: "12",
            },
            axisTick: {
              show: false
            },
            axisLine:{
              show:false
            }
          },
          series: [{
            type: 'bar',
            xAxisIndex: null,
            smooth: true,
            itemStyle:{
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1, // 渐变方向从上到下
                [
                  { offset: 0, color: '#83bff6' },   // 柱图顶部颜色
                  { offset: 0.5, color: '#188df0' }, // 柱图中间颜色
                  { offset: 1, color: '#188df0' }    // 柱图底部颜色
                ]
              ),
              borderRadius:[3,3,3,3] ,
            },
            label:{
              show:true,
              position:'top',
              formatter: '{c}吨',
              color:'#FFFFFF',
            },
            barWidth: '30%',
            barGap: '10%',
            emphasis: {
              focus: 'series'
            },
            data: [19,11,33]
          }]
        },
        truckCount: "0",
        shipCount: "0",
        truckDis: [],
        shipDis: [],
        derviceDis: [],
        crurrDevireMapTyep: ""
      }
  },
  methods: {

    refreshData() {
        this.renderLeftView();
        this.countCarAndShipAndTrain();
        this.getTruckShipCondition();
    },

    // 渲染左侧
    renderLeftView(){
      getSafetyQuality().then(res => {
        // 安全
        let safetyArray=res.data.safetyArray;
        let safetyArr=[];
        if(safetyArray.length>0){
          safetyArray.forEach(function (row) {
            var item={};
            item.title=row;
            safetyArr.push(item);
          });
          this.arSafeList=safetyArr;
        }
        // 质量
        let qualityArray=res.data.qualityArray;
        let qualityArr=[];
        if(qualityArray.length>0){
          qualityArray.forEach(function (row) {
            var item={};
            item.title=row;
            qualityArr.push(item);
          });
          this.arQualityList=qualityArr;
        }
        // 统计人员信息
        let peopleCount=res.data.peopleCount;
        let sery=this.getPeopleBarCss();
        if(peopleCount&&peopleCount.people_number_sum){
          sery.data.push(peopleCount.people_number_sum);
        }else {
          sery.data.push(0);
        }
        if(peopleCount&&peopleCount.attendees_number_sum){
          sery.data.push(peopleCount.attendees_number_sum);
        }else {
          sery.data.push(0);
        }
        if(peopleCount&&peopleCount.absences_number_sum){
          sery.data.push(peopleCount.absences_number_sum);
        }else {
          sery.data.push(0);
        }
        var maxData = Math.max.apply(null, sery.data);
        var maxY=maxData*1.2;
        this.people_options.yAxis.max=maxY;
        this.people_options.series=[];
        this.people_options.series.push(sery);
        this.people.setOption(this.people_options);
      });
    },
    getPeopleBarCss(){
      return {
        type: 'bar',
        xAxisIndex: null,
        smooth: true,
        itemStyle:{
          color:new echarts.graphic.LinearGradient(
            0, 0, 0, 1, // 渐变方向从上到下
            [
              { offset: 0, color: '#83bff6' },   // 柱图顶部颜色
              { offset: 0.5, color: '#188df0' }, // 柱图中间颜色
              { offset: 1, color: '#188df0' }    // 柱图底部颜色
            ]
          ),
          shadowBlur: 10,
          shadowOffsetY: 10,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
          borderRadius:[3,3,0,0] ,
        },
        label:{
          show:true,
          position:'top',
          color:'#FFFFFF',
        },
        barWidth: '30%',
        barGap: '20%',
        emphasis: {
          focus: 'series'
        },
        data: []
      }
    },
    // 统计车、船、火车单量完成情况
    countCarAndShipAndTrain(){
      this.car.setOption(this.car_options);
      this.ship.setOption(this.ship_options);
      this.train.setOption(this.train_options);
    },
    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() {
    setTimeout(() => {
      let peopleDom = this.$refs.people;
      this.people = echarts.init(peopleDom);

      let carDom = this.$refs.car;
      this.car = echarts.init(carDom);

      let shipDom = this.$refs.ship;
      this.ship = echarts.init(shipDom);

      let trainDom = this.$refs.train;
      this.train = echarts.init(trainDom);

      this.refreshData();
      window.addEventListener('resize', this.resizeChart);
    },500);
  },
  beforeDestroy() {

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

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

.unSelectedBtn {
  color: #00c8d6;
  background-color: #1234a1;
}
</style>
