/*
 * Author: 黎永顺
 * name: 导入-步骤二
 * Description:
 * Date: 2023/9/5
 */
import React, { Component } from "react";
import { WeaLocaleProvider, WeaTable } from "ecCom";
import { postFetch } from "../../../util/request";

const { getLabel } = WeaLocaleProvider;

class ImpStep2 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false, columns: [], dataSource: []
    };
  }

  componentDidMount() {
    this.init();
  }

  init = () => {
    const { previewUrl, imageId, extraPreview = {} } = this.props;
    const payload = { imageId, ...extraPreview };
    this.setState({ loading: true });
    postFetch(previewUrl, payload).then(({ status, data }) => {
      this.setState({ loading: false });
      if (status) {
        const { headers, list } = data;
        this.setState({
          columns: _.map(headers, (item, index) => ({ title: item, dataIndex: index + "", width: 120 })),
          dataSource: _.map(list, item => {
            return _.reduce(item, (pre, cur, key) => (_.assign(pre, { [key]: cur })), {});
          })
        });
      }
    }).catch(() => this.setState({ loading: false }));
  };

  render() {
    const { dataSource, columns, loading } = this.state;
    const { scrollHeight } = this.props;
    const pagination = {
      showTotal: total => `${getLabel(111, "共")} ${total} ${getLabel(111, "条")}`,
      total: dataSource.length,
      showSizeChanger: true
    };
    return (
      <WeaTable
        dataSource={dataSource} columns={columns} loading={loading} scroll={{ x: 800, y: `${scrollHeight}px` }}
        pagination={pagination}
      />
    );
  }
}

export default ImpStep2;
