/*
 * Author: 黎永顺
 * name: 日志查看-详情
 * Description:
 * Date: 2024/1/25
 */
import React, { Component } from "react";
import { WeaDialog, WeaLocaleProvider, WeaTransfer } from "ecCom";
import * as API from "../../../../apis";

const getLabel = WeaLocaleProvider.getLabel;
const WeaTransferList = WeaTransfer.list;

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

  componentWillReceiveProps(nextProps, nextContext) {
    if (nextProps.visible !== this.props.visible && nextProps.visible) this.getDetailChanges(nextProps);
    if (nextProps.visible !== this.props.visible && !nextProps.visible) this.setState({
      dataSource: [],
      loading: false
    });
  }

  getDetailChanges = (props) => {
    const { mainid, logFunction } = props;
    const payload = { function: logFunction, mainid };
    this.setState({ loading: true });
    API.getDetailChanges(payload).then(({ status, data }) => {
      this.setState({ loading: false });
      if (status) {
        this.setState({
          dataSource: _.map(data, (o, i) => ({
            ...o, index: i + 1,
            valueschanges: _.map(o.valueschanges, (g, gi) => ({ id: gi + 1, name: g }))
          }))
        });
      }
    }).catch(() => this.setState({ loading: false }));
  };

  render() {
    const { dataSource } = this.state;
    const scrollHeight = this.logDetailRef ? this.logDetailRef.state.height - 32 : 606.6;
    return (
      <WeaDialog
        {...this.props} hasScroll className="logDialog" initLoadCss ref={dom => this.logDetailRef = dom}
        style={{
          width: 750,
          height: 606.6,
          minHeight: 200,
          minWidth: 380,
          maxHeight: "90%",
          maxWidth: "90%",
          overflow: "hidden",
          transform: "translate(0px, 0px)"
        }}
      >
        <div className="logDialogContent">
          {
            _.map(dataSource, item => (!_.isEmpty(item.valueschanges) ? <WeaTransferList
              data={item.valueschanges} renderItem={(it) => (<div className="detailBox">
              <div className="order">{it.id}</div>
              <div className="content" title={it.name}>{it.name}</div>
            </div>)}
              height={scrollHeight} checkedCb={() => ({})} checkedKeys={[]}
            /> : <div className="empty">{getLabel(111, "无数据变更记录")}</div>))
          }
        </div>
      </WeaDialog>
    );
  }
}

export default Index;
