<template>
  <modulen>
    <template #title>总营业成本
      <span class="sumMoney"><span style="font-size:20px;">{{ formatThousand(total) }}</span><span
          style="font-size: 12px;">/万元</span> </span></template>
    <div class="mistake">
      <span class="mistakeText">付现成本</span>
      <div class="numText">
        总和: <span> {{ formatThousand(payCashCost) }}</span>/万元
      </div>
    </div>
    <div class="middle-text">
      <span class="left-text">{{ pieSleName }}</span>
      <b class="number_text"> {{ formatThousand(specialCost) }}</b>
      <span class="right_text">/万元</span>
    </div>
    <Ect class="echartsBox" :options="ectOpts" :default="4" />
    <div class="footer-text">
      <div class="elcll-left" v-for="(item, index) in list" :key="index">
        <span class="color-box" :style="{ background: item.color }"></span>
        <span class="elcll-text1">{{ item.name }}</span>
      </div>
    </div>
  </modulen>
</template>

<script>
import { GetRunCostState, GetRunCostStateNon } from "@/api/manageGeneral";
import { formatThousand } from "@/utils/util";
import { indexOf } from "lodash";
import moment from "moment";
export default {
  data() {
    return {
      ectOpts: {},
      list: [
        {
          name: "机电日常",
          color: "#30d9fe",
          // elecMechanDailyCost:"8"
          value: "8"
        },
        {
          name: "养护日常",
          color: "#0091fa",
          // maintenanceRoutineCost:"7"
          value: "7"
        },
        {
          name: "服务区日常",
          color: "#fed700",
          // serviceareaDailyCost:"6"
          value: "6"
        },
        {
          name: "专项成本",
          color: "#0cbc6d",
          // specialCost:"5"
          value: "5"
        },
        {
          name: "人工成本",
          color: "#fc7f30",
          value: "4"
          // laborCost:"4"
        },
        {
          name: "办公成本",
          color: "#034def",
          // officeExpenses:"3"
          value: "3"
        },
        {
          name: "管理成本",
          color: "#fb4c67",
          // manageCost:"2"
          value: "2"
        },
        {
          name: "财务成本",
          color: "#acffd2",
          // financialCosts:"1"
          value: "1"
        },
      ],
      color: ["#30d9fe", "#0091fa", "#fed700", "#0cbc6d", "#fc7f30", "#034def", "#fb4c67", "#acffd2"],
      query: {
        timemode: "year",
        timeflag: moment(new Date()).format('yyyy'),
        level: 0,
        dimension: ""
      },
      non_cash_cost: "", //非付现成本
      specialCost: "", //专项成本
      payCashCost: "",//付现成本
      total: "", // 总和
      pieSleName: '',
      nonCashCost: '',
      Boole: null
    };
  },
  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;
    },
    yearMoth() {
      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(); //值变化就更新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) {
      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();    //更新echarts图
  // },
  methods: {
    formatThousand,
    async getData() {
      const resMoney = await GetRunCostStateNon(this.query)
      this.nonCashCost = (resMoney.msgContent[0]?.nonCashCost.replaceAll(',', '')) - 0 || 0
      const { msgContent } = await GetRunCostState(this.query)
      console.log(176,msgContent);

      this.list[0].value = (msgContent[0]?.elecMechanDailyCost == undefined ? 0.0001 : msgContent[0]?.elecMechanDailyCost + 0.0001).toFixed(2) || 0
      this.list[1].value = (msgContent[0]?.maintenanceRoutineCost == undefined ? 0.0001 : msgContent[0]?.maintenanceRoutineCost + 0.0001).toFixed(2) || 0
      this.list[2].value = (msgContent[0]?.serviceareaDailyCost == undefined ? 0.0001 : msgContent[0]?.serviceareaDailyCost + 0.0001).toFixed(2) || 0
      this.list[3].value = (msgContent[0]?.specialCost == undefined ? 0.0001 : msgContent[0]?.specialCost + 0.0001).toFixed(2) || 0
      this.list[4].value = (msgContent[0]?.laborCost == undefined ? 0.0001 : msgContent[0]?.laborCost + 0.0001).toFixed(2) || 0
      this.list[5].value = (msgContent[0]?.officeExpenses == undefined ? 0.0001 : msgContent[0]?.officeExpenses + 0.0001).toFixed(2) || 0
      this.list[6].value = (msgContent[0]?.manageCost == undefined ? 0.0001 : msgContent[0]?.manageCost + 0.0001).toFixed(2) || 0
      this.list[7].value = (msgContent[0]?.financialCosts == undefined ? 0.0001 : msgContent[0]?.financialCosts + 0.0001).toFixed(2) || 0
      this.payCashCost = (msgContent[0]?.payCashCost == undefined ? 0.0001.toFixed(2) : (msgContent[0]?.payCashCost + 0.0001).toFixed(2)) || 0 //付现成本
      this.getCharts();  // 调用echarts图，让他在生命周期的时候变化就刷新
      this.total = ((this.payCashCost - 0) + (this.nonCashCost - 0)) || 0
      this.total = (this.total + 0.0001).toFixed(2)
    },

    // echarts图
    getCharts() {
      const _that = this
      _that.pieSleName = this.list[0].name
      _that.specialCost = this.list[0].value
      this.ectOpts = {
        tooltip: {
          trigger: 'item',
          // formatter: '{b} : <br/>{d}%',
          formatter: function (params) {
            _that.pieSleName = params.data.name
            _that.specialCost = params.data.value
            var res = `<div style="font-size: 16px">${params.data.name}：</div><div style="font-size: 14px">${params.data.value}万元</div>`
            return res;
          }
          //formatter: "{b} : {d}% <br/> {c}"
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '50%'], //内 外圆半径
            minAngle: 5,
            color: this.color, // 色块填充颜色
            emphasis: {
              label: {
                show: true,
                formatter: function (val) {
                  return [
                    "{a|" + val.percent + "%}",
                    "",
                    "{b|" + val.data.name + "}",
                  ].join("\n");
                },
                rich: {
                  a: {
                    color: "#fff",
                    lineHeight: 20,
                    fontSize: 20,
                    fontWeight: 800,
                    marginTop: 10,
                    fontFamily: "DinNextRegular",

                  },
                  b: {
                    color: "#fff",
                    fontSize: 12,
                    height: 15,
                  },
                },
                // fontSize: '40',
                // fontWeight: 'bold'
              },
            },
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              show: false,
            },
            itemStyle: {
              borderColor: "#030E15",
              borderWidth: 1,
            },
            data: this.list
          },
        ], // series end
      }



    },
  },
};
</script>

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

