import React, { Fragment } from 'react';
import { observer } from 'mobx-react-lite';
import ReactEcharts from 'echarts-for-react';
import { useClusterStore } from "../../../stores";
import { useNodeContentStore } from "./stores";
import NodePodsTable from "./node-pods-table";
import { useClusterMainStore } from "../../stores";
import "./NodeDetail.less";
var NodeContent = observer(function () {
  var _useNodeContentStore = useNodeContentStore(),
      formatMessage = _useNodeContentStore.formatMessage,
      nodeInfoDs = _useNodeContentStore.nodeInfoDs;

  var _useClusterMainStore = useClusterMainStore(),
      intlPrefix = _useClusterMainStore.intlPrefix;

  var _useClusterStore = useClusterStore(),
      getSelectedMenu = _useClusterStore.clusterStore.getSelectedMenu;

  var name = getSelectedMenu.name;
  var node = nodeInfoDs.current;
  return /*#__PURE__*/React.createElement("div", {
    className: "c7ncd-node-content"
  }, node ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: "c7n-node-title"
  }, formatMessage({
    id: "".concat(intlPrefix, ".node.assign.overview")
  })), /*#__PURE__*/React.createElement("div", {
    className: "c7n-node-pie"
  }, podPies(formatMessage, node.toData()))) : null, /*#__PURE__*/React.createElement("div", {
    className: "c7n-node-title"
  }, formatMessage({
    id: 'node.pods'
  })), /*#__PURE__*/React.createElement(NodePodsTable, null));
});

function podPies(formatMessage, node) {
  if (!node) {
    return;
  }

  var cpuData = {
    rv: node.cpuRequest,
    lmv: node.cpuLimit,
    resPercent: node.cpuRequestPercentage,
    limPercent: node.cpuLimitPercentage,
    total: node.cpuTotal
  };
  var memoryPieData = {
    rv: node.memoryRequestPercentage.split('%')[0],
    lmv: node.memoryLimitPercentage.split('%')[0],
    resPercent: node.memoryRequestPercentage,
    limPercent: node.memoryLimitPercentage,
    total: 100
  };
  var memoryData = {
    rv: node.memoryRequest,
    lmv: node.memoryLimit,
    resPercent: node.memoryRequestPercentage,
    limPercent: node.memoryLimitPercentage,
    total: node.memoryTotal
  };
  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: "c7n-node-pie-block"
  }, /*#__PURE__*/React.createElement("div", {
    className: "c7n-node-pie-percent"
  }, cpuData.resPercent), /*#__PURE__*/React.createElement(ReactEcharts, {
    option: getOption(cpuData),
    notMerge: true,
    lazyUpdate: true,
    style: {
      height: '160px',
      width: '160px'
    }
  }), /*#__PURE__*/React.createElement("div", {
    className: "c7n-node-pie-inside-percent"
  }, cpuData.limPercent), /*#__PURE__*/React.createElement("div", {
    className: "c7n-node-pie-title"
  }, formatMessage({
    id: 'cluster.cpu'
  })), pieDes(formatMessage, cpuData)), /*#__PURE__*/React.createElement("div", {
    className: "c7n-node-pie-block"
  }, /*#__PURE__*/React.createElement("div", {
    className: "c7n-node-pie-percent"
  }, memoryData.resPercent), /*#__PURE__*/React.createElement(ReactEcharts, {
    option: getOption(memoryPieData),
    notMerge: true,
    lazyUpdate: true,
    style: {
      height: '160px',
      width: '160px'
    }
  }), /*#__PURE__*/React.createElement("div", {
    className: "c7n-node-pie-inside-percent"
  }, memoryData.limPercent), /*#__PURE__*/React.createElement("div", {
    className: "c7n-node-pie-title"
  }, formatMessage({
    id: 'cluster.memory'
  })), pieDes(formatMessage, memoryData)), /*#__PURE__*/React.createElement("div", {
    className: "c7n-node-pie-block"
  }, /*#__PURE__*/React.createElement("div", {
    className: "c7n-node-pie-percent"
  }), /*#__PURE__*/React.createElement(ReactEcharts, {
    option: getPodOption(node),
    notMerge: true,
    lazyUpdate: true,
    style: {
      height: '160px',
      width: '160px'
    }
  }), /*#__PURE__*/React.createElement("div", {
    className: "c7n-node-pie-pod-percent"
  }, node.podPercentage), /*#__PURE__*/React.createElement("div", {
    className: "c7n-node-pie-title"
  }, formatMessage({
    id: 'node.pod.allocated'
  })), /*#__PURE__*/React.createElement("div", {
    className: "c7n-node-pie-info"
  }, /*#__PURE__*/React.createElement("span", {
    className: "c7n-node-pie-info-span rv"
  }), /*#__PURE__*/React.createElement("span", null, formatMessage({
    id: 'node.allocated'
  })), /*#__PURE__*/React.createElement("span", null, node.podCount)), /*#__PURE__*/React.createElement("div", {
    className: "c7n-node-pie-info"
  }, /*#__PURE__*/React.createElement("span", {
    className: "c7n-node-pie-info-span"
  }), /*#__PURE__*/React.createElement("span", null, formatMessage({
    id: 'node.allV'
  })), /*#__PURE__*/React.createElement("span", null, node.podTotal))));
}

function getOption(data) {
  var lmvSeries = data.total - data.lmv > 0 ? {
    type: 'pie',
    radius: ['40%', '68%'],
    hoverAnimation: false,
    label: {
      show: false
    },
    data: [{
      value: data.lmv,
      name: 'limitValue',
      itemStyle: {
        color: '#57AAF8'
      }
    }, {
      value: data.total - data.lmv,
      name: 'value',
      itemStyle: {
        color: 'rgba(0,0,0,0.08)'
      }
    }]
  } : {
    type: 'pie',
    radius: ['40%', '68%'],
    hoverAnimation: false,
    label: {
      show: false
    },
    data: [{
      value: data.lmv,
      name: 'limitValue',
      itemStyle: {
        color: '#57AAF8'
      }
    }]
  };
  var rvSeries = data.total - data.rv > 0 ? {
    hoverAnimation: false,
    type: 'pie',
    radius: ['75%', '95%'],
    label: {
      show: false
    },
    data: [{
      value: data.rv,
      name: 'requestValue',
      itemStyle: {
        color: '#00BFA5'
      }
    }, {
      value: data.total - data.rv,
      name: 'value',
      itemStyle: {
        color: 'rgba(0,0,0,0.08)'
      }
    }]
  } : {
    type: 'pie',
    radius: ['75%', '95%'],
    hoverAnimation: false,
    label: {
      show: false
    },
    data: [{
      value: data.rv,
      name: 'limitValue',
      itemStyle: {
        color: '#00BFA5'
      }
    }]
  };
  return {
    tooltip: {
      show: false
    },
    legend: {
      show: false
    },
    series: [lmvSeries, rvSeries]
  };
}

function pieDes(formatMessage, data) {
  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: "c7n-node-pie-info"
  }, /*#__PURE__*/React.createElement("span", {
    className: "c7n-node-pie-info-span rv"
  }), /*#__PURE__*/React.createElement("span", null, formatMessage({
    id: 'node.rv'
  })), /*#__PURE__*/React.createElement("span", null, data.rv)), /*#__PURE__*/React.createElement("div", {
    className: "c7n-node-pie-info"
  }, /*#__PURE__*/React.createElement("span", {
    className: "c7n-node-pie-info-span lmv"
  }), /*#__PURE__*/React.createElement("span", null, formatMessage({
    id: 'node.lmv'
  })), /*#__PURE__*/React.createElement("span", null, data.lmv)), /*#__PURE__*/React.createElement("div", {
    className: "c7n-node-pie-info"
  }, /*#__PURE__*/React.createElement("span", {
    className: "c7n-node-pie-info-span"
  }), /*#__PURE__*/React.createElement("span", null, formatMessage({
    id: 'node.allV'
  })), /*#__PURE__*/React.createElement("span", null, data.total)));
}

function getPodOption(node) {
  return {
    tooltip: {
      show: false
    },
    legend: {
      show: false
    },
    series: [{
      hoverAnimation: false,
      type: 'pie',
      radius: ['75%', '95%'],
      label: {
        show: false
      },
      data: [{
        value: node.podCount,
        name: 'requestValue',
        itemStyle: {
          color: '#00BFA5'
        }
      }, {
        value: node.podTotal,
        name: 'value',
        itemStyle: {
          color: 'rgba(0,0,0,0.08)'
        }
      }]
    }]
  };
}

export default NodeContent;