<template>
  <div>
    <highcharts :options="chartOptions.line" />
  </div>
</template>

<script>
import { setTime, Series, setCategories } from './helpers';
import { Chart } from 'highcharts-vue';

export default {
  components: {
    highcharts: Chart,
  },
  props: {
    timeScale: {
      type: String,
      default: 'hour',
    },
    warning: {
      type: Number,
      default: 66,
    },
    shutdown: {
      type: Number,
      default: 88,
    },
  },
  computed: {
    chartOptions() {
      return {
        line: {
          chart: {
            type: 'line',
            margin: [12, 50, 32, 60],
            height: '320px',
          },
          title: null,
          xAxis: {
            categories: setTime(60, this.timeScale),
            title: null,
            labels: {
              step: 6,
            },
            minorGridLineColor: '#1A3E5B1A',
          },
          yAxis: {
            categories: setCategories(101, 'Вт'),
            min: 0,
            max: 100,
            title: null,
            minTickInterval: 25,
            minorGridLineColor: '#1A3E5B1A',
            plotLines: [
              {
                color: '#E11717',
                dashStyle: 'solid',
                value: this.warning,
                zIndex: '1000',
                width: 2,
                label: {
                  text: 'Пороговое значения предупреждение',
                  align: 'right',
                  style: {
                    fontFamily: 'Inter',
                    fontSize: '12px',
                    fontStyle: 'normal',
                    fontWeight: '400',
                    lineHeight: '16px',
                    color: '#0C1C2999',
                  },
                },
              },
              {
                color: '#1A3E5B',
                dashStyle: 'solid',
                value: this.shutdown,
                width: 2,
                label: {
                  text: 'Пороговое значения отказ',
                  align: 'right',
                  style: {
                    fontFamily: 'Inter',
                    fontSize: '12px',
                    fontStyle: 'normal',
                    fontWeight: '400',
                    lineHeight: '16px',
                    color: '#0C1C2999',
                  },
                },
              },
            ],
          },
          series: Series['power'].map((item) => ({
            ...item,
            marker: {
              enabled: false,
            },
          })),
          legend: {
            enabled: false,
          },
          tooltip: {
            enabled: false,
            crosshairs: false,
          },
          plotOptions: {
            series: {
              showInLegend: true,
            },
          },
        },
      };
    },
  },
};
</script>
<style lang="scss">
.highcharts-credits {
  display: none;
}

.highcharts-plot-line-label {
  transform: translate(-15px, 0) !important;
}
</style>