.header-text {
  display: flex;
  width: 100%;
  height: vh(40);
  line-height: vh(40);
  margin-top: vh(10);

  // background-color: aqua;
  img {
    margin-left: vw(15);
  }

  .left-text {
    margin-left: vw(10);
    margin-right: vh(10);
    font-size: 13px;
    color: #abbcdb;
  }

  .number_text {
    margin-right: vh(5);
    padding-bottom: vh(5);
    line-height: vh(35);
    font-family: "Saira-Medium";
    font-size: 18px;
    color: #fff;
  }

  .right_text {
    font-size: 12px;
    color: #abbcdb;
  }
}

.middle-text {
  position: absolute;
  top: vh(55);
  right: vw(10);

  .left-text {
    font-size: 13px;
    color: #abbcdb;
  }

  .number_text {
    font-family: "Saira-Medium";
    font-size: 16px;
    color: #fff;
  }

  .right_text {
    font-size: 12px;
    color: #abbcdb;
  }
}

.footer-text {
  width: 100%;
  height: 50px;
  position: absolute;
  bottom: vh(10);
  margin-left: 15px;
  display: flex;
  flex-wrap: wrap;

  // justify-content:space-between ;
  .elcll-left {
    display: flex;
    align-items: center;
    margin: 7px 15px 7px 15px;
  }

  .color-box {
    display: block;
    width: vw(10);
    height: vh(8);
    // background: #3dc6ff;
    margin-right: 5px;
  }

  .elcll-text1 {
    font-size: 12px;
    color: #abbcdb;
  }
}

.echartsBox {
  margin-top: vh(10);
}

.mistake {
  width: 100%;
  height: vh(12);
  line-height: vh(14);
  margin-top: vh(20);
  // background-color: aqua;
  background: url("@/assets/images/manageGS/long-Bj.png");
  background-size: 100%;
  display: flex;
  justify-content: space-between;

  .mistakeText {
    font-size: 12px;
    margin-left: vh(25);
  }

  .numText {
    position: absolute;
    width: vh(170);
    height: vh(32);
    text-align: center;
    line-height: vh(28);
    color: #abcbdb;
    right: vw(15);
    top: vh(12);
    font-size: 12px;

    span {
      font-size: 16px;
      color: #fff;
      font-family: "SairaRegular";
      font-weight: 800;
      margin-right: 1px;
    }
  }
}

.sumMoney {
  position: absolute;
  right: 0;
  font-size: 16px;
  color: #abbcdb;

  span {
    font-size: 16px;
    color: #fff;
    padding-right: 5px;
    font-family: "SairaRegular";
  }
}

.footer-text :nth-last-child(1) .color-box {
  margin-left: 12px;
}
</style>
