import React from "react";
import { Spin } from "antd";
import { connect } from "dva";
import RadioButtonGroup from "./RadioButtonGroup";
import TrafficLineChart from "./TrafficLineChart";
import PanelNav from "./PanelNav";
import styles from "../styles/portal_traffic.less";
import { color } from "echarts";

const relation = {
  viewNumList: {
    name: "海外门户浏览量",
    color: "#7ECEF4",
    index: "viewNum",
  },
  visitorNumList: {
    name: "海外门户访客数",
    color: "#036EB8",
    index: "visitorNum",
  },
  viewNumCNList: {
    name: "分销门户浏览量",
    color: "#004E9D",
    index: "viewNum",
  },
  visitorNumCNList: {
    name: "分销门户访客数",
    color: "#4032A6",
    index: "visitorNum",
  },
};

const PortalTraffic = ({ data, options, current, loading, dispatch }) => {
  const onChange = (val) => {
    dispatch({
      type: "bigscreen/setPortalTrafficData",
      payload: { current: val },
    });
    dispatch({
      type: "bigscreen/load_portal_traffic",
    });
  };

  const parseTrafficData = (lineData) => {
    const legendData = [];
    let xAxisData = [];
    const seriesData = [];
    Object.keys(relation).forEach((key) => {
      if (lineData[key]) {
        legendData.push(relation[key].name);
        xAxisData = lineData[key].map((item) => item.statsTime);
        seriesData.push({
          name: relation[key].name,
          type: "line",
          smooth: false,
          showSymbol: true,
          symbolSize: 10,
          symbol: "circle",
          itemStyle: { color: relation[key].color },
          lineStyle: { width: 2 },
          data: lineData[key].map((item) => item[relation[key].index]),
        });
      }
    });

    return {
      legendData,
      xAxisData,
      seriesData,
    };
  };

  return (
    <div className={styles.traffic}>
      <div className={styles.traffic_header}>
        <PanelNav title="门户流量" />
        <div className={styles.traffic_header_conditions}>
          <RadioButtonGroup
            options={options}
            label={current}
            onChange={onChange}
          />
        </div>
      </div>
      <div className={styles.traffic_content}>
        <TrafficLineChart {...parseTrafficData(data)} />
      </div>
    </div>
  );
};

export default connect(({ bigscreen }) => ({
  data: bigscreen.portalTrafficData.data,
  options: bigscreen.portalTrafficData.options,
  current: bigscreen.portalTrafficData.current,
  loading: bigscreen.portalTrafficData.loading,
}))(PortalTraffic);