import React from "react";
import { Spin } from "antd";
import { connect } from "dva";
import RadioButtonGroup from "./RadioButtonGroup";
import WordCloud from "@/components/WordCloud";
import styles from "../styles/common.less";
import PanelNav from "./PanelNav";

const SearchRankCloud = ({
  data,
  options,
  current,
  loading,
  currentSite,
  dispatch,
}) => {
  const onChange = (val) => {
    dispatch({
      type: "bigscreen/setSearchRankData",
      payload: { current: val },
    });
    dispatch({
      type: "bigscreen/load_search_rank",
    });
  };

  const title = currentSite === "1" ? "海外" : "分销商";

  const parseData = (keywords) => {
    return keywords.map((item) => decodeURIComponent(item));
  };

  return (
    <Spin spinning={loading}>
      <div className={styles.common}>
        <div className={styles.common_header}>
          <PanelNav title={title + "门户搜索关键词排行"} />
          <div className={styles.common_header_conditions}>
            <RadioButtonGroup
              options={options}
              label={current}
              onChange={onChange}
            />
          </div>
        </div>
        <div className={styles.common_content}>
          <WordCloud data={parseData(data)} />
        </div>
      </div>
    </Spin>
  );
};

export default connect(({ bigscreen, global }) => ({
  data: bigscreen.searchRankData.data,
  options: bigscreen.searchRankData.options,
  current: bigscreen.searchRankData.current,
  loading: bigscreen.searchRankData.loading,
  currentSite: global.currentSite,
}))(SearchRankCloud);
