<template>
  <div id="rose-chart"  style="flex:1" >
    <div :id="pieId" class="pie-chart-container"></div>
  </div>
</template>

<script>

function getRecentWeekDates() {
    const dates = [];
    const today = new Date();
    
    for (let i = 6; i >= 0; i--) {
        const date = new Date(today);
        date.setDate(today.getDate() - i);
        
        const month = date.getMonth() + 1; // 月份从0开始，所以要加1
        const day = date.getDate();
        
        // 格式化为 'MM-DD'
        const formattedDate = `${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
        dates.push(formattedDate);
    }
    
    return dates;
}

import * as echarts from 'echarts';
export default {
  name: 'RoseChart',
  props: {
    pieId: {
      type: String,
    },
    chartData: {
      type: Object,
    },
    dataType: {
    }
  },
  data() {
    return {
      option: {}
    }
  },
  methods: {
    createData() {

      var myChart = echarts.init(document.getElementById(this.pieId));
      console.log(myChart)
      this.option = {
        title: {
          text: '近一周产量趋势',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: this.dataType == '整机' ? ['整机线'] : ['机芯1线', '机芯2线', '盖板线'],
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          data:  getRecentWeekDates()
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
        },
        series:
          this.dataType == '整机' ?
            [
              {
                name: '整机线',
                type: 'line',
                stack: 'Total',
                data: [133, 162, 191, 134, 130, 230, 310]
              }
            ] :
            [

              {
                name: '机芯1线',
                type: 'line',
                stack: 'Total',
                data: [120, 132, 101, 134, 90, 230, 210]
              },
              {
                name: '机芯2线',
                type: 'line',
                stack: 'Total',
                data: [150, 142, 111, 114, 120, 120, 110]
              },
              {
                name: '盖板线',
                type: 'line',
                stack: 'Total',
                data: [130, 232, 201, 154, 190, 330, 410]
              }
            ]
      };
      myChart.setOption(this.option);
    },
    // randomExtend (minNum, maxNum) {
    //   if (arguments.length === 1) {
    //     return parseInt(Math.random() * minNum + 1, 10)
    //   } else {
    //     return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
    //   }
    // }
  },
  mounted() {
    const { createData } = this

    createData()

    // setInterval(createData, 100000)
  }
}
</script>

<style lang="less">
#rose-chart {
  box-sizing: border-box;
  color: white;

  .pie-chart-container {
    height: 100%
  }
}
</style>
