/*
 * Author: 黎永顺
 * name: 报表查看-左侧tab标题
 * Description:
 * Date: 2023/4/20
 */
import React, { Component } from "react";
import { WeaInputSearch, WeaLocaleProvider } from "ecCom";
import { reportStatisticsReportList } from "../../../apis/statistics";
import { Menu } from "antd";
import { getQueryString } from "../../../util/url";
import "../index.less";


const { getLabel } = WeaLocaleProvider;

class LeftTab extends Component {
  constructor(props) {
    super(props);
    this.state = {
      reportName: "",
      selectedKeys: getQueryString("id").split(","),
      reportList: []
    };
  }

  componentDidMount() {
    this.reportStatisticsReportList();
  }

  reportStatisticsReportList = () => {
    const { reportName, selectedKeys } = this.state;
    const { onChangeTab } = this.props;
    reportStatisticsReportList({ reportName }).then(({ status, data: reportList }) => {
      if (status) this.setState({ reportList }, () => {
        onChangeTab(_.find(this.state.reportList, it => it.id === selectedKeys[0]));
      });
    });
  };
  updateReportList = (report) => {
    const { reportList } = this.state;
    this.setState({
      reportList: _.reduce(reportList, (pre, cur) => {
        if (report.id === cur.id) {
          return [...pre, report];
        }
        return [...pre, cur];
      }, [])
    });
  };

  render() {
    const { reportName, selectedKeys, reportList } = this.state;
    const { onChangeTab } = this.props;
    return (
      <div className="leftTabWrapper">
        <div className="searchArea">
          <WeaInputSearch
            value={reportName} onChange={reportName => this.setState({ reportName })}
            placeholder={getLabel(111, "请输入报表名称")} onSearch={this.reportStatisticsReportList}
          />
        </div>
        <Menu
          mode="inline" selectedKeys={selectedKeys}
          onClick={({ key }) => {
            this.setState({ selectedKeys: key.split(",") }, () => {
              onChangeTab(_.find(reportList, it => it.id === key));
            });
          }}
        >
          {
            _.map(reportList, item => {
              const { reportName, id } = item;
              return <Menu.Item key={id}>{reportName}</Menu.Item>;
            })
          }
        </Menu>
      </div>
    );
  }
}

export default LeftTab;