import React, { useState, useEffect } from 'react';
import { Form, Icon, Input, Button, DatePicker, Select, Card, Row, Col, Pagination, Alert, Radio, Tag, Tooltip, Tabs, notification } from 'antd';
import moment from 'moment';
import request from '../../../../utils/request';
import apis from '../../../../services/apis';
import { router } from 'umi';

import Base from './components/base'
import IdentifyingChips from './components/IdentifyingChips'
import PaymentChips from './components/PaymentChips'
import Refund from './components/Refund'
import RaiseHouse from './components/RaiseHouse'
import PreselectionImg from './components/preselectionImg'



const { Option } = Select
const { TabPane } = Tabs;

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 2 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};

function openNotificationWithIcon(type, message) {
  notification[type]({
    message,
    description:
      '',
  });
}

function EditHouse(props) {
  const [tab, setTab] = useState('base')
  const [raiseData, setRaiseData] = useState({ raiseId: undefined })
  const [houseId, setHouseId] = useState('')
  const salesBatchId = props.location.query.salesBatchId;
  function tabsCallback(e) {
    setTab(e.target.value)
  }

  // building 回调
  function buildingOnSuccess(e) {
    setBuildingData(e)
  }

  function housTabChange(e) {
    setHouseId(e.houseId)
    setTab('identifyingChips')
  }

  const raiseId = raiseData.raiseId || (props.location.query && props.location.query.id)

  return (
    <>
      <Radio.Group value={ tab } buttonStyle="solid" onChange={e => tabsCallback(e)}>
        <Radio.Button value="base">认筹设置</Radio.Button>
        <Radio.Button value="raiseHouse">房源认筹情况</Radio.Button> 
        <Radio.Button value="raiseImg">认筹热度图</Radio.Button>
        <Radio.Button value="identifyingChips">认筹单</Radio.Button>
        <Radio.Button value="pay">缴费单</Radio.Button>
        <Radio.Button value="refund">退费单</Radio.Button>
      </Radio.Group>
      <div style={{ marginTop: '20px' }}>
        { (tab === 'base' && <Base raiseId={{ raiseId }} salesBatchId={props.location.query.salesBatchId} onSuccess={e => buildingOnSuccess(e)}/>)} 
        { (tab === 'raiseHouse' && <RaiseHouse raiseId={{ raiseId }} salesBatchId={props.location.query.salesBatchId} buildingId={props.location.query.buildingId}  onSuccess={e => housTabChange(e)}/>)}
        { (tab === 'raiseImg' && <PreselectionImg raiseId={raiseId} salesBatchId={salesBatchId}/>)}
        { (tab === 'identifyingChips' && <IdentifyingChips houseId={houseId} buildingId={props.location.query.buildingId} raiseId={{ raiseId }} salesBatchId={salesBatchId}/>)}
        { (tab === 'pay' && <PaymentChips raiseId={{ raiseId }} type={"paid"}/>)}
        { (tab === 'refund' && <Refund raiseId={{ raiseId }} type={"refunded"}/>)}
      </div>
    </>
  )
}

const WrappedEditHouseForm = Form.create({ name: 'editHouse' })(EditHouse);

export default WrappedEditHouseForm
