<template>
  <div class="main">
    <div class="full_page">
      <!-- 左-->
      <div class="trade_left" style="width: 20%">
      <div style="height: 37%;" >
        <display-board  style="height: 98%;"  title="安全">
          <scroll-list style="height: 97%;overflow: auto;" :rows="arSafeList" :title-independent-style="true"/>
        </display-board>
      </div>
      <div style="height: 37%;" >
        <display-board  style="height: 100%;"  title="质量">
          <scroll-list style="height: 97%;overflow: auto;" :rows="arQualityList">
          </scroll-list>
<!--          <winners-list style="height: 96%;overflow: auto;" :mouseHand="true"  id="quality_list" :rows="arQualityList" />-->
        </display-board>
      </div>
        <div style="height: 26%;padding-top: 0.5rem" >
          <display-board  style="display: flex; justify-content: space-between; height: 100%;"  title="人员情况表">
            <div style="height: 100%;width: 100%;padding-top: 3rem;">
              <div style="height: 100%;width: 100%" ref="people" id="people_bar"></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" style="width: 24%;;padding-left: 0.5rem">
        <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;font-size: 14px;"   :title="arCarSum[0].title+'：'+arCarSum[0].value" is-center is-bold/>
                <!--
                <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+'：'+carPlanRate+'%'"  :title-style="{fontSize:'22px'}"  is-bold is-center/>
              </div>
                <div style="height: 100%;width: 100%" ref="car"></div>
            </div>
          </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;font-size: 14px;"   :title="arShipSum[0].title+'：'+arShipSum[0].value" is-center is-bold/>
                <!--
                <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+'：'+shipPlanRate+'%'"  :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;font-size: 14px;"   :title="arTrainSum[0].title+'：'+arTrainSum[0].value" isCenter is-bold/>
                <!--
                <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+'：'+trainPlanRate+'%'"  :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 ScrollList from "../components/card/scroll-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,
  getTruckShipConditionData,
  getCarShipTrainComplete,
  getOrderBusinessConditionData, getOrderLoseAddCustomer
} from "../../api/apiList";
import {conver_amont, conver_num_retain} from "../../utils/numUtil";
import mapPointMark from "../components/map/map-point-mark.vue";


