<template>
  <div class="bottom-charts">
    <div style="width: 100%;" v-if="dataType == '整机'">
      <div class="bc-chart-item">
        <div class="bcci-header">整机派工单执行进度</div>
        <dv-scroll-board :config="config3" style="height:90%;margin-left: 2%;width:96%" />
      </div>
    </div>
    <div style="width: 100%;" v-else>
      <div class="bc-chart-item" v-if="isChange">
        <div class="bcci-header">机芯派工单执行进度</div>
        <dv-scroll-board :config="config1" style="height:90%;margin-left: 2%;width:96%" />
      </div>
      <!-- <dv-decoration-2 class="decoration-1" :reverse="true" style="width:5px;" /> -->

      <div class="bc-chart-item" v-if="!isChange">
        <div class="bcci-header">盖板派工单执行进度</div>
        <dv-scroll-board :config="config2" style="height:90%;margin-left: 2%;width:96%" />
      </div>
    </div>
  </div>
</template>

<script>
import LabelTag from './LabelTag'
let timer = null;
export default {
  name: 'BottomCharts',
  components: {
    LabelTag
  },
  props: {
    dataType: {
    }
  },
  data() {
    let _this  = this;
    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 completionRate = ((completedQuantity / orderQuantity) * 100).toFixed(2) + '%';
        function createProgressCircle(percentage) {
          let color, content;
          if (percentage === 0) {
            color = 'gray';
            content = '0%';
            return `
              <div class="circle-progress" style="border-color: ${color}; ">
                <div class="circle-content" style="color: ${color}; ">${content}</div>
              </div>
            `;
          } else if (percentage === 100) {
            color = '#1afa29';
            content = '√';
            return `
            <div class="circle-progress" style="border-color: ${color}; ">
              <div class="circle-img"></div>
            </div>
          `;
          } else {
            color = '#08e5ff';
            content = `${percentage}%`;
            return `
            <div class="circle-progress" style="border-color: ${color}; ">
              <div class="circle-content" style="color: ${color}; ">${content}</div>
            </div>
          `;
          }



        }

        //随机三个百分比 从大到小
        const completionRate1 = Math.floor(Math.random() * 100);
        const completionRate2 = Math.floor(Math.random() * 100);
        const completionRate3 = Math.floor(Math.random() * 100);
        const newDataItem = [];
        if(_this.dataType == '整机') {
          newDataItem = [
            `PS-${formattedDate2}${String(i).padStart(3, '0')}`,  // 编号
            title,  // 固定值
            formattedDate,  // 日期
            orderQuantity,  // 订单量
            completionRate,  // 完成率
            createProgressCircle(100),
            createProgressCircle(100),
            createProgressCircle(completionRate2),
            createProgressCircle(completionRate2),
            createProgressCircle(completionRate2),
            createProgressCircle(completionRate2),
            completedQuantity  // 完成数量
          ];
        }
        // 创建新的数据项
        else if (title === 'U1机芯') {
          newDataItem = [
            `PS-${formattedDate2}${String(i).padStart(3, '0')}`,  // 编号
            title,  // 固定值
            formattedDate,  // 日期
            orderQuantity,  // 订单量
            completionRate,  // 完成率
            createProgressCircle(100),
            createProgressCircle(completionRate2),
            createProgressCircle(0),
            completedQuantity  // 完成数量
          ];
        } else {
          newDataItem = [
            `PS-${formattedDate2}${String(i).padStart(3, '0')}`,  // 编号
            title,  // 固定值
            formattedDate,  // 日期
            orderQuantity,  // 订单量
            completionRate,  // 完成率
            createProgressCircle(100),
            createProgressCircle(completionRate2),
            createProgressCircle(completionRate2),
            createProgressCircle(0),
            completedQuantity  // 完成数量
          ];
        }


        data.push(newDataItem);

        // 更新日期至下一天
        date.setDate(date.getDate() + 1);
      }
      return data;
    }

    return {
      isChange: true,
      config1: {
        header:['工单号', '产品名称', '派工日期', '派工数量', '工序进度', '组装', 'QC', '老化', '剩下数量'],
        data: generateRandomData(60, 'U1机芯'),
        index: true,
        headerHeight: 50,
        columnWidth: [80, 300],
        align: ['center'],
        //waitTime: 300000,
      },

      config2: {
        header:  ['工单号', '产品名称', '派工日期', '派工数量', '工序进度', '组装', '安规', '综合测试', '老化', '剩下数量'],
        data: generateRandomData(30, 'U1盖板'),
        headerHeight: 50,
        index: true,
        columnWidth: [80, 300],
        align: ['center']
      },

      config3: { 

        header: ['工单号', '产品名称', '派工日期', '派工数量', '工序进度', '上陶瓷', '气密性QC', '整机组装', '功能QC', '全外观QC', '包装'] ,
        data: generateRandomData(30, 'U1C智能坐便器[220V]'),
        headerHeight: 50,
        index: true,
        columnWidth: [80, 300],
        align: ['center']
      },
    }
  },
  created() {
    let that = this;
    timer = setInterval(() => {
      that.isChange = !that.isChange
    }, 60000)
  },
  beforeDestroy() {
    clearInterval(timer)
  }
}
</script>

<style lang="less">
.bottom-charts {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;

  .bc-chart-item {
    width: 100%;
    height: 100%;
    padding-top: 20px;
    box-sizing: border-box;
  }

  .bcci-header {
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 30px;
    font-weight: bold;
  }

  .dv-active-ring-chart {
    height: calc(~"100% - 80px");
  }

  .label-tag {
    height: 30px;
  }

  .active-ring-name {
    font-size: 18px !important;
  }

  .decoration-1,
  .decoration-2,
  .decoration-3 {
    display: absolute;
    left: 0%;
  }
}

.circle-progress {
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: relative;
  // background: conic-gradient(from 90deg at 50% 50%, transparent 0, rgba(18, 3, 117, 0.107) 0);
  transition: all 0.5s ease;
  border: 6px solid;
}

.circle-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.16rem;
  color: #333;
}

.circle-img {
  width: 80%;
  height: 80%;
  background-image: url('./img/icon_success.png');
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ceil,
.header-item {
  font-size: 0.3rem;
}
</style>
