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 PreselectionHouse from './components/preselectionHouse'
import PreselectionImg from './components/preselectionImg'
import PreselectionRecord from './components/preselectionRecord'


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 preselectionId = props.location.query.id;
  const salesBatchId = props.location.query.salesBatchId;
  const [tab, setTab] = useState('base')
  const [salesBatchData, setSalesBatchData] = useState({ salesBatchId: undefined })
  const [houseId, setHouseId] = useState('')

  function tabsCallback(e) {
    setTab(e.target.value)
  }

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

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

  const batchId = salesBatchData.preselectionId || (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="preselectionHouse">房源预选情况</Radio.Button>
        <Radio.Button value="preselectionImg">预选热度图</Radio.Button>
        <Radio.Button value="preselectionRecord">预选记录</Radio.Button>
      </Radio.Group>
      <div style={{ marginTop: '20px' }}>
        { (tab === 'base' && <Base preselectionId={{ preselectionId }} onSuccess={e => buildingOnSuccess(e)}/>)} 
        { (tab === 'preselectionHouse' && <PreselectionHouse preselectionId={{ preselectionId }} buildingId={props.location.query.buildingId} salesBatchId ={salesBatchId} onSuccess={e => housTabChange(e)}/>)}
        { (tab === 'preselectionImg' && <PreselectionImg preselectionId={preselectionId} salesBatchId ={salesBatchId}/>)}
        { (tab === 'preselectionRecord' && <PreselectionRecord salesBatchId ={salesBatchId} buildingId={props.location.query.buildingId}/>)}
      </div>
    </>
  )
}

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

export default WrappedEditHouseForm
