<template>
  <ModelBox name='2-2'>
    <div class='line-container'>
      <div class='table-box'>
        <div class='title'>本班次</div>
        <dv-scroll-board ref="classToday" :config="classConfig" style="width:600px;height:242px;margin-top: 10px;" />
        <span class='split-line' style='left: 66px;'></span>
        <span class='split-line' style='left: 186px;'></span>
        <span class='split-line' style='left: 311px;'></span>
        <span class='split-line' style='left: 437px;'></span>
      </div>
      <div class='table-box'>
        <div class='title'>本日</div>
        <dv-scroll-board ref="day" :config="dayConfig" style="width:600px;height:242px;margin-top: 10px;" />
        <span class='split-line' style='left: 66px;'></span>
        <span class='split-line' style='left: 186px;'></span>
        <span class='split-line' style='left: 311px;'></span>
        <span class='split-line' style='left: 437px;'></span>
      </div>
      <div class='table-box'>
        <div class='title'>本周</div>
        <dv-scroll-board ref="week" :config="weekConfig" style="width:600px;height:242px;margin-top: 10px;" />
        <span class='split-line' style='left: 66px;'></span>
        <span class='split-line' style='left: 186px;'></span>
        <span class='split-line' style='left: 311px;'></span>
        <span class='split-line' style='left: 437px;'></span>
      </div>
      <div class='table-box'>
        <div class='title'>本月</div>
        <dv-scroll-board ref="month" :config="monthConfig" style="width:600px;height:242px;margin-top: 10px;" />
        <span class='split-line' style='left: 66px;'></span>
        <span class='split-line' style='left: 186px;'></span>
        <span class='split-line' style='left: 311px;'></span>
        <span class='split-line' style='left: 437px;'></span>
      </div>
    </div>
  </ModelBox>
