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 (
    <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)}></WordCloud>
      </div>
    </div>
  );
};

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);