export default {
  name: "SafeQuality",
  components: {
    DisplayBoard,
    SimpleCard,
    TitleContentMark,
    Showcase,
    WinnersList,
    ScrollList,
    mapPointMark
  },
  data() {
      return {
        arSafeList:[],
        arQualityList:[],
        arCarSum:[
          {title:'当班车数',value:0},
          {title:'异常车数',value:'0'}
        ],
        arShipSum:[
          {title:'当班船数',value:0},
          {title:'异常船数',value:'0'}
        ],
        arTrainSum:[
          {title:'当班数',value:0},
          {title:'异常数',value:'0'}
        ],
        barTitle:'今日计划完成',
        carPlanRate:0,
        shipPlanRate:0,
        trainPlanRate:0,
        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: "15%",
            left: "1%",
            right: "1%",
            bottom: "1%"
          },
          yAxis: {
            type: "value",
            min: 0,
            minInterval: 1,
            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: "15%",
            left: "1%",
            right: "1%",
            bottom: "1%"
          },
          yAxis: {
            show:false,
            type:'log'
          },
          xAxis: {
            data: ['计划量', '完成量', '余量'],
            axisLabel: {
              color: "#FFFFFF",
              fontSize: "12",
            },
            axisTick: {
              show: false
            },
            axisLine:{
              show:false
            }
          },
          series: []
        },
        ship_options: {
          tooltip: {
            trigger: 'axis'
          },
          textStyle: {
            color: "#FFFFFF",
            fontSize: "12"
          },
          grid: {
            containLabel: true,
            top: "15%",
            left: "1%",
            right: "1%",
            bottom: "1%"
          },
          yAxis: {
            show:false,
            type:'log'
          },
          xAxis: {
            data: ['计划量', '完成量', '余量'],
            axisLabel: {
              color: "#FFFFFF",
              fontSize: "12",
            },
            axisTick: {
              show: false
            },
            axisLine:{
              show:false
            }
          },
          series: []
        },
        train_options: {
          tooltip: {
            trigger: 'axis'
          },
          textStyle: {
            color: "#FFFFFF",
            fontSize: "12"
          },
          grid: {
            containLabel: true,
            top: "15%",
            left: "1%",
            right: "1%",
            bottom: "1%"
          },
          yAxis: {
            show:false,
            type:'log'
          },
          xAxis: {
            data: ['计划量', '完成量', '余量'],
            axisLabel: {
              color: "#FFFFFF",
              fontSize: "12",
            },
            axisTick: {
              show: false
            },
            axisLine:{
              show:false
            }
          },
          series: []
        },
        truckCount: "0",
        shipCount: "0",
        truckDis: [],
        shipDis: [],
        derviceDis: [],
        crurrDevireMapTyep: ""
      }
  },
  methods: {

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

    // 渲染左侧
    renderLeftView(){
      getSafetyQuality().then(res => {
        // 安全
        let safetyArray=res.data.safetyArray;
        let safetyArr=[];
        let size=safetyArray.length;
        if(size>0){
          safetyArray.forEach(function (row) {
            var item={};
            item.title=row.data;
            if(row.type==='10'){
              item.titleStyle=[{color:'yellow'}];
            }else if(row.type==='20'){
              item.titleStyle=[{color:'red'}];
            }else{
              item.titleStyle=[{color:'white'}];
            }
            safetyArr.push(item);
          });
          if(size<5){
            for(let i=0;i<5-size;i++){
              safetyArr.push({blankColumn:true});
            }
          }
          this.arSafeList=safetyArr;
        }
        // 质量
        let qualityArray=res.data.qualityArray;
        let qualityArr=[];
        let qualitySize=qualityArray.length;
        if(qualitySize>0){
          qualityArray.forEach(function (row) {
            var item={};
            item.title=row;
            qualityArr.push(item);
          });
          if(qualitySize<5){
            for(let i=0;i<5-qualitySize;i++){
              qualityArr.push({blankColumn:true});
            }
          }
          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=Math.floor(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);
      });
    },
    // 中间底部
    getOrderBusinessCondition() {
      getOrderBusinessConditionData(this.today).then(res => {
        let data = res.data
        this.drddl.amount = conver_amont(data.cur_sell_settle_amount);
        this.drddl.weight = conver_amont(data.cur_unit_weight);

        this.drydl.count = data.drydl_count;
        this.drydl.weight = conver_amont(data.drydl_weight);

        this.drwcl.amount = conver_amont(data.cur_finish_sell_settle_amount);
        this.drwcl.weight = conver_amont(data.cur_finish_unit_weight);
        this.yl.amount = conver_amont(data.cur_unfinish_sell_settle_amount);
        this.yl.weight = conver_amont(data.cur_unfinish_unit_weight);
      })
    },
    getLoseAndAdd() {
      getOrderLoseAddCustomer(this.today).then(res => {
        let data = res.data
        this.lskh.amount = conver_amont(data.lost_sell_settle_amount_sum);
        this.lskh.weight = conver_amont(data.lost_weight_sum);
        this.xzkh.amount = conver_amont(data.add_sell_settle_amount_sum);
        this.xzkh.weight = conver_amont(data.add_weight_sum);
      })
    },
    // youb右边
      renderRightView(){
      getCarShipTrainComplete().then(res => {
        var resData=res.data;
        var plan=resData.plan;
        var complete=resData.complete;
        var remaining=resData.remaining;
        var countToday=resData.countToday;

        var car=[];
        let carPlan=this.formatNumber(plan.car);
        car.push(this.switchZeroToNull(carPlan));
        let carCompletion=this.formatNumber(complete.car);
        car.push(this.switchZeroToNull(carCompletion));
        car.push(this.switchZeroToNull(this.formatNumber(remaining.car)));
        this.carPlanRate=carPlan==0?100:Math.floor((100*carCompletion)/carPlan);
        var ship=[];
        let shipPlan=this.formatNumber(plan.ship);
        ship.push(this.switchZeroToNull(shipPlan));
        let shipCompletion=this.formatNumber(complete.ship);
        ship.push(this.switchZeroToNull(shipCompletion));
        ship.push(this.switchZeroToNull(this.formatNumber(remaining.ship)));
        this.shipPlanRate=shipPlan==0?100:Math.floor((shipCompletion*100)/shipPlan);
        var train=[];
        let trainPlan=this.formatNumber(plan.train);
        train.push(this.switchZeroToNull(trainPlan));
        let trainCompletion=this.formatNumber(complete.train);
        train.push(this.switchZeroToNull(trainCompletion));
        train.push(this.switchZeroToNull(this.formatNumber(remaining.train)));
        this.trainPlanRate=trainPlan==0?100:Math.floor((100*trainCompletion)/trainPlan);
        // 渲染
        var seryCar=this.getcarShipTrainCss();
        seryCar.data.push(car[0]);
        seryCar.data.push(car[1]);
        seryCar.data.push(car[2]);
        this.car_options.series=[];
        this.car_options.series.push(seryCar);
        // 最大高度
        var maxDataCar = Math.max.apply(null, seryCar.data);
        this.car_options.yAxis.max=maxDataCar*1.1;
        this.car.setOption(this.car_options);
        var seryShip=this.getcarShipTrainCss();
        seryShip.data=ship;
        this.ship_options.series=[];
        this.ship_options.series.push(seryShip);
        // 最大高度
        var maxDataShip = Math.max.apply(null, seryShip.data);
        this.ship_options.yAxis.max=maxDataShip*1.1;
        this.ship.setOption(this.ship_options);
        var seryTrain=this.getcarShipTrainCss();
        seryTrain.data=train;
        this.train_options.series=[];
        this.train_options.series.push(seryTrain);
        // 最大高度
        var maxDataTrain = Math.max.apply(null, seryTrain.data);
        this.train_options.yAxis.max=maxDataTrain*1.1;
        this.train.setOption(this.train_options);
        // 当班车数
        this.arCarSum[0].value=countToday.car;
        this.arShipSum[0].value=countToday.ship;
        this.arTrainSum[0].value=countToday.train;
      })
    },
    formatNumber(number){
     // 格式化保留两位小数，返回数字
      return Number(conver_num_retain(number).replaceAll(',',''));
    },
    // 为0时返回null
    switchZeroToNull(number){
      return number===0?null:number;
    },
    getcarShipTrainCss(){
      return {
        type: 'bar',
        barMinHeight: 1,
        xAxisIndex: null,
        smooth: true,
        itemStyle:{
        color: function (params) {
          return params.value==0?'rgba(0, 0, 0, 0)':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: '40%',
        barGap: '50%',
        emphasis: {
        focus: 'series'
      },
        data: []
      }
    },
    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' }    // 柱图底部颜色
            ]
          ),
          borderRadius:[3,3,0,0] ,
        },
        label:{
          show:true,
          position:'top',
          color:'#FFFFFF',
        },
        barWidth: '40%',
        barGap: '50%',
        emphasis: {
          focus: 'series'
        },
        data: []
      }
    },
    // 统计车、船、火车单量完成情况
    countCarAndShipAndTrain(){

    },
    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;
      }
    },
    routerTo(path, code) {
      this.$router.push({path: path, query: {code: code}});
    },
    resizeChart() {
      if(this.people){
        this.people.resize();
      }
      if(this.car){
        this.car.resize();
      }
      if(this.ship){
        this.ship.resize();
      }
      if(this.train){
        this.train.resize();
      }
    }
  },
  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() {
    window.removeEventListener("resize", this.resizeChart);
  },
  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;
}
#people_bar div{
  width: 100% ;
  height: 100% ;
  padding: 0 ;
  margin: 0 ;
}
#people_bar canvas{
  width: 100% ;
  height: 100% ;
  padding: 0 ;
  margin: 0 ;
}
#people_bar div canvas{
  width: 100% ;
  height: 100% ;
  padding: 0 ;
  margin: 0 ;
}
</style>
