<template>
  <div class='centerBottomL'>
    <div class='title'>
      <svg-icon icon-class="dataBoard3" class='icon'/>
      <span>本月数据</span>
    </div>
    <div class='dataBox' style='top:50px'>
      <p>
        <span class='text'>总投入片数</span>
        <span class='precent' :class='{precentR:monthData?.inputNumChange>=0,precentG:monthData?.inputNumChange<0}'>{{monthData?.inputNumChange || '-'}}%</span>
        <img v-show='monthData?.inputNumChange<0' src="../../../../assets/images/dataBoard/arrDown.png" alt="" width='5' height='15'>
        <img v-show='monthData?.inputNumChange>=0' src="../../../../assets/images/dataBoard/arrUp.png" alt="" width='5' height='15'>
      </p>
      <p class='num'>{{monthData?.inputNum ? formatThousands(monthData.inputNum) : '-'}}</p>
    </div>
    <div class='dataBox'style='top:180px'>
      <p>
        <span class='text'>总生产片数</span>
        <span class='precent' :class='{precentR:monthData?.outputNumChange>=0,precentG:monthData?.outputNumChange<0}'>{{monthData?.outputNumChange || '-'}}%</span>
        <img v-show='monthData?.outputNumChange<0' src="../../../../assets/images/dataBoard/arrDown.png" alt="" width='5' height='15'>
        <img v-show='monthData?.outputNumChange>=0' src="../../../../assets/images/dataBoard/arrUp.png" alt="" width='5' height='15'>
      </p>
      <p class='num'>{{monthData?.outputNum ? formatThousands(monthData.outputNum) : '-'}}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CenterBottomL',
  props: {
    dataObj: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    dataObj(val) {
      val.monthAndLastMonth && val.monthAndLastMonth.forEach(item => {
        if (item.dataType === "本月") {
          this.monthData = item
        }
      })
    }
  },
  data() {
    return {
      monthData:{}
    }
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.centerBottomL {
  width: 337px;
  height: 332px;
  background: url('../../../../assets/images/dataBoard/center-bottom.png') no-repeat;
  background-size: 100%;
  position: absolute;
  left: 440px;
  bottom:23px;
  .title {
    margin: 7px 0 0 15px;
    .icon {
      width: 33px;
      height: 33px;
      margin-right: 5px;
      vertical-align:middle;
      margin-top: 5px;
    }
    span {
      font-size: 24px;
      color: #52FFF1;
      line-height: 24px;
      vertical-align:middle;
    }
  }
  .dataBox {
    width: 290px;
    height: 135px;
    background: url('../../../../assets/images/dataBoard/numberBox.png') no-repeat;
    background-size: 100%;
    position: absolute;
    padding:22px 0 0 16px;
    left: 24px;
    p{
      margin: 0;
    }
    .text {
      font-weight: 500;
      font-size: 20px;
      color: #FFFFFF;
      letter-spacing: 2px;
      margin-right: 8px;
    }
    .precent {
      font-size: 18px;
      margin-right: 5px;
    }
    .precentR {
      color: #FF271D;
    }
    .precentG {
      color: #34F716;
    }
    .num {
      font-weight: 500;
      font-size: 38px;
      color: #FFFFFF;
      margin-top: 5px;
    }
  }
}
</style>