/**
 * 计量信息-图表-进场车次时间分布
 */

import * as echarts from 'echarts';
import { VmBarCharts, VmEmpty, VmWrapper } from "../../../_components";
import { BaseService } from "../../api-zd-reborn";
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
var ChartJccc = function ChartJccc(_ref) {
  var _jcccsjfbRes$extraDat, _jcccsjfbRes$extraDat2, _jcccsjfbRes$values;
  var deviceId = _ref.deviceId,
    startDate = _ref.startDate,
    endDate = _ref.endDate;
  var _BaseService$useJcccs = BaseService.useJcccsjfb(deviceId, startDate, endDate),
    jcccsjfbRes = _BaseService$useJcccs.jcccsjfbRes;
  var dates = (jcccsjfbRes === null || jcccsjfbRes === void 0 || (_jcccsjfbRes$extraDat = jcccsjfbRes.extraData) === null || _jcccsjfbRes$extraDat === void 0 || (_jcccsjfbRes$extraDat = _jcccsjfbRes$extraDat.maxPeriods) === null || _jcccsjfbRes$extraDat === void 0 ? void 0 : _jcccsjfbRes$extraDat.length) > 0 ? jcccsjfbRes.extraData.maxPeriods.map(function (ele) {
    return ele.date;
  }) : [];
  var count = (jcccsjfbRes === null || jcccsjfbRes === void 0 || (_jcccsjfbRes$extraDat2 = jcccsjfbRes.extraData) === null || _jcccsjfbRes$extraDat2 === void 0 || (_jcccsjfbRes$extraDat2 = _jcccsjfbRes$extraDat2.maxPeriods) === null || _jcccsjfbRes$extraDat2 === void 0 ? void 0 : _jcccsjfbRes$extraDat2.length) > 0 ? jcccsjfbRes.extraData.maxPeriods.map(function (ele) {
    return ele.count;
  }) : [];
  return /*#__PURE__*/_jsxs(VmWrapper, {
    title: "\u8FDB\u573A\u8F66\u6B21\u65F6\u95F4\u5206\u5E03",
    needChange: false,
    children: [/*#__PURE__*/_jsxs("div", {
      className: "metering-content-charts-desc",
      title: "\u8FDB\u573A\u9AD8\u5CF0\u96C6\u4E2D\u5728".concat((dates === null || dates === void 0 ? void 0 : dates.join('点、')) || 0, "\u70B9\uFF0C\u8FDB\u573A\u8F66\u6B21\u5206\u522B\u4E3A").concat((count === null || count === void 0 ? void 0 : count.join('次、')) || '-', "\u6B21\uFF0C\n      \u6CE8\u610F\u5408\u7406\u8C03\u5EA6\uFF0C \u7F13\u89E3\u5382\u533A\u6392\u961F\u60C5\u51B5\u3002"),
      children: ["\u8FDB\u573A\u9AD8\u5CF0\u96C6\u4E2D\u5728", (dates === null || dates === void 0 ? void 0 : dates.join('点、')) || 0, "\u70B9\uFF0C\u8FDB\u573A\u8F66\u6B21\u5206\u522B\u4E3A", (count === null || count === void 0 ? void 0 : count.join('次、')) || '-', "\u6B21\uFF0C\u6CE8\u610F\u5408\u7406\u8C03\u5EA6\uFF0C \u7F13\u89E3\u5382\u533A\u6392\u961F\u60C5\u51B5\u3002"]
    }), /*#__PURE__*/_jsx("div", {
      style: {
        height: '298px',
        width: '100%'
      },
      children: ((_jcccsjfbRes$values = jcccsjfbRes.values) === null || _jcccsjfbRes$values === void 0 ? void 0 : _jcccsjfbRes$values.length) > 0 ? /*#__PURE__*/_jsx(VmBarCharts, {
        unit: "\u6B21",
        height: 0,
        xAxis: (jcccsjfbRes === null || jcccsjfbRes === void 0 ? void 0 : jcccsjfbRes.names) || [],
        yAxisList: [{
          name: '次',
          unit: '次'
        }],
        dataList: [{
          data: jcccsjfbRes !== null && jcccsjfbRes !== void 0 && jcccsjfbRes.values ? jcccsjfbRes.values[0] : [],
          name: '',
          color: 'green',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 1,
              color: '#1B89FF'
            }, {
              offset: 0,
              color: '#51d0ff6e'
            }])
          }
        }]
      }) : /*#__PURE__*/_jsx(VmEmpty, {
        type: "NO_CHART"
      })
    })]
  });
};
export default ChartJccc;