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 Poster from './components/poster'
import Share from './components/share'
import ShareRecord from './components/shareRecord'
import VisitRecord from './components/visitRecord'
import Prompt from 'umi/prompt';


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 {liveActivityId} = props.location.query.id;
  console.log(props.location.query.id)
  const [tab, setTab] = useState('base')
  const [liveActivity, setLiveActivity] = useState({ liveActivityId: 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 liveId = liveActivity.liveActivityId || (props.location.query && props.location.query.id)
  console.log(liveId)
  return (
    <>
      <Radio.Group value={ tab } buttonStyle="solid" onChange={e => tabsCallback(e)}>
        <Radio.Button value="base">基本信息</Radio.Button>
        <Radio.Button value="poster">海报设置</Radio.Button>
        <Radio.Button value="share">分享设置</Radio.Button>
        <Radio.Button value="shareRecord">分享记录</Radio.Button>
        <Radio.Button value="visitRecord">分享访问记录</Radio.Button>
      </Radio.Group>
      <div style={{ marginTop: '20px' }}>
        { (tab === 'base' && <Base liveActivityId={{ liveId }} onSuccess={e => buildingOnSuccess(e)}/>)} 
        { (tab === 'poster' && <Poster liveActivityId={{ liveId }}/>)}
        { (tab === 'share' && <Share liveActivityId={{ liveId }}/>)}
        { (tab === 'shareRecord' && <ShareRecord liveActivityId={{ liveId }}/>)}
        { (tab === 'visitRecord' && <VisitRecord liveActivityId={{ liveId }}/>)}
      </div>
      <Prompt message={location =>
        location.pathname.startsWith("/activity/liveActivity")
          ? true
          : localStorage.removeItem("liveActivePageParams")} />
    </>
  )
}

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

export default WrappedEditHouseForm
