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

const StoreTraffic = ({
  data,
  options,
  current,
  loading,
  currentSite,
  dispatch,
}) => {
  const onChange = (val) => {
    dispatch({
      type: "bigscreen/setStoreTrafficData",
      payload: { current: val },
    });
    dispatch({
      type: "bigscreen/load_store_traffic",
    });
  };

  const title = currentSite === "1" ? "海外" : "分销商";
  //   const parseData = (keywords) => {
  //     return keywords.map(item => decodeURIComponent(item))
  //   }
  const columns = [
    {
      title: "排名",
      dataIndex: "categoryId",
      align: "center",
      //   width: 55,
      render: (text, record, index) => {
        return index + 1;
      },
    },
    {
      title: "店铺名称",
      dataIndex: "storeName",
      align: "center",
      width: 426,
      ellipsis: true,
    },
    {
      title: "浏览量",
      dataIndex: "viewNum",
      align: "center",
      //   width: 55,
    },
    {
      title: "访客数",
      dataIndex: "visitorNum",
      align: "center",
      //   width: 55,
    },
  ];

  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}>
        <TableChart data={data} columns={columns} />
      </div>
    </div>
  );
};

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