<template>
  <div id="bottomRight">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span style="color:#5cd9e8">
          <icon name="chart-area"></icon>
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2">{{ $t('BCC装置团队总需求') }}</span>
          <div class="decoration2">
            <dv-decoration-2 :reverse="true" style="width:5px;height:2.4rem" />
          </div>
        </div>
      </div>
      <div>
        <dv-scroll-board :config="config" :style="transformdata ? 'transform: scale('+transformdata+') translate(0,0) !important;height:200px;widows: 70% !important; margin: auto;' :'height:200px;widows: 70% !important; margin: auto;'"/>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  props: ['dashboarddata','transformdata'],
  data() {
    return {
      config: {
        header: ["", "BCC", "SUB", "EU", "PGU/AEU"],
        data: [
          ["SS(HS)自产", this.dashboarddata.ssBcc, this.dashboarddata.ssSub, this.dashboarddata.ssEu, this.dashboarddata.ssPgu],
          ["HHP", this.dashboarddata.hhpBcc, this.dashboarddata.hhpSub, "", ""],
          ["HS", this.dashboarddata.hsBcc, this.dashboarddata.hsSub, this.dashboarddata.hsEu, this.dashboarddata.hsPgu],
          ["MS", this.dashboarddata.msBcc, "", this.dashboarddata.msEu, this.dashboarddata.msPgu],
          ["LS", this.dashboarddata.lsBcc, "", this.dashboarddata.lsEu, this.dashboarddata.lsPgu],
          ["TOTAL", this.dashboarddata.totalBcc, "", this.dashboarddata.totalEu, ""],
          ["总消耗", this.dashboarddata.zongBcc, "", this.dashboarddata.zongEu, this.dashboarddata.zongPgu]
        ],
        rowNum: 6, //表格行数
        headerHeight: 35,
        headerBGC: "#0f1325", //表头
        oddRowBGC: "#0f1325", //奇数行
        evenRowBGC: "#171c33", //偶数行
        columnWidth: [110, 70, 70, 70, 90],
        align: ["center", "center", "center", "center", "center"]
      }
    };
  },
  watch:{
    dashboarddata(dashboarddata){
      //当a值变化时
      this.config={
        ...this.config,data:[
          ["SS(HS)自产", dashboarddata.ssBcc, dashboarddata.ssSub, dashboarddata.ssEu, dashboarddata.ssPgu],
          ["HHP", dashboarddata.hhpBcc, dashboarddata.hhpSub, "", ""],
          ["HS", dashboarddata.hsBcc, dashboarddata.hsSub, dashboarddata.hsEu, dashboarddata.hsPgu],
          ["MS", dashboarddata.msBcc, "", dashboarddata.msEu, dashboarddata.msPgu],
          ["LS", dashboarddata.lsBcc, "", dashboarddata.lsEu, dashboarddata.lsPgu],
          ["TOTAL", dashboarddata.totalBcc, "", dashboarddata.totalEu, ""],
          ["总消耗", dashboarddata.zongBcc, "", dashboarddata.zongEu, dashboarddata.zongPgu]
        ]
      };
    }
  },
  components: {
  },
  mounted() {},
  methods: {},
  created() {
    console.log("transformdata",this.transformdata);
  },
};
</script>

<style lang="scss">
#bottomRight {
  padding: 0.2rem 0.2rem 0;
  height: 2.9rem;
  min-width: 3.75rem;
  border-radius: 0.0625rem;
  .bg-color-black {
    height: 2.7rem;
    border-radius: 0.125rem;
  }
  .text {
    color: #c3cbde;
  } //下滑线动态
  .decoration2 {
    position: absolute;
    right: 0.125rem;
  }
  .chart-box {
    margin-top: 0.2rem;
    width: 2.125rem;
    height: 2.125rem;
    .active-ring-name {
      padding-top: 0.125rem;
    }
  }
}
.dv-scroll-board{
  width: 70% !important;
}
</style>
