<template>
  <div id="bottomLeft">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span style="color:#5cd9e8">
          <icon name="chart-bar"></icon>
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2">近30天产品产量</span>
        </div>
      </div>
      <div>
        <!--渐变折线图-->
        <div id="monthProductChart" :style="{height:height,width:width}"></div>

      </div>
    </div>
  </div>
</template>

<script>
require('echarts/theme/macarons') // echarts theme

import resize from "../dashboard/mixins/resize";
const animationDuration = 6000
export default {
  mixins: [resize],
  props: {
    monthData: {},
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '200px'
    },
  },
  data() {
    return {
      chart: null
    };
  },
  mounted() {
    this.initChart()
    // 每隔秒请求一次数据
    setInterval(() => {
      this.initChart();
    }, 3600000)
  },
  methods: {
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.echarts.init(document.getElementById('monthProductChart'))
      const dateDay = [];
      const dateNum = [];
      for (let i = 0; i < this.monthData.length; i++) {
        dateDay[i] = this.monthData[i].dateDay
        dateNum[i] = this.monthData[i].productPutput
      }

      this.chart.setOption({
        /* 周围边距 */
        grid: {
          left: '3%',
          right: '3%',
          bottom: '1%',
          top: '13%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: dateDay,
          axisLabel: {//x轴文字的配置
            textStyle: {
              color: '#ffffff',
            }
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            textStyle: {
              color: '#ffffff'
            },
          }
        },
        series: [
          {
            data: dateNum,
            type: 'line',
            itemStyle: {
              color: 'rgb(93,145,255)'
            },
            symbol: "none",
            areaStyle: {
              color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(0,84,253)'
                },
                {
                  offset: 1,
                  color: 'rgba(152,206,253,0.34)'
                }
              ])
            },
          }
        ]
      })
    }
  }
};
</script>

<style lang="scss">
#bottomLeft {
  padding: 0.2rem 0.2rem 0;
  height: 2.9rem;
  min-width: 3.75rem;
  border-radius: 0.0625rem;
  .bg-color-black {
    height: 2.7rem;
    border-radius: 0.125rem;
  }
  .text {
    color: #c3cbde;
  }
  .chart-box {
    margin-top: 0.2rem;
    width: 2.125rem;
    height: 2.125rem;
    .active-ring-name {
      padding-top: 0.125rem;
    }
  }
}
</style>
