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 HouseTab from './components/houseTab'
import Poster from './components/poster'
import Share from './components/share'
import ShareRecord from './components/shareRecord'
import VisitRecord from './components/visitRecord'


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 {salesBatchId} = props.location.query.id;
  console.log(props.location.query.id)
  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.salesBatchId || (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="house">房源信息</Radio.Button>
        <Radio.Button value="poster">海报设置</Radio.Button>
        <Radio.Button value="share">分享设置</Radio.Button>
        {/* <Radio.Button value="preselectionImg">预选热度图</Radio.Button> */}
        {/* <Radio.Button value="preselectionRecord">预选记录</Radio.Button> */}
        {/* <Radio.Button value="identifyingChips">认筹单</Radio.Button> */}
        {/* <Radio.Button value="pay">缴费单</Radio.Button> */}
        {/* <Radio.Button value="refund">退费单</Radio.Button> */}
        <Radio.Button value="shareRecord">分享记录</Radio.Button>
        <Radio.Button value="visitRecord">分享访问记录</Radio.Button>
      </Radio.Group>
      <div style={{ marginTop: '20px' }}>
        { (tab === 'base' && <Base salesBatchId={{ batchId }} onSuccess={e => buildingOnSuccess(e)}/>)} 
        { (tab === 'house' && <HouseTab salesBatchId={props.location.query.id} buildingId={props.location.query.buildingId} onSuccess={e => housTabChange(e)}/>)}
        { (tab === 'poster' && <Poster salesBatchId={{ batchId }}/>)}
        { (tab === 'share' && <Share salesBatchId={{ batchId }}/>)}
        { (tab === 'preselectionImg' && <PreselectionImg salesBatchId={batchId} />)}
        { (tab === 'preselectionRecord' && <PreselectionRecord houseId={houseId} buildingId={props.location.query.buildingId} salesBatchId={{ batchId }}/>)}
        { (tab === 'identifyingChips' && <IdentifyingChips houseId={houseId} buildingId={props.location.query.buildingId} salesBatchId={{ batchId }}/>)}
        { (tab === 'pay' && <PaymentChips salesBatchId={{ batchId }}/>)}
        { (tab === 'refund' && <Refund salesBatchId={{ batchId }}/>)}
        { (tab === 'shareRecord' && <ShareRecord salesBatchId={{ batchId }}/>)}
        { (tab === 'visitRecord' && <VisitRecord salesBatchId={{ batchId }}/>)}
      </div>
    </>
  )
}

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

export default WrappedEditHouseForm
