import React, { Component } from "react";
import { Tabs, Button, Card, Col, Row, Modal, } from "antd";
import $ from "jquery/src/ajax";
import ShowModalDiv from "@/showModal.jsx";
import { ShowModal } from "@/tools";
import "./index.less"
import LaunchInvest from "../component/launchinvest"; // 发起投资
import InvestmentList from "../component/investmentlist"; // 投资明细
import Payment from "../component/payment"; // 发起付款

const TabPane = Tabs.TabPane;

// 资金管理
class FundManagement extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: "",
      navList: [],
      details: {},
      type: 0,
    };
    this.onCancel = this.onCancel.bind(this);
  }


  componentWillMount() {
    this.getData()
  }

  onCancel(e) {
    if (e) {
      this.getData()
    }
    this.setState({
      visible: "",
    })
  }

  getData() {
    const { type } = this.state
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/amb/getMyambDtails",
      data: {},
      success: function (data) {
        ShowModal(this);
        if (!data.data) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          }
        } else {
          this.setState({
            navList: data.data,
            details: data.data[type] || {},
          });
        }
      }.bind(this),
    }).always(
      function () {

      }.bind(this)
    );
  }

  render() {
    const { visible, navList, details } = this.state
    const gridStyle1 = {
      height: '80px',
      background: 'green',
      fontSize: '20px',
      fontWeight: 'bold',
      color: '#fff',
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center',
      textAlign: 'center',
    };
    const gridStyle2 = {
      height: '80px',
      background: 'green',
      fontSize: '20px',
      color: '#fff',
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center',
      textAlign: 'center',
    };
    const gridStyle3 = {
      height: '170px',
      background: 'rgba(255,102,0,1)',
      fontSize: '20px',
      color: '#fff',
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center',
      textAlign: 'center',
    };
    const buttonstyle = {
      fontSize: '18px',
      display: 'block',
      margin: ' 0 auto',
    }
    return (
      <div className="user-content">
        <ShowModalDiv ShowModal={this.state.showModal} onClose={() => { this.setState({ showModal: false }) }} />
        <div className="card-container">
          <Tabs type="card"
            onChange={(e) => {
              this.setState({
                type: e,
                details: navList[e]
              }, () => {
                this.getData()
              })
            }}>
            {
              navList.map((item, index) =>
                <TabPane tab={item.name} key={index}>
                </TabPane>
              )
            }
          </Tabs>
        </div>
        <Row gutter={8}>
          <Col span={3}>
            <Card style={gridStyle1}>核算单位</Card>
            <div style={{ height: 10 }}></div>
            <Card style={gridStyle2}>{details.name}</Card>
          </Col>
          <Col span={6}>
            <Card style={gridStyle2}>实收投资款(万元)<br />{details.received}</Card>
            <div style={{ height: 10 }}></div>
            <Row gutter={8}>
              <Col span={12}>
                <Card style={gridStyle2}>对外投资款(万元)<br />{details.foreign}</Card>
              </Col>
              <Col span={12}>
                <Card style={gridStyle2}>剩余投资款(万元)<br />{details.surplus}</Card>
              </Col>
            </Row>
          </Col>
          <Col span={6}>
            <Card bordered={false} style={gridStyle3}>当前资金池(万元)<br />{details.totalAmount}</Card>
          </Col>
        </Row>
        <div style={{ marginTop: 20 }}>
          <Row gutter={8}>
            <Col span={3} offset={3}>
              <Button
                type="primary"
                size="large"
                style={buttonstyle}
                onClick={() => { this.setState({ visible: "investdetails" }) }}
              >投资明细</Button>
            </Col>
            <Col span={3}>
              <Button
                type="primary"
                size="large"
                style={buttonstyle}
                onClick={() => { this.setState({ visible: "invest" }) }}
              >发起投资</Button>
            </Col>
            <Col span={3}>
              <Button
                type="primary"
                size="large"
                style={buttonstyle}
              >收支明细</Button>
            </Col>
            <Col span={3}>
              <Button
                type="primary"
                size="large"
                style={buttonstyle}
                onClick={() => { this.setState({ visible: "pay" }) }}
              >发起付款</Button>
            </Col>
          </Row>
        </div>
        {
          // 发起投资
          visible == "invest" &&
          <LaunchInvest
            myAmbId={details.id}
            visible={visible}
            onCancel={this.onCancel}
          />
        }
        {
          // 投资明细
          visible == "investdetails" &&
          <Modal
            maskClosable={false}
            visible={visible == "investdetails"}
            title="投资明细"
            footer=""
            width="70%"
            onCancel={() => { this.onCancel(false) }}
          >
            <InvestmentList
              myAmbId={details.id}
            />
          </Modal>
        }
        {
          // 发起付款
          visible == "pay" &&
          <Payment
            myAmbId={details.id}
            visible={visible}
            onCancel={this.onCancel}
          />
        }
      </div>
    );
  }
}

export default FundManagement;