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 Styles from './style.less';
import { router } from 'umi';
import Prompt from 'umi/prompt';

import ImageUpload from '../../../../components/XForm/ImageUpload'
import Wangedit from '../../../../components/Wangedit/Wangedit'
import TagGroup from './components/tags'
import Base from './components/base'
import Apartment from './components/imageSet'
import PanoramaImage from './components/panoramaImage'
import Poster from './components/poster'
import Share from './components/share'
import BuildingImage from './components/buildingImage';


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 AddBuilding(props) {

  const [tab, setTab] = useState('base')
  const [buildingData, setBuildingData] = useState({ buildingId: undefined })

  function tabsCallback(e) {
    console.log(e);
    if (!buildingData.buildingId) {
      openNotificationWithIcon('error', '请先保存基本信息')
    } else {
      setTab(e.target.value)
    }
  }

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

  return (
    <>
      <Radio.Group value={ tab } buttonStyle="solid" onChange={e => tabsCallback(e)}>
        <Radio.Button value="base">基本信息</Radio.Button>
        <Radio.Button value="apartment">户型库</Radio.Button>
        <Radio.Button value="image">项目相册</Radio.Button>
        <Radio.Button value="panorama">全景图片</Radio.Button>
        <Radio.Button value="poster">海报图片</Radio.Button>
        <Radio.Button value="share">分享设置</Radio.Button>
      </Radio.Group>
      <div style={{ marginTop: '20px' }}>
        { tab === 'base' && <Base building={{ buildingId: buildingData.buildingId || (props.location.query && props.location.query.id) }} onSuccess={e => buildingOnSuccess(e)}/> }
        { (tab === 'apartment' && <Apartment building={buildingData} />)}
        { (tab === 'image' && <BuildingImage building={buildingData} />)}
        { (tab === 'panorama' && <PanoramaImage building={buildingData} />)}
        { (tab === 'poster' && <Poster building={buildingData} />)}
        { (tab === 'share' && <Share building={buildingData} />)}
      </div>
      <Prompt message={location =>
                          location.pathname.startsWith("/building/list")
                            ? true
                            : localStorage.removeItem("pageParams")} />
    </>
    // <Tabs defaultActiveKey="1" onChange={tabsCallback}>
    //   <TabPane tab="基本信息" key="1">
    //     <Base building={{ buildingId: props.location.query && props.location.query.id }} />
    //   </TabPane>
    //   {
    //     props.location.query.id &&
    //     <TabPane tab="图片" key="2">
    //       {/* '159fd19bb973b6972c10fbebf07ddeb1' */}
    //       <ImageSet building={{ buildingId: props.location.query && props.location.query.id }} />
    //     </TabPane>
    //   }
    // </Tabs>
  )
}

const WrappedAddBuildingForm = Form.create({ name: 'addBuilding' })(AddBuilding);

export default WrappedAddBuildingForm
