import * as echarts from 'echarts';
import ReactEcharts from 'echarts-for-react';
import dayjs from 'dayjs';
import { VmEmpty } from "../../../_components";
import useSettings from "../../../_hooks/useSettings";
import { BaseService } from "../../api";
import { jsx as _jsx } from "react/jsx-runtime";
var Lcfx = function Lcfx(props) {
  var _useSettings = useSettings(),
    chartFontColor = _useSettings.chartFontColor,
    theme = _useSettings.theme;
  var id = props.id;
  var _BaseService$useMileA = BaseService.useMileAnalysis(id, dayjs().startOf('M').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')),
    mileAnalysisRes = _BaseService$useMileA.mileAnalysisRes;
  var names = mileAnalysisRes.names,
    values = mileAnalysisRes.values;
  var option = {
    tooltip: {
      trigger: 'axis',
      formatter: function formatter(params) {
        var _params$, _params$0$color;
        var str = "".concat(params === null || params === void 0 || (_params$ = params[0]) === null || _params$ === void 0 ? void 0 : _params$.axisValue);
        var color = (_params$0$color = params[0].color) === null || _params$0$color === void 0 ? void 0 : _params$0$color.colorStops; // 获取系列的颜色

        params.forEach(function (item, index) {
          var _color$index;
          str += "<div ><span style=\"color:".concat((_color$index = color[index]) === null || _color$index === void 0 ? void 0 : _color$index.color, ";font-size:24px\">\u2022</span> ").concat(item.seriesName, " &nbsp;&nbsp;&nbsp;").concat(item.data, "km</div>");
        });
        return str; // 返回带点的字符串
      }
    },
    grid: {
      top: 36,
      left: '6%',
      right: '5%',
      bottom: 20
    },
    legend: {
      show: false
    },
    xAxis: [{
      type: 'category',
      data: names || [],
      axisPointer: {
        type: 'shadow'
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: theme === 'blue' ? '#fff' : chartFontColor
      }
    }],
    yAxis: [{
      type: 'value',
      name: '(km)',
      min: 0,
      nameTextStyle: {
        color: theme === 'blue' ? '#fff' : chartFontColor
      },
      splitNumber: 5,
      axisTick: {
        show: false
      },
      axisLabel: {
        color: theme === 'blue' ? '#fff' : chartFontColor
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: 'rgba(151,151,151,0.28)'
        }
      }
    }],
    series: [{
      name: '里程',
      type: 'bar',
      barWidth: 18,
      data: (values === null || values === void 0 ? void 0 : values.length) > 0 ? values[0] : [],
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
          offset: 0,
          color: '#1677FF'
        }, {
          offset: 1,
          color: '#62FDF3'
        }])
      }
    }]
  };
  return (names === null || names === void 0 ? void 0 : names.length) > 0 ? /*#__PURE__*/_jsx(ReactEcharts, {
    option: option,
    notMerge: true,
    lazyUpdate: true,
    style: {
      height: '100%',
      width: '100%'
    }
  }) : /*#__PURE__*/_jsx(VmEmpty, {
    type: "NO_CHART"
  });
};
export default Lcfx;