<template>
  <div class="moduleBox moduleBoxLeft flex flex-v">
    <EachModuleTitle title="调度回顾" />
    <div class="reviewTotal flex flex-wrap flex-justcontent-spacebetween">
      <div class="list" v-for="i in totalData" :key="i">
        <span class="blue">{{i.num}}</span><br/>{{i.label}}
      </div>
    </div>
    <div class="flex-1">
      <div class="leve2Title">人员调度</div>
      <div class="chartWbox">
        <ChartRy :echartData="allData.ryData" :refresh="allData.ryRefresh"/>
      </div>
    </div>
    <div class="flex-1">
      <div class="leve2Title">车辆调度</div>
      <div class="chartWbox">
        <ChartCl :echartData="allData.clData" :refresh="allData.clRefresh" @updateKey="getCarIndex"/>
      </div>
    </div>
    <div class="leve2Title">物资调度</div>
    <div class="goodsList flex flex-wrap flex-justcontent-spacebetween">
      <div class="wzList flex flex-justcontent-spacebetween flex-align-center" :class="i.goodType" v-for="i in allData.wzData" :key="i">
        {{i.name}}<span class="blue">{{i.remark}}{{i.monad}}</span>
      </div>
    </div>
  </div>
</template>

<script setup name="pailaodiaoduleft">
import * as reviewApi from "@/api/FloodControlAndDrainage.js";
import * as carApi from "@/api/carApi.js";
import EachModuleTitle from '@/views/pictureOnMap/page/components/EachModuleTitle.vue'

import ChartRy from './components/chartRy.vue';
import ChartCl from './components/chartCl.vue';
import bus from "@/bus";

const emit = defineEmits(["changeCar"]);

const props = defineProps({
  //数据
  day: {
    type: String,
    default: '',
  },
})
let totalData =[
  {label:'人员值班',value:'1',num:'(2/3)'},
  {label:'渍水巡查',value:'2',num:'(10/16)'},
  {label:'堤防巡查',value:'3',num:'(10/18)'},
  {label:'人员调度',value:'4',num:'(3/4)'},
  {label:'车辆调度',value:'5',num:'(10/10)'},
  {label:'物资调度',value:'6',num:'(10/18)'},
]
let allData = reactive({
  ryData: {},
  ryRefresh: "",
  clList:[],
  clData: {},
  clRefresh: "",
  wzData:[],
});
let wzTabActive=ref(1)

function getData(){
  wzTabActive.value=1
  let parms={personTime:props.day}
  reviewApi.personnelSchedulingInfoList(parms).then(res=>{
    if(res.code==200){
      let obj={
        xData:[],
        data:[],
        num:[]
      }
      let list=res.data
      list.forEach(element => {
        obj.xData.push(element.company)
        obj.data.push(element.quantity)
      });
      let max=JSON.parse(JSON.stringify(obj.data))
      let one=max.sort((a, b) => b - a)[0]
      max.forEach(i=>{
        obj.num.push(one)
      })
      allData.ryData=obj
      allData.ryRefresh=Math.random();
    }
  })
  let parms2={start:props.day}
  carApi.trajectoryBack(parms2).then(res=>{
    if(res.code==200){
      allData.clList=res.data
      let obj={
        xData:[],
        data1:[],
        data2:[]
      }
      let list=res.data
      list.forEach(element => {
        obj.xData.push(element.licensePlateNumber)
        obj.data1.push(element.distanceTravelled)
        obj.data2.push(element.travelTime)
      });
      allData.clData=obj
      allData.clRefresh=Math.random();
    }
  })
  getWZData()
}
function getWZData(){
  let parms3={materialTime:props.day}
  reviewApi.managementWarehouseGood(parms3).then(res=>{
    if(res.code==200){
      let array=res.data
      allData.wzData=[]
      let other={
        goodType:'qita',
        name:'其他',
        remark:0,
        monad:''
      }
      array.forEach((e,i) => {
        if(i<5){
          allData.wzData.push(e)
        }else{
          other.remark+=Number(e.remark)
        }
      });
     if(other.remark>0){
      allData.wzData.push(other)
     }
    }
  })
}
// 车辆点击事件
function getCarIndex(num){
  let data=allData.clList[num]
  carApi.trajectoryOne(data.id).then(res=>{
    let array=res.data.lngAndLatList
    bus.emit('trajectoryToMap',array)
    emit('changeCar',true)
  })
}
watch(
  () => props.day,
  value => {
    if(value!=''){
      getData()
    }
  },
  {immediate: true, deep: true}
);
onMounted(() => {
  bus.on("clearTrajectory", (e) => {
    allData.clRefresh=Math.random()
  });
});
onBeforeUnmount(() => {
  bus.emit('clearTrajectory')
})
</script>

<style lang="scss" scoped>
.reviewTotal{
  overflow: hidden;
  .list{
    width: 136px;
    height: 76px;
    background: url('@/assets/images/pictureOnMap/back1.png') no-repeat;
    background-size: 100% 100%;
    margin-top: 10px;
    font-weight: 500;
    font-size: 16px;
    color: #CCDFFF;
    line-height: 24px;
    text-align: center;
    padding-top: 14px;
    span{
      font-weight: bold;
      font-size: 20px;
    }
  }
}
.goodsList{
  height:180px;
  overflow: hidden;
  .wzList{
    width: 48%;
    height: 50px;
    margin:5px 0;
    font-weight: 500;
    font-size: 14px;
    color: #EBFEFF;
    padding-left: 75px;
    padding-right: 20px;
  }
}
.fxsssb{
  background: url('@/assets/images/pictureOnMap/wzsb.png') no-repeat;
  background-size: 100% 100%;
}
.fxssgj{
  background: url('@/assets/images/pictureOnMap/wzgj.png') no-repeat;
  background-size: 100% 100%;
}
.zmjsss{
  background: url('@/assets/images/pictureOnMap/wzzm.png') no-repeat;
  background-size: 100% 100%;
}
.fxbgyp{
  background: url('@/assets/images/pictureOnMap/wzbg.png') no-repeat;
  background-size: 100% 100%;
}
.ryfhzb{
  background: url('@/assets/images/pictureOnMap/wzfh.png') no-repeat;
  background-size: 100% 100%;
}
.fxwzcb{
  background: url('@/assets/images/pictureOnMap/wzcb.png') no-repeat;
  background-size: 100% 100%;
}
.qita{
  background: url('@/assets/images/pictureOnMap/qita.png') no-repeat;
  background-size: 100% 100%;
}
</style>