import React from 'react';
import ExtendsComponent from '../../../components/ExtendsComponent';
import CurrentSettlementTable from './components/current-settle';
import ReturnSettlementTable from './components/return-settle';
import HistorySettlementTable from './components/history-settle';
import { Tabs, Card, Row, Col, Button, message } from 'antd';
import { enumFactory } from '../../enums/common_enums';
import req_url from '../../config/req_url';
import { get, post } from '../../../utils/request';
import './styles.less';

const TABS_ENUM = enumFactory([
  { key: 'CURRENT_SETTLE', label: '当前结算' },
  { key: 'HISTORY_SETTLE', label: '历史结算' },
]);

class SettleDetail extends ExtendsComponent {
  constructor(props) {
    super(props);

    this.supplier_id = props.match ? props.match.params.id : -1;
    this.state = {
      mode: TABS_ENUM.CURRENT_SETTLE,
      settlementInfo: {},
    };
  }

  componentDidMount() {
    this.getSettleInfo();
  }

  getSettleInfo = () => {
    get(req_url.settlement.settle_detail.settle_info, {
      supplier_id: this.supplier_id,
    }).then(resp => {
      if (resp.code === 200) {
        const { data: settlementInfo } = resp;
        this.setState({
          settlementInfo,
        });
      }
    });
  };

  render() {
    const { mode, settlementInfo = {} } = this.state;
    // console.log('mode', {mode, TABS_ENUM});
    return (
        <div className={"settle-detail"}>
          <Tabs
            animated={false}
            activeKey={mode + ''}
            onChange={value => {
              this.setState({
                mode: parseInt(value),
              });
            }}
          >
            {TABS_ENUM.OPTIONS.filter(item => item.value !== TABS_ENUM.ALL).map(item => {
              const { label, value } = item;
              return <Tabs.TabPane key={value + ''} tab={label} />;
            })}
          </Tabs>
          {mode === TABS_ENUM.CURRENT_SETTLE ? (
            <>
              <Card type="inner" title="订单概况">
                <CurrentSettlementTable supplier_id={this.supplier_id} />
              </Card>
              <Card type="inner" title="退货商品">
                <ReturnSettlementTable supplier_id={this.supplier_id} />
              </Card>
              <Card type="inner" title="结算概况">
                <Row>
                  <Col span={6}>供应商名称:{settlementInfo.supplier_name}</Col>
                  <Col span={6}>上月订单数量(有效): {settlementInfo.order_count}</Col>
                  <Col span={6}>上月订单金额(有效): {settlementInfo.actual_price}</Col>
                  <Col span={6}>上月订单成本(有效): {settlementInfo.price_cost}</Col>
                </Row>
              </Card>
              <div className={"align-center"}>
                {/* <Button type="primary" onClick={() => {}}>
                  导出结算单
                </Button> */}
                <Button
                  type="primary"
                  onClick={() => {
                    post(req_url.settlement.settle_detail.edit_settle, {
                      supplier_id: this.supplier_id,
                    }).then(resp => {
                      if (resp.code === 200) {
                        message.success('操作成功');
                        this.setState({
                          mode: TABS_ENUM.HISTORY_SETTLE,
                        });
                      }
                    });
                  }}
                >
                  结算完成
                </Button>
              </div>
            </>
          ) : (
            <HistorySettlementTable supplier_id={this.supplier_id} />
          )}
        </div>
    );
  }
}

export default SettleDetail;