<template>
  <modulen>
    <div class="centerBox">
      <div class="Select">

        <div class="collect"> <span class="dd"></span>收入成本汇总 <img class="dsjImg" src="@/assets/images/manageGS/dsj.png"
            alt=""></div>
      </div>
      <div class="centerFooter">
        <div class="letfText">
          <div class="data1"></div>
          <div class="data2"> 当月数据</div>
          <div class="data">年累计</div>
          <div class="data">年预算</div>
          <div class="data">完成比例</div>
        </div>
        <div class="dayToll-md">
          <div class="daytoll-head">
            <div class="cell-b"><span class="img1"></span>营业收入/万元</div>
            <div class="cell-b"><span class="img2"></span>营业成本/万元</div>
            <div class="cell-b"><span class="img3"></span>税费/万元</div>
            <div class="cell-b"><span class="img4"></span>财务成本/万元</div>
            <div class="cell-b"><span class="img5"></span>管理成本/万元</div>
            <div class="cell-b"><span class="img6"></span>利润总额/万元</div>
          </div>
          <div class="listout">
            <vue-seamless-scroll>
              <div class="cell-list" v-for="(item, index) in nowDataList" :key="index">
                <div class="cell-b">{{ formatThousand(item.runIncomeCount ) }}</div>
                <div class="cell-b">{{ formatThousand(item.runCostCount) }}</div>
                <div class="cell-b">{{ formatThousand(item.taxesCount) }}</div>
                <div class="cell-b">{{ formatThousand(item.interestPaymentCount) }}</div>
                <div class="cell-b">{{ formatThousand(item.manageCostCount) }}</div>
                <div class="cell-b">{{ formatThousand(item.totalProfitCount) }}</div>
              </div>
            </vue-seamless-scroll>

          </div>
        </div>
      </div>
    </div>
  </modulen>
</template>

<script>
import vueSeamlessScroll from '@/components/vueSeamlessScroll/index.vue'
import { formatThousand } from "@/utils/util";
import { GetincomeCostSummary, GetincomeCostYear, GetIncomeCostBudget } from "@/api/manageGeneral.js"
import moment from "moment";
export default {
  components: {
    vueSeamlessScroll,
  },
  data() {
    return {
      dataList: [
        {
          level: "3",
          organizationId: "1430049550537723904",
          organizationName: "渝遂高速",
          pnode: "101",
          provinceId: "CQ",
          sort: "111"
        }
      ],
      selectList: [
        {
          value: '1',
          label: 'Option1',
        },
        {
          value: '2',
          label: 'Option2',
        },
        {
          value: '3',
          label: 'Option3',
        },
        {
          value: '4',
          label: 'Option4',
        },
        {
          value: '5',
          label: 'Option5',
        },
      ],
      query: {
        timemode: "year",
        level: "0",
        dimension: "",
        timeflag: moment(new Date()).format('yyyy'),
      },
      monthQuery: {
        level: "0",
        dimension: "",
        timeflag: moment(new Date()).format('yyyyMM'),
      },
      nowDataList: [],
    }
  },
  computed: {
    // 获取选择器当前选择的时间
    getDate() {
      return moment(this.$store.state.appDate).format('yyyyMM');
    },
    // 获取左上角选择地址的值
    selectRoad() {
      return this.$store.state.road.selectRoadId;
    },
    yearMoth() {
      return this.$store.state.yearMoth
    }
  },
  watch: {
    // 监听左上角选择地址的值
    selectRoad(newVal) {
      const level = this.$store.state.road.selectLevel // 获取当前选择的值的下标
      const Id = newVal ? newVal[level - 1] : ""      //  下标-1
      this.monthQuery.level = level
      this.monthQuery.dimension = Id
      this.query.level = level;
      this.query.dimension = Id;
      this.getData(); //值变化就更新echarts图
    },
    yearMoth(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) {
      this.monthQuery.timeflag = newVal
      if (this.$store.state.yearMoth == 1) {
        this.query.timemode = "year",
          this.query.timeflag = moment(newVal).format('yyyy')
        this.getData()
      } else {
        this.query.timemode = "month",
          this.query.timeflag = moment(newVal).format('yyyyMM')
        this.getData()
      }
    },
  },
  mounted() {
    // this.getData()
  },
  methods: {
    formatThousand,
    async getData() {
      const now = await GetincomeCostSummary(this.monthQuery)  // 当月数据
      const addUp = await GetincomeCostYear({ ...this.query, timeflag: moment(this.$store.state.appDate).format("YYYY") }) //年累计数据
      const Budget = await GetIncomeCostBudget({ ...this.query, timeflag: moment(this.$store.state.appDate).format("YYYY") })

      if (now.msgContent.length == 0) {
        now.msgContent.push({
          runIncomeCount: 0,
          runCostCount: 0,
          interestPaymentCount: 0,
          manageCostCount: 0,
          totalProfitCount: 0,
          taxesCount: 0
        })
      }
      const dataBudget = []
      Budget.msgContent.map((item) => {
        dataBudget.push({
          runIncomeCount: item.runIncomeYearbudget,
          runCostCount: item.runCostYearbudget,
          interestPaymentCount: item.interestPaymentYearbudget,
          manageCostCount: item.manageCostYearbudget,
          totalProfitCount: item.totalProfitYearbudget,
          taxesCount: item.taxesYearBudget
        })
      })

      const dataProportion = []
      Budget.msgContent.map((item) => {
        dataProportion.push({
          runIncomeCount: item.runIncomeRatio,
          runCostCount: item.runCostRatio,
          interestPaymentCount: item.interestPaymentRatio,
          manageCostCount: item.manageCostRatio,
          totalProfitCount: item.totalProfitRatio,
          taxesCount: item.taxesRatio
        })
      })

      this.nowDataList = [...now.msgContent, ...addUp.msgContent, ...dataBudget, ...dataProportion]
      // console.log(155,this.nowDataList);
      this.nowDataList[0].runIncomeCount = (this.nowDataList[0].runIncomeCount - 0).toFixed(2) || 0
      this.nowDataList[0].runCostCount = (this.nowDataList[0].runCostCount - 0).toFixed(2) || 0
      this.nowDataList[0].taxesCount = (this.nowDataList[0].taxesCount - 0).toFixed(2) || 0
      this.nowDataList[0].interestPaymentCount = (this.nowDataList[0].interestPaymentCount - 0).toFixed(2) || 0
      this.nowDataList[0].manageCostCount = (this.nowDataList[0].manageCostCount - 0).toFixed(2) || 0
      this.nowDataList[0].totalProfitCount = (this.nowDataList[0].totalProfitCount - 0).toFixed(2) || 0
    },
  }
}
</script>