</template>
<script>
import ModelBox from './ModelBox.vue';
export default {
  name: 'LineInpurAndOutput',
  components: {
    ModelBox
  },
  props: {
    dataObj: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    dataObj: {
      handler(newVal, oldVal) {
        console.log(newVal, 'newVal');
        if (newVal) {
          this.nowMonth = newVal.todayClass ? newVal.nowMonth.map((item, index) => [
            `<span style="color:#000;" >${index + 1 || ''}
            </span>`,
            `<span style="color:#000;" >${item.name || ''}
            </span>`,
            // formatDate(item.planStartTime) || '',
            `
          <span style="color:#000;" >${item.inputNum || ''}
            </span>`,
            `<span style="color:#000;">${item.outputNum || ''}</span>`,
            `<div style="width:136px; margin:0px;">
          <div style="display:inline-block;height:8px; background:#D8DEEB; border-radius:4px; overflow:hidden;text-align:left;width:90px">
            <div style="width:${item.inputOutputRate}%; height:100%; background:#0B58FF;border-radius:4px;"></div>
          </div>
          <span style="display:inline-block;margin-left:10px; color:#000; font-size:14px;">${item.inputOutputRate}%</span>
        </div>`,
          ]) : []
          this.monthConfig.data = this.nowMonth
          this.$refs['month'].updateRows(this.nowMonth)
          this.nowWeek = newVal.nowWeek ? newVal.nowWeek.map((item, index) => [
            `<span style="color:#000;" >${index + 1 || ''}
            </span>`,
            `<span style="color:#000;" >${item.name || ''}
            </span>`,
            // formatDate(item.planStartTime) || '',
            `
          <span style="color:#000;" >${item.inputNum || ''}
            </span>`,
            `<span style="color:#000;">${item.outputNum || ''}</span>`,
            `<div style="width:136px; margin:0px;">
          <div style="display:inline-block;height:8px; background:#D8DEEB; border-radius:4px; overflow:hidden;text-align:left;width:90px">
            <div style="width:${item.inputOutputRate}%; height:100%; background:#0B58FF;border-radius:4px;"></div>
          </div>
          <span style="display:inline-block;margin-left:10px; color:#000; font-size:14px;">${item.inputOutputRate}%</span>
        </div>`,
          ]) : []
          this.weekConfig.data = this.nowWeek
          this.$refs['week'].updateRows(this.nowWeek)
          this.oneDay = newVal.oneDay ? newVal.oneDay.map((item, index) => [
            `<span style="color:#000;" >${index + 1 || ''}
            </span>`,
            `<span style="color:#000;" >${item.name || ''}
            </span>`,
            // formatDate(item.planStartTime) || '',
            `
          <span style="color:#000;" >${item.inputNum || ''}
            </span>`,
            `<span style="color:#000;">${item.outputNum || ''}</span>`,
            `<div style="width:136px; margin:0px;">
          <div style="display:inline-block;height:8px; background:#D8DEEB; border-radius:4px; overflow:hidden;text-align:left;width:90px">
            <div style="width:${item.inputOutputRate}%; height:100%; background:#0B58FF;border-radius:4px;"></div>
          </div>
          <span style="display:inline-block;margin-left:10px; color:#000; font-size:14px;">${item.inputOutputRate}%</span>
        </div>`,
          ]) : []
          this.dayConfig.data = this.oneDay
          this.$refs['day'].updateRows(this.oneDay)
          this.todayClass = newVal.todayClass ? newVal.todayClass.map((item, index) => [
            `<span style="color:#000;" >${index + 1 || ''}
            </span>`,
            `<span style="color:#000;" >${item.name || ''}
            </span>`,
            // formatDate(item.planStartTime) || '',
            `
          <span style="color:#000;" >${item.inputNum || ''}
            </span>`,
            `<span style="color:#000;">${item.outputNum || ''}</span>`,
            `<div style="width:136px; margin:0px;">
          <div style="display:inline-block;height:8px; background:#D8DEEB; border-radius:4px; overflow:hidden;text-align:left;width:90px">
            <div style="width:${item.inputOutputRate}%; height:100%; background:#0B58FF;border-radius:4px;"></div>
          </div>
          <span style="display:inline-block;margin-left:10px; color:#000; font-size:14px;">${item.inputOutputRate}%</span>
        </div>`,
          ]) : []
          this.classConfig.data = this.todayClass
          this.$refs['classToday'].updateRows(this.todayClass)
        }
      },
      deep: true  // 深度监听
    }
  },
  data() {
    return {
      nowMonth: [],
      nowWeek: [],
      oneDay: [],
      todayClass: [],
      classConfig:{
        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: 25,
        headerBGC: '#E8EDF8',
        oddRowBGC:'#E8EDF8',
        evenRowBGC:'#fff',
        rowNum: 8,
        columnWidth: [66, 120, 125, 126, 174],
        align	: ['center', 'center', 'center', 'center', 'center'],
        data: []
      },
      monthConfig: {
        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: 25,
        headerBGC: '#E8EDF8',
        oddRowBGC: '#E8EDF8',
        evenRowBGC: '#fff',
        rowNum: 8,
        columnWidth: [66, 120, 125, 126, 174],
        align: ['center', 'center', 'center', 'center', 'center'],
        data: []
      },
      dayConfig: {
        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: 25,
        headerBGC: '#E8EDF8',
        oddRowBGC: '#E8EDF8',
        evenRowBGC: '#fff',
        rowNum: 8,
        columnWidth: [66, 120, 125, 126, 174],
        align: ['center', 'center', 'center', 'center', 'center'],
        data: []
      },
      weekConfig: {
        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: 25,
        headerBGC: '#E8EDF8',
        oddRowBGC: '#E8EDF8',
        evenRowBGC: '#fff',
        rowNum: 8,
        columnWidth: [66, 120, 125, 126, 174],
        align: ['center', 'center', 'center', 'center', 'center'],
        data: []
      }

    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      // let arr1 = []
      // let arr2 = []
      // let data = [
      //   [1,'A1-磨边',234344,234333,100],
      //   [2,'A1-磨边',234344,234333,10],
      //   [3,'A1-磨边',234344,234333,96],
      //   [4,'A1-磨边',234344,234333,20],
      //   [5,'A1-磨边',234344,234333,40],
      //   [6,'A1-磨边',234344,234333,90],
      //   [7,'A1-磨边',234344,234333,80],
      //   [8,'A1-磨边',234344,234333,80],
      // ]
      // for (let i =0; i < data.length; i++) {
      //   arr1.push(`<span style="color:#000;">${data[i][0]}</span>`)
      //   arr1.push(`<span style="color:#000;">${data[i][1]}</span>`)
      //   arr1.push(`<span style="color:#000;">${data[i][2]}</span>`)
      //   arr1.push(`<span style="color:#000;">${data[i][3]}</span>`)
      //   arr1.push(`<div style="width:136px; margin:0px;">
      //     <div style="display:inline-block;height:8px; background:#D8DEEB; border-radius:4px; overflow:hidden;text-align:left;width:90px">
      //       <div style="width:${data[i][4]}%; height:100%; background:#0B58FF;border-radius:4px;"></div>
      //     </div>
      //     <span style="display:inline-block;margin-left:10px; color:#000; font-size:14px;">${data[i][4]}%</span>
      //   </div>`)
      //   arr2.push(arr1)
      //   arr1 = []
      // }
      // this.config.data = arr2
    }
  }
}
</script>
<style lang='scss' scoped>
.line-container {
  display: flex;
  height: 600px;
  justify-content: space-between;
  align-content: space-between;
  flex-wrap: wrap;
  .table-box {
    width: 601px;
    height: 300px;
    position: relative;
    padding-top: 16px;
    .title {
      width: 271px;
      height: 27px;
      line-height: 27px;
      font-size: 20px;
      color: #000000;
      letter-spacing: 4px;
      text-align: center;
      background-image: url(../assets/img/title-bg.png);
      background-size: 100% 100%;
      margin: 0 auto;
    }
    .split-line {
      position: absolute;
      top: 53px;
      width: 1px;
      height: 242px;
      background: #CDD3DF;
    }
  }
}
</style>
