<template>

  <modulen >
 <div class="mistake"><span class="mistakeText">非付现成本</span>  <div class="numText">总和: <span> {{ formatThousand(nonCashCost) }}</span>/万元</div></div>
  <div class="cost_box">
<div class="go">
  <div class="a">
    <div class="img"></div>
    <div class="money"><b>  {{ formatThousand(fixed) }}</b> <span class="unit">/万元</span></div>
    <div class="unit">固定资产折旧</div>
   </div>

   <div class="b"  @click="handel">
    <div class="img"></div>
    <div class="money"><b>{{ formatThousand(intangible) }}</b> <span class="unit">/万元</span></div>
    <div class="unit">无形资产摊销</div>
   </div>

   <div class="c">
    <div class="img" ></div>
    <div class="money"><b>{{ formatThousand(overhaul) }} </b>  <span class="unit">/万元</span></div>
    <div class="unit">大修费用计提</div>
   </div>
</div>
  

  </div>

</modulen>
</template>

<script>
import { GetRunCostStateNon } from '@/api/manageGeneral';
import { formatThousand } from "@/utils/util";
import moment from "moment";
export default {
   data() {
    return {
        query:{
          timemode:"year",
          timeflag:moment(new Date()).format('yyyy'),
          level:0,
          dimension:""
        },
        fixed:"",//固定资产
        intangible:"",//无形资产
        overhaul:"",//大修费用
        nonCashCost:"",//付现费用
    };
  },
  computed: {
    // 获取选择器当前选择的时间
     getDate() { 
      this.query.timeflag =moment(this.$store.state.appDate).format("yyyy")
      return moment(this.$store.state.appDate).format("yyyyMM");
    },
    // 获取左上角选择地址的值
      selectRoad() {
      return this.$store.state.road.selectRoadId;
    },
    yearMonth(){
      return this.$store.state.yearMoth;
    }
  },
  watch: {
    // 监听左上角选择地址的值
     selectRoad(newVal) {
      const level= this.$store.state.road.selectLevel // 获取当前选择的值的下标
      const Id =newVal? newVal[level - 1]:""      //  下标-1
       this.query.level = level;
      this.query.dimension = Id;
      this.getData(); //值变化就更新
    },
    yearMonth(val){
      if(val == 1){
         this.query.timemode="year",
         this.query.timeflag=moment(this.$store.state.appDate).format('yyyy')
         this.getData()
       }else{
         this.query.timemode="month",
         this.query.timeflag=moment(this.$store.state.appDate).format('yyyyMM') 
         this.getData()
       }

    },
    getDate(newVal){
    if(this.$store.state.yearMoth == 1) {
      this.query.timeflag = moment(newVal).format('yyyy')
      this.getData()
    }else{
      this.query.timeflag=moment(newVal).format('yyyyMM') 
      this.getData()
    }
  
    },
  },
  // mounted() {
  //   this.getData();    //更新
  // },
  methods: {
    formatThousand,
    async getData() {
     const {msgContent} = await GetRunCostStateNon(this.query)
     this.fixed = (msgContent[0]?.fixedAssetsDepreciation == undefined ? 0.0001.toFixed(2): msgContent[0]?.fixedAssetsDepreciation)||0
     this.intangible =  (msgContent[0]?.intangibleAssetsAmortization == undefined ? 0.0001.toFixed(2): msgContent[0]?.intangibleAssetsAmortization)||0
     this.overhaul =   (msgContent[0]?.overhaulCostAccrual == undefined ? 0.0001.toFixed(2): msgContent[0]?.overhaulCostAccrual)||0
     this.nonCashCost = (msgContent[0]?.nonCashCost == undefined ? 0.0001.toFixed(2):msgContent[0]?.nonCashCost )||0
    },



  },
};

</script>

<style lang="scss" scoped>
@import "~/styles/viewport-convert.scss";
.cost_box{
  width: 100%;
 display: flex;
 text-align: center;
 position: absolute;
 overflow: hidden;
 padding-top:30px;
}
        .go{
          width: 100%;
           display: flex;
        }
      
.a{
  width: vw(140);
  height: vh(160);
  margin:vh(20)  0 0 0 ;
  white-space: nowrap;
    .img{
    width: vw(90);
    height: vh(90);
    margin-left: 25px;
    background:url("@/assets/images/manageGS/icon-payInterest.png") no-repeat;
    background-size: 100% 110%;
    }

}

.b{
  width: vw(140);
  height: vh(160);
  margin:vh(20)  0 0 0 ;
  white-space: nowrap;
  .img{
    width: vw(90);
    height: vh(90);
    margin-left: 25px;
    background:url("@/assets/images/manageGS/icon-expenses.png")  no-repeat;
    background-size: 100% 110%;
    }
}
.c{
  width: vw(140);
  height: vh(160);
  margin:vh(20)  0 0 0 ;
  white-space: nowrap;
    .img{
    width: vw(90);
    height: vh(90);
    margin-left: 25px;
    background:url("@/assets/images/manageGS/icon-cont.png") no-repeat;
    background-size: 100% 110%;
    }
    
}
.d{
  width:90px;
  height: vh(160);
  margin:vh(20) 0 0 0;
    .img{
    width: vw(90);
    height: vh(90);
    margin-left: 10px;
    background:url("@/assets/images/manageGS/qtcb.png")  ;
    background-size: 100% 100%;
    }
    
}
.money{
    font-family: "SairaRegular";
      font-size: 16px;
         margin:vh(16)  0 vh(8)  0 ;
    }
    .unit{
      font-size: 10px;
      color: #ABBCDB ;
    }
    .mistake{
      position: absolute;
      width: 100%;
      height: vh(12);
      line-height: vh(14);
      // background-color: aqua;
      top: 10px;
      background: url("@/assets/images/manageGS/long-Bj.png") t;
      background-size: 100%;
      display: flex;
      justify-content:  space-between;
       .mistakeText{
        font-size: 12px;
        margin-left: vh(25);
       }
       .numText{
        position: absolute;
        width: vh(190);
        height: vh(32);
        text-align: center;
        line-height: vh(28);
        color: #ABCBDB;
        right: vw(0);
        top: -6px;
   
        font-size: 12px;
        span{
          font-size: 16px;
          color: #fff;
          font-family: "SairaRegular";
          font-weight: 800;
        }
       }
    }
</style>
