<template>
  <ModelBox name='1-3'>
    <div class='count-box'>
      <div class='count-tip-box'>
        <div class='item'>
          <p class='num'> {{ totalDownLoadNumClass ? totalDownLoadNumClass  : 0}}</p>
          <p class='title'>本班合计</p>
        </div>
        <div class='split'></div>
        <div class='item'>
          <p class='num'>{{ totalDownLoadNumDay ? totalDownLoadNumDay : 0 }} </p>
          <p class='title'>本日合计</p>
        </div>
      </div>
      <dv-scroll-board ref="locationScrollBoardTable" :config="config" style="width:580px;height:180px;margin-top: 10px;"
        class='count-table' />
      <span class='split-line' style='left: 70px;'></span>
      <span class='split-line' style='left: 195px;'></span>
      <span class='split-line' style='left: 320px;'></span>
      <span class='split-line' style='left: 445px;'></span>
    </div>
  </ModelBox>
</template>
<script>
import ModelBox from './ModelBox.vue';
export default {
  name: 'Count',
  components: {
    ModelBox
  },
    props: {
    dataObj: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    dataObj: {
      handler(newVal, oldVal) {
        console.log(newVal, 'newVal');
        if (newVal) {
          this.totalGlassNum = 0;
          this.tableData = [];
          // 累加所有项目的downLoadNumDay
          this.totalDownLoadNumDay = 0;
          this.totalDownLoadNumClass = 0
          // 遍历每条产线数据
          newVal.forEach(item => {
            // 计算当前项目的glassNum总和
            const glassArray = JSON.parse(item.glassNum);
            const itemGlassSum = glassArray.reduce((sum, num) => sum + num, 0);
            this.tableData.push({
              lineName: item.lineName,
              glassSum: itemGlassSum,
              downLoadNumDay:item.downLoadNumDay,
              downLoadNumClass: item.downLoadNumClass
            });

            // 累加downLoadNumDay
            this.totalDownLoadNumDay += item.downLoadNumDay;
            this.totalDownLoadNumClass += item.downLoadNumClass;

          });
          let eqArr = this.tableData.map((item, index) => [
            `<span style="color:#000;" >${index+1 || ''}
            </span>`,
            `<span style="color:#000;" >${item.lineName || ''}
            </span>`,
            // formatDate(item.planStartTime) || '',
            `
          <span style="color:#000;" >${item.downLoadNumClass || ''}
            </span>`,
            `<span style="color:#000;">${item.downLoadNumDay || ''}</span>`,
            `<span style="color:#000;">${item.glassSum || ''}</span>`,
          ])
          this.config.data = eqArr
          this.$refs['locationScrollBoardTable'].updateRows(eqArr)
        }
        // this.getChart(this.todayClass)
      },
      deep: true  // 深度监听
    }
  },
  data() {
    return {
      totalDownLoadNumDay: 0,
      totalDownLoadNumClass:0,
      config:{
        header: ['<span style="color:#000;">序号</span>', '<span style="color:#000;">产线</span>', '<span style="color:#000;">本班</span>', '<span style="color:#000;">本日</span>', '<span style="color:#000;">一托玻璃数量</span>'],
        headerHeight: 30,
        headerBGC: '#E8EDF8',
        oddRowBGC:'#E8EDF8',
        evenRowBGC:'#fff',
        rowNum: 5,
        columnWidth: [70, 125, 125, 125, 130],
        align	: ['center', 'center', 'center', 'center', 'center'],
        data: [
        ]
      }
    }
  },
  methods: {
    init() {

    }
  }
}
</script>
<style lang='scss' scoped>
.count-box {
  position: relative;
  .count-tip-box {
    margin-bottom: 20px;
    .split {
      width: 2px;
      height: 40px;
      background: #CDD3DF;
      display: inline-block;
    }
    .item {
      display: inline-block;
      width: 290px;
      text-align: center;
      p{
        margin: 0;
      }
      .num {
        font-weight: 500;
        font-size: 28px;
        color: #155EFF;
        margin-bottom: 5px;
      }
      .title {
        font-size: 14px;
        color: rgba(0,0,0,0.5);
        line-height: 14px;
      }
    }
  }
  .count-table {
    box-shadow: 0px 2px 4px 0px #D5DAE6;
  }
  .split-line {
    position: absolute;
    top: 77px;
    width: 1px;
    height: 180px;
    background: #CDD3DF;
  }
}

</style>
