<template>
  <div class="macl-map-view">
    <div class="macl-box">
      <SummaryList :list="mapBoxList"></SummaryList>
    </div>
  </div>
</template>

<script>
import { formatThousandMoney } from '@/utils/util';
import pic3 from '@/assets/images/chargeManage/traffic-flow.png';
import SummaryList from '@/components/baseModule/SummaryList.vue';
import { getMngSectionLen } from '@/api/businessOverview';
import { mapState } from 'vuex';
import { mileageAmountAver } from '@/api/curingBusiness';

export default {
  components: {
    SummaryList
  },
  computed: {
       ...mapState({
      selectRoadId: state => state.road.selectRoadId
    }),
    mapBoxList() {
      let mapBoxList = [
        {
          icon: pic3,
          title: '管养里程',
          unit: '（km）',
          data: this.stationEuYearData.feeDayAvg
        },
        {
          icon: pic3,
          title: '单公里养护成本',
          unit: '（元）',
          data: this.stationEuYearData.flowDayAvg
        }
      ];
      return mapBoxList;
    },
    getLevel(){
      return this.$store.state.road.selectLevel
    },
  },
  data() {
    return {
      stationEuYearData: {}
    };
  },
  watch:{
    selectRoadId(){
      this.mileageAmountAver()
    }
  },
  mounted() {
    // 管养里程
    this.getMngSectionLen();
    // 单公里养护成本
    this.mileageAmountAver();
  },

  methods: {
    async getMngSectionLen() {
      const { msgContent } = await getMngSectionLen(0);
      console.log('getMngSectionLen', msgContent);
      this.stationEuYearData.feeDayAvg = msgContent[0].totalMngSectionLen;
      // this.stationEuYearData.feeDayAvg = msgContent.reduce((total, cur) => {
      //   return (total += cur.mngSectionLen);
      // }, 0);
    },
    async mileageAmountAver() {
      const { msgContent } = await mileageAmountAver({
        orgLevel:this.getLevel,
        filterOrgVal:this.selectRoadId[1]
      })
      console.log('mileageAmountAver', msgContent);
      this.stationEuYearData.flowDayAvg = msgContent.reduce((total, cur) => {
        console.log(Number(cur.divide))
       total += Number(cur.divide)
        return total.toFixed(0);
      }, 0);
    }
  }
};
</script>

<style lang="scss" scoped>
@import '~/styles/viewport-convert.scss';
.macl-map-view {
  width: 25%;
  margin-top: 30px;
  position: absolute;
  left: 1%;
  top: 80px;
  z-index: 50;
}
.macl-box {
  position: absolute;
  top: 3.5vh;
}
</style>
