<!-- 胶囊图的单个柱图 -->
<template>
  <div :id="id" class="chart-single" />
</template>

<script>
  import ChartBase from '@/components/Base/ChartsBase.js';
  import {
    ChartStyle
  } from '@/common/const.js';
  import {
    getWarnColor,
  } from '@/common/util.js';
  import echarts from 'echarts';

  export default {
    mixins: [ChartBase],
    methods: {
      setOptions(chartData) {
        if (!this.chart || !chartData) return;
        const colors = getWarnColor(chartData.state, 1);
        const minN = -2000000000;
        const max = chartData.earlywarningruleminvalue > minN ? chartData.earlywarningruleminvalue : chartData.alertRuleMinValue >
          minN ? chartData.alertRuleMinValue : chartData.protectRuleMinValue > minN ? chartData.protectRuleMinValue : chartData.defaultMax;
        let option = {
          tooltip: {
            formatter: params => {
              return chartData.cpName + (chartData.cpUnit ? '（' + chartData.cpUnit + '）' : '') + '<br/>' + '当前值：' +
                params.value + '，阈值：' + max;
            },
          },
          title: {
            text: chartData.cpName + (chartData.cpUnit ? '（' + chartData.cpUnit + '）' : ''),
            textStyle: {
              color: ChartStyle.axis.color,
              fontSize: ChartStyle.axis.fontSize,
              fontWeight: 400
            },
            left: '5%',
          },
          xAxis: {
            type: 'value',
            max: max,
            min: 0,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitLine: {
              show: false
            }
          },
          yAxis: {
            type: 'category',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            }
          },
          series: [{
            type: 'bar',
            data: [chartData.kksValueR],
            label: {
              show: true,
              position: 'insideLeft',
              color: '#000',
              fontSize: 10,
              padding: [2, 0, 0, 0],
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                offset: 0,
                color: colors[0]
              }, {
                offset: 1,
                color: colors[1]
              }]),
              barBorderRadius: [50, chartData.kksValueR > max ? 50 : 0, chartData.kksValueR > max ? 50 : 0, 50]
            },
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(255,255,255,0.7)',
              barBorderRadius: 50
            },
            barMaxWidth: 13
            // }, {
            //   type: 'pictorialBar',
            //   data: [3000],
            //   label: {
            //     show: true,
            //     position: 'right',
            //     color: ChartStyle.label.color,
            //     fontSize: 10,
            //     formatter: params => {
            //       return chartData.kksValueR;
            //     }
            //   },
            //   itemStyle: {
            //     color: 'transparent'
            //   },
            //   barMaxWidth: 13
          }],
          grid: {
            top: '10%',
            left: '5%',
            right: '5%',
            bottom: '0%',
            containLabel: true
          }
        };
        this.chart.setOption(option);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .chart-single {
    width: 100%;
    height: 100%;
  }
</style>
