import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Icon, Select, message, Table, Divider, Tag, Pagination, Modal, DatePicker, Radio, Upload, InputNumber } from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale';
import XForm, { FieldTypes } from '../../../../components/XForm';
import router from 'umi/router';
import moment from 'moment';
import styles from '../../../style/GoodsList.less';
import SelectCity from '../../../../components/SelectButton/CitySelect'
import BuildSelect2 from '../../../../components/SelectButton/BuildSelect2'
import LivePlatSelect from '../../../../components/SelectButton/LivePlatSelect'
import CitySelect3 from '../../../../components/SelectButton/CitySelect3'
import ImageUpload from '../../../../components/XForm/ImageUpload'
import Wangedit from '../../../../components/Wangedit/Wangedit'
import Navigate from '@/components/Navigate';
import apis from '../../../../services/apis';
import request from '../../../../utils/request';
import AuthButton from '@/components/AuthButton';
import Prompt from 'umi/prompt';

const { Option } = Select;
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;

let cityId = ''

const header = props => {
  const { salesBatchId } = props.location.query
  console.log(salesBatchId)
  const [ saleBatchData, setSaleBatchData ] = useState({})
  const [showHelp, setShowHelp] = useState(false)

  const cancelPage = () =>{
    router.push({
      pathname: '/activity/liveActivity/list',
    });
  }

   //打开新页面
   const openIndexImg = () => {
    const newWin=window.open('about:blank');
    newWin.location.href="http://njcj.oss-cn-shanghai.aliyuncs.com/%E6%95%99%E7%A8%8B.png"
  }

  function highlightsTypeChange(e) {
    console.log(e.target.value,"ee")
    setTypeState(e.target.value)
  }

  function disabledDate(current) {
    // Can not select days before today and today
    return current && current < moment().endOf('day');
  }

  function handleSubmit (e) {
    e.preventDefault();
    props.form.validateFields((err, values) => {
      if (!err){
        let {liveTime, ...submitValue} = values
        submitValue.liveStartDate = moment(submitValue.liveStartDate._d).format('YYYY-MM-DD HH:mm:ss')
        submitValue.liveEndDate = moment(submitValue.liveEndDate._d).format('YYYY-MM-DD HH:mm:ss')
        
        if (values.liveStartDate > values.liveEndDate){
          message.info("直播结束时间大于开始时间")
          return;
        }

        request({ ...apis.taliveActivity.addTaLiveActivity, data: { ...submitValue },}).then((data) => {
          message.info("保存成功")
          console.log(data,"datattttttt")
          router.push({
            pathname: '/activity/liveActivity/list/index',
          });
        }).catch((err) => {
          message.info(err.msg || err.message)
        })
      }
    });
  }

  const { getFieldDecorator } = props.form;

  return (
    <>
      <Form labelCol={{ span: 7 }} wrapperCol={{ span: 12 }} onSubmit={handleSubmit}>
        <Form.Item label="所属城市">
          {getFieldDecorator('cityId', {
            rules: [{ required: true, message: ' 请输入所属城市' }],
          })(<CitySelect3 buildingId={props.form.getFieldValue('buildingId')}/>)}
        </Form.Item>
        <Form.Item label="所属楼盘">
          {getFieldDecorator('buildingId')(<BuildSelect2 cityId={props.form.getFieldValue('cityId')}/>)}
        </Form.Item>
        <Form.Item label="直播活动标题">
          {getFieldDecorator('liveActivityTitle', {
            rules: [{ required: true, message: '请输入直播活动标题' }],
          })(<Input maxLength={20} placeholder="给直播活动起个名字" />)}
        </Form.Item>
        <Form.Item label="直播开始时间">
          {getFieldDecorator('liveStartDate', {
                rules: [
                  {
                    required: true,
                    message: '请选择直播开始时间',
                  },
                ],
              })(<DatePicker placeholder="预计开始时间"style={{ width: '500px' }}format="YYYY-MM-DD HH:mm:ss" showTime={{ format: 'HH:mm:ss' }}/>)}
        </Form.Item>
        <Form.Item label="直播结束时间">
          {getFieldDecorator('liveEndDate', {
                rules: [
                  {
                    required: true,
                    message: '请选择直播结束时间',
                  },
                ],
              })(<DatePicker placeholder="预计结束时间" disabledDate={disabledDate} style={{ width: '500px' }}format="YYYY-MM-DD HH:mm:ss" showTime={{ format: 'HH:mm:ss' }}/>)}
        </Form.Item>
        <Form.Item label="直播小程序">
          {getFieldDecorator('liveApp', {
              rules: [{ required: true, message: '请选择直播小程序' }],
            })((<LivePlatSelect />))}
        </Form.Item>
        <Form.Item label="房间参数">
          {getFieldDecorator('liveRoomParam', {
            rules: [{ required: true, message: '请输入房间参数' }],
          })(<Input maxLength={1000} placeholder="点击右侧按钮查看如何获取房间参数" style={{width:'680px'}}/>)}<Navigate onClick={openIndexImg}>不知道怎么填？查看说明</Navigate>
        </Form.Item>
        <Form.Item label="封面图1" help="建议尺寸：750px*420px，比例16:9，格式：jpg，用于：活动列表">
              {getFieldDecorator('listImg', {
                  rules: [{ required: true, message: '请上传封面图1' }],
              })(
                <ImageUpload />,
              )}
        </Form.Item>  
        <Form.Item label="封面图2" help="建议尺寸：750*250px，比例3:1，格式：jpg，用于：项目详情页">
              {getFieldDecorator('detailImg', {
                  rules: [{ required: true, message: '请上传封面图2' }],
              })(
                <ImageUpload />,
              )}
        </Form.Item>  
        <Form.Item label="详情图" help="格式：jpg，用于：直播活动详情页，点击可跳转到直播间">
              {getFieldDecorator('detailTypeImg', {
                  rules: [{ required: true, message: '请上传详情图' }],
              })(
                <ImageUpload />,
              )}
        </Form.Item>      
        <Form.Item label="权重">
              {getFieldDecorator('weight', {
                  rules: [{ required: true, message: '请设置权重' }],
              })(
                <InputNumber placeholder="权重越大越靠前" style={{width:'150px'}}/>
              )}
        </Form.Item>
        <Form.Item label="发布状态">
          {getFieldDecorator('status', {
              rules: [{ required: true, message: '请选择发布状态' }],
            })(<Select placeholder="发布状态" style={{ width: '300px' }}>
            <Option value="0">否</Option>
            <Option value="1">是</Option>
          </Select>)}
        </Form.Item>
        <Form.Item wrapperCol={{ span: 15, offset: 7 }}>
          <Button type="primary" htmlType="submit"style={{marginRight:'20px'}}>
            确定
          </Button>
          <Button onClick={() => router.go(-1)}>
            取消
          </Button>
        </Form.Item>
      </Form>
      <Prompt message={location =>
        location.pathname.startsWith("/activity/liveActivity")
          ? true
          : localStorage.removeItem("liveActivePageParams")} />
    </>
  )
}

const WrappedHeader = Form.create({ name: 'header' })(header);

export default WrappedHeader