<style lang="scss" scoped>
@import "~/styles/viewport-convert.scss";

.centerBox {
  display: flex;
  flex-direction: column;
}

.collect {
  width: vw(150);
  height: vh(32);
  padding-top: vh(5);
  padding-left: vw(20);
  background-color: rgba(5, 15, 45, 0.5);

  margin: vh(10) 0 0 vw(20);
  white-space: nowrap;

  .dd {
    position: absolute;
    top: vh(23);
    left: 30px;
    width: vw(5);
    height: vh(6);
    background-color: #FFCE5A;
    z-index: 5;
  }

  .dsjImg {
    display: inline-block;
  }
}

:deep .el-input__inner {
  border: 0px;
  font-size: 14px;
  font-family: "YouSheBiaoTiHei";
  color: #fff;
  background: rgba(5, 15, 45, 0.5);
  // &:hover {
  //   border: 1px solid #89765a;
  // }
}


.el-select-dropdown__item {
  color: azure;
}

.el-select-dropdown__item:hover {
  background-color: #1f315a;
}

:deep .el-icon-arrow-up:before {
  color: #38d7ff;
}

:deep .select-popper {
  border: 0px !important;

  .el-scrollbar__wrap {
    border: 1px solid #2875ad;
  }

  .el-select-dropdown__list {
    background-color: #050e25;
  }
}

.letfText {
  width: vw(100);
  height: 100%;
  text-align: center;
  font-size: 12px;
  color: #778FA4;

  .data1 {
    height: vh(35);
    line-height: vh(35);
    margin: 0 0 5px 0;
  }

  .data2 {
    height: vh(35);
    line-height: vh(35);
    margin: 0px 0 15px 0;
  }

  .data {
    height: vh(35);
    line-height: vh(35);
    margin: 10px 0 15px 0;
  }

}

.centerFooter {
  display: flex;
  justify-content: space-between
}

.dayToll-md {
  width: 100%;
  height: 100%;

  .daytoll-head {
    width: 100%;
    display: flex;
    color: #9aa7bf;

    .img1 {
      display: inline-block;
      width: vw(20);
      height: vh(17);
      background-image: url("@/assets/images/manageGS/incomeCost6.png");
    }

    .img2 {
      display: inline-block;
      width: vw(20);
      height: vh(17);
      background-image: url("@/assets/images/manageGS/incomeCost5.png");
    }

    .img3 {
      display: inline-block;
      width: vw(20);
      height: vh(17);
      background-image: url("@/assets/images/manageGS/incomeCost4.png");
    }

    .img4 {
      display: inline-block;
      width: vw(20);
      height: vh(17);
      background-image: url("@/assets/images/manageGS/incomeCost3.png");
    }

    .img5 {
      display: inline-block;
      width: vw(20);
      height: vh(17);
      background-image: url("@/assets/images/manageGS/incomeCost2.png");
    }

    .img6 {
      display: inline-block;
      width: vw(20);
      height: vh(17);
      background-image: url("@/assets/images/manageGS/incomeCost1.png");
    }
  }

  .listout {
    width: 100%;
    height: vh(273);
    overflow: hidden;
  }

  .cell-list {
    width: 100%;
    display: flex;

    .cell-a {
      font-family: "DINRegular";
      color: #fff;
      font-weight: 400;
    }

    .cell-b {
      color: #fff;
    }
  }

  .cell-list {
    background: rgba(73, 153, 255, 0.1);
    border: 1px solid rgba(73, 153, 255, 0.2);
    margin-bottom: 10px;
  }

  .cell-a,
  .cell-b {
    height: vh(39);
    line-height: vh(39);
  }

  .cell-a {
    width: vw(150);
    text-align: center;
  }

  .cell-b {
    width: vw(150);
    text-align: center;
  }



}
</style>