<template>
  <div class="right-chart-1">
    <div class="rc1-header">备料计划</div>
      <dv-scroll-board :config="config" style="height:90%;margin-left: 2%;width:96%" />
  </div>
</template>

<script>
export default {
  name: 'RightChart1',
  props: { 
    dataType: {
    }
  },
  data () {
    function generateRandomData(N, title) {
      const data = [];
      let date = new Date(); // 从今天的日期开始
      for (let i = 1; i <= N; i++) {
        // 格式化日期为'YYYY-MM-DD'
        const formattedDate = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
        const formattedDate2 = `${date.getFullYear()}${String(date.getMonth() + 1).padStart(2, '0')}${String(date.getDate()).padStart(2, '0')}`;

        // 订单量随机在20到200之间，步长为10
        const orderQuantity = Math.floor(Math.random() * 19 + 2) * 10;

        // 完成数量随机但不超过订单量
        const completedQuantity = Math.floor(Math.random() * (orderQuantity / 10)) * 10;
 

        // 创建新的数据项
        const newDataItem = [
          //`PS-${formattedDate2}${String(i).padStart(3, '0')}`,  // 编号
          title,  // 固定值 
          orderQuantity,  // 订单量 
          completedQuantity  // 完成数量
        ];

        data.push(newDataItem);

        // 更新日期至下一天
        date.setDate(date.getDate() + 1);
      }
      return data;
    }
    let data = [];
    
    ['U1电源线压板', '接地线[160mm]', '硅胶管[4*7，50cm,棕色]', '卡箍[内径7.5mm]', '防倒流器[进气口倾斜45度]', '硅胶管[5*8,90mm]', '卡箍[内径7.5mm]', '夜灯[灯光蓝色,360±5mm长度,2P黄色插头]', '卡箍[内径7.5mm]', 'U1烘干上壳', '扎带[3*10]', '即热器电源线[24cm]', '发热丝[220V]', '大泵电源线[连接线,450mm]', '脚感[连接线,600mm]', '硅胶管[4*7,120mm]', '卡箍[内径7.5mm]', '进水2分管[900mm]', '分配阀[2进4出,1直3弯]', '气泵[线长40cm,减震棉2mm]', '盘头自攻螺丝[4*30,304不锈钢,平尾]', '盘头机牙螺丝[4*6,带垫片,430不锈钢]', 'U1线卡', '漏保电源线[220V,10A]', '硅胶管[4*7,230mm]', '盘头机牙螺丝[4*6,带垫片,430不锈钢]', '风机', '硅胶管[4*7,150mm]', '水杀菌[线长度220mm±5mm]', '硅胶管[4*7,120mm]', '硅胶管[4*7,140mm]', '出泡头[带10cm硅胶管]', '即热器', 'U1气泵压板', '减压阀', '主控板', '喷杆[35电机,塑料喷杆,硅胶管140mm]', 'U1单边水箱防水罩', '接地铜片[20*20]', '盘头自攻螺丝[4*10,430不锈钢]', '盘头自攻螺丝[4*9,430不锈钢,平尾]', 'U1底座[白色]', 'U1烘干下壳'].forEach(a=>{

      data = [...data,...generateRandomData(1, a)];
    })

    return {
      config: {
        header: [
          //'工单号',
         '物料名称', '备料数', '欠数料'],
        data: data,
           index: false,
        columnWidth: [300],
        align: ['center']
      },
    }
  }
}
</script>

<style lang="less">
.right-chart-1 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .rc1-header {
    font-size: 24px;
    font-weight: bold;
    height: 40px;
    line-height: 40px;
    margin-top: 2%;
    text-align: center;
  }

  .rc1-chart-container {
    flex: 1;
    display: flex;
  }

  .left {
    width: 30%;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .number {
      font-size: 34px;
      color: #096dd9;
      font-weight: bold;
      margin-bottom: 30px;
    }
  }

  .right {
    flex: 1;
    padding-bottom: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }
}
</style>
