<template>
  <div id="rose-chart" style="width: 100%;height:100%">
    <div class="chart-title">
      本月不良率推移图
    </div>
    <div :id="pieId" class="pie-chart-container"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import testRes from './test';
function getCurrentMonthDates() {
    const dates = [];
    const today = new Date();
    const year = today.getFullYear();
    const month = today.getMonth();
    const daysInMonth = new Date(year, month + 1, 0).getDate();
    
    for (let i = 1; i <= daysInMonth; i++) {
        const formattedDate = `${(month + 1).toString().padStart(2, '0')}-${i.toString().padStart(2, '0')}`;
        dates.push(formattedDate);
    }
    
    return dates;
}
export default {
  name: 'RoseChart',
  props: {
    pieId: {
      type: String,
    },
    chartData: {
      type: Object,
    },
    dataType: {
    }
  },
  data() {
    return {
      option: {}
    }
  },
  methods: {
    createData() {
      const dates = getCurrentMonthDates();
      const today = new Date();
      const currentDay = today.getDate();
      
      // 生成模拟数据，未到日期的值为0
      const generateData = () => {
        return dates.map((date, index) => {
          const day = parseInt(date.split('-')[1]);
          let step = this.dataType == '6'? 6 : 10;
          return day <= currentDay ? (Math.random() * step).toFixed(2) : 0;
        });
      };
  
      var myChart = echarts.init(document.getElementById(this.pieId));
      this.option = {
        title: {
          // text: '本月不良率推移图',
          textStyle: {
            fontSize: 25,
            fontWight:'bold',
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          icon: 'rect',
          itemWidth: 20,
          itemHeight: 20,
          itemGap: 40,
          // data: ['反白', '偏移', '侧立', '缺件', '少锡'],
          data: ['不良率'],
          textStyle: {
            color: '#fff',
            fontSize: 20, // 25 -> 20
            fontWight:'bold'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          axisLabel: {
            fontSize: 25, // 30 -> 25
            color: '#fff',
            onZero: false
          },
          data: getCurrentMonthDates()
        },
        yAxis: {
          type: 'value',
          max: 10, // 设置最大值为10%
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
                type: 'dashed',
                color: '#999',
                width: 2,
                height:1,
                dashArray: [15, 5]
            }
         },
          axisLabel: {
            fontSize: 25,
            color: '#fff',
            formatter: function (value) {
                return value + '%'; // 添加百分比符号
            }
          },
        },
        series: 
            [
              {
                  name: '反白',
                  type: 'line',
                  smooth: true,
                  data: generateData(),
                  lineStyle: { width: 4 },
                  symbolSize: 12,
              },
              // {
              //     name: '偏移',
              //     type: 'line',
              //     smooth: true,
              //     data: Array.from({length: getCurrentMonthDates().length}, () => (Math.random() * 10).toFixed(2)),
              //     lineStyle: { width: 4 },
              //     symbolSize: 12,
              // },
              // {
              //     name: '侧立',
              //     type: 'line',
              //     smooth: true,
              //     data: Array.from({length: getCurrentMonthDates().length}, () => (Math.random() * 10).toFixed(2)),
              //     lineStyle: { width: 4 },
              //     symbolSize: 12,
              // },
              // {
              //     name: '缺件',
              //     type: 'line',
              //     smooth: true,
              //     data: Array.from({length: getCurrentMonthDates().length}, () => (Math.random() * 10).toFixed(2)),
              //     lineStyle: { width: 4 },
              //     symbolSize: 12,
              // },
              // {
              //     name: '少锡',
              //     type: 'line',
              //     smooth: true,
              //     data: Array.from({length: getCurrentMonthDates().length}, () => (Math.random() * 10).toFixed(2)),
              //     lineStyle: { width: 4 },
              //     symbolSize: 12,
              // }
            ]
      };
      myChart.setOption(this.option);
    },
    createData2() {
      var myChart = echarts.init(document.getElementById(this.pieId));
      console.log(myChart)
      this.option = {
        title: {
          text: '近一周产量趋势',
          textStyle: {
            fontSize:30,
            fontWight:'bold',
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          icon: 'rect',
          itemWidth: 20, // 色块宽度
          itemHeight: 20, // 色块高度
          itemGap: 40, // 图例之间的间距
          data:['水件', '进水阀', '排水阀','按钮'],
          textStyle: {
            color: '#fff',
            fontSize:30,
            fontWight:'bold'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          
          axisLabel: {
            fontSize: 35, // 设置 Y 轴字体大小
            color: '#fff', // 可选：设置字体颜色
            onZero: false ,// 确保 y 轴不与第一个数据点对齐
            // 只显示奇数索引的 x 轴标签
            // formatter: function (value, index) {
            //     return index % 2 === 1 ? value : ''; // 奇数索引显示，偶数索引隐藏
            // }
          },
        
          data:  testRes.data.yx_v_bzcl1w.map(item=>{return item["日期"]})
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          splitLine: {
            show: true, // 显示 y 轴辅助线
            lineStyle: {
                type: 'dashed', // 设置为虚线
                color: '#999', // 虚线颜色
                width: 2, // 虚线宽度
                height:1,
                dashArray: [15, 5]
            }
        },
          axisLabel: {
            fontSize: 35, // 设置 Y 轴字体大小
            color: '#fff', // 可选：设置字体颜色
            // 只显示偶数的 y 轴标签
            formatter: function (value) {
                return value % 200 === 0 ? value : ''; // 偶数显示，奇数隐藏
            }
          },
        },
        series:
            [
              {
                name: '水件',
                type: 'line',
                // stack: 'null',
                smooth: true,
                data: testRes.data.yx_v_bzcl1w.map(item=>{return item["水件"]}),
                lineStyle: {
                    width: 4, // 数据线加粗
                },
                symbolSize: 12, // 数据点大小
              },
              {
                name: '进水阀',
                type: 'line',
                // stack: 'null',
                smooth: true,
                data: testRes.data.yx_v_bzcl1w.map(item=>{return item["进水阀"]}),
                lineStyle: {
                    width: 4, // 数据线加粗
                },
                symbolSize: 12, // 数据点大小
              },
              {
                name: '排水阀',
                type: 'line',
                // stack: 'null',
                smooth: true,
                data: testRes.data.yx_v_bzcl1w.map(item=>{return item["排水阀"]}),
                lineStyle: {
                    width: 4, // 数据线加粗
                },
                symbolSize: 12, // 数据点大小
              },
              {
                name: '按钮',
                type: 'line',
                // stack: 'null',
                smooth: true,
                data: testRes.data.yx_v_bzcl1w.map(item=>{return item["按钮"]}),
                lineStyle: {
                    width: 4, // 数据线加粗
                },
                symbolSize: 12, // 数据点大小
              },
                    
                  ]
            };
            myChart.setOption(this.option);
            },
  },
  mounted() {
    const { createData,createData2 } = this
    if(this.dataType == 3){
      createData2()
    }else{
      createData()
    }

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

<style lang="less">
#rose-chart {
  box-sizing: border-box;
  color: white;
  .chart-title {
    font-size: 25px;
    color: white;
    font-weight: bold;
    display: flex;
    align-items: center;
    // margin-bottom: 15px;
    
    &::before {
      content: '';
      display: inline-block;
      width: 10px;
      height: 20px;
      background-color: #08e5ff; // 浅蓝色
      margin-right: 10px;
    }
  }
  .pie-chart-container {
    height:calc(100% - 30px);
  }
}
</style>
