import React from 'react';
import { Modal, Tabs } from 'antd';
const TabPane = Tabs.TabPane;
import Basic from './detail/basic.jsx';
import ajax from 'jquery/src/ajax/xhr.js';
import $ from 'jquery/src/ajax';
import ContactPerson from './detail/contactPerson.jsx';  //联系人
import Account from './detail/account.jsx';  //账户信息
import Visit from './detail/visit.jsx';
import Business from './detail/business.jsx';
import LockBusiness from './detail/lockBusiness.jsx';
import BasicPerson from './detail/basicPerson.jsx';//基本信息
import Outbound from '../../components/outbound';

const IntentionDetail = React.createClass({
  getInitialState() {
    return {
      modalVisible: false,
      switchState: false,
      contactData: [],
      contactState: true,
      IntentionState: false,
      businessState: false,
      visitState: false,
      accountState: false,
      basicState: false
    }
  },
  detailsModal() {
    this.setState({
      basicState: false,
      modalVisible: false,
      callnub: 1,
    });
    this.props.closeDesc(false, true);
  },
  //详情tab切换数据处理
  callback(e) {
    if (e == '1') {
      this.setState({
        IntentionState: true,
        contactState: false,
        accountState: false,
        visitState: false,
        businessState: false,
        basicState: true
      })
    }
    if (e == '2') {
      this.setState({
        IntentionState: false,
        contactState: true,
        accountState: false,
        visitState: false,
        businessState: false,
        basicState: false
      })
    }
    // if(e == '3') {
    // 	this.setState({
    // 		IntentionState:false,
    // 		contactState:false,
    // 		accountState:true,
    // 		visitState:false,
    // 		businessState:false,
    // 		basicState:false
    // 	})
    // }
    if (e == '4') {
      this.setState({
        IntentionState: false,
        contactState: false,
        accountState: false,
        visitState: true,
        businessState: false,
        basicState: false
      })
    }
    if (e == '5') {
      this.setState({
        IntentionState: false,
        contactState: false,
        accountState: false,
        visitState: false,
        businessState: true,
        basicState: false
      })
    }
    this.setState({
      callnub: e,
    })
  },
  //取消函数
  closeDetail(e, s) {
    this.setState({
      basicState: false,
      //contactState:true,
      modalVisible: e,
    })
    //		if(s){
    //			this.props.closeDesc(false,true)
    //		}
  },
  componentWillReceiveProps(nextProps) {
    if (nextProps.modalVisible && nextProps.IntentionData.id) {
      this.setState({
        modalVisible: true,
        callnub: this.props.defaultActiveKey ? String(this.props.defaultActiveKey) : (this.props.detailApi.indexOf('Organization')) > 0 ? "2" : '1',
      })
    };
    this.setState({
      basicState: nextProps.basicState,
      contactState: nextProps.contactState,
    })
  },
  render() {
    return (
      <div>
        {this.state.modalVisible ? <Modal
          className="customeDetails"
          title={
            <div
              style={{
                display: "flex",
                flexDirection: "row",
                justifyContent: "space-between",
              }}
            >
              <span>签单客户详情</span>
              <span style={{ marginRight: 100 }}>
                <Outbound
                  type="history"
                  uid={this.props.IntentionData.id}
                />
              </span>
            </div>
          }
          width="1300px"
          maskClosable={false}
          visible={this.state.modalVisible}
          onOk={this.detailsModal}
          onCancel={this.detailsModal}
          footer=""
        >
          <Tabs onChange={this.callback} activeKey={this.state.callnub}>
            {this.props.detailApi.indexOf("Organization") > 0 ? (
              ""
            ) : (
              <TabPane tab="基本信息" key="1">
                <BasicPerson
                  detailApi={this.props.detailApi}
                  closeDetail={this.closeDetail}
                  data={this.props.IntentionData}
                  IntentionState={this.state.IntentionState}
                  basicState={this.state.basicState}
                />
              </TabPane>
            )}
            <TabPane tab="企业&联系人详情" key="2">
              <ContactPerson
                closeDetail={this.closeDetail}
                name={this.props.name}
                data={this.props.IntentionData}
                contactState={this.state.contactState}
                onCancel={this.detailsModal}
              />
            </TabPane>
            {/*<TabPane tab="账户信息" key="3">*/}
            {/*  <Account*/}
            {/*    closeDetail={this.closeDetail}*/}
            {/*    data={this.props.IntentionData}*/}
            {/*    accountState={this.state.accountState}*/}
            {/*  />*/}
            {/*</TabPane>*/}
            <TabPane tab="客户跟进" key="4">
              <Visit
                categoryArr={this.props.categoryArr}
                loadData={this.props.loadData}
                closeDetail={this.closeDetail}
                data={this.props.IntentionData}
                visitState={this.state.visitState}
              />
            </TabPane>
            <TabPane tab="业务意向" key="5">
              <Business
                closeDesc={this.props.closeDesc}
                closeDetail={this.closeDetail}
                data={this.props.IntentionData}
                businessState={this.state.businessState}
              />
            </TabPane>
            <TabPane tab="锁定业务" key="6">
              {
                this.state.callnub === '6' ?
                  <LockBusiness uid={this.props.IntentionData && this.props.IntentionData.uid} id={this.props.IntentionData && this.props.IntentionData.id} /> :
                  <div />
              }
            </TabPane>
            {/*
							<TabPane tab="业务订单" key="6">

							</TabPane>
							<TabPane tab="技术需求" key="7">

							</TabPane>
							<TabPane tab="技术成果" key="8">

							</TabPane>
							<TabPane tab="技术专家" key="9">

							</TabPane>
							*/}
          </Tabs>
        </Modal> : <div />}
      </div>
    );
  }
})
export default IntentionDetail;
