import React, { useState, useEffect } from 'react';
import { Input, Menu, Dropdown, Button, Icon, message, Table, Divider, Tag, Select, Form, Alert, Radio } from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale';
import XForm, { FieldTypes } from '../../../components/XForm';
import router from 'umi/router';
import apis from '../../../services/apis';
import request from '../../../utils/request';
import Wangedit from '../../../components/Wangedit/Wangedit'
import ImageUpload from '../../../components/XForm/ImageUpload'
import SelectContact from './components/SelectContact';
import moment from 'moment';

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 2 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};

const header = props => {
    const sampleId = props.location.query.id
  
    const [ data, setData ] = useState({})
    const [typeState, setTypeState] = useState("rich")

    if(sampleId){
      useEffect(() => {
        getH5Data(sampleId);
      },[])
  
    // 查询列表
    const getH5Data = (sampleId) => {
      request({
          ...apis.sample.get,
          urlData: { id: sampleId }
      }).then((data) => {
        setData(data)
      }).catch((err) => {
        message.error(err.msg || err.message)
      })
    }
    }
     
    const handleSubmit = (e) => {
      e.preventDefault();
      // e.stopPropagation();
      props.form.validateFieldsAndScroll((err, values) => {
        console.log(values,"valuesvaluesvaluesvaluesvaluesvaluesvalues")
        debugger
        if (!err) {
          console.log(values,"h5Sample/addh5Sample/add")
          if(sampleId){
            request({ ...apis.sample.update, urlData: { id: sampleId }, data: { ...values }}).then((data) => {
              cancelPage();
            }).catch((err) => {
              message.error(err.msg || err.message)
            })
          }else{
            request({ ...apis.sample.addh5, data: { ...values }}).then((data) => {
              cancelPage();
            }).catch((err) => {
              message.error(err.msg || err.message)
            })
          }
        }
      });
      
    }
  
    const cancelPage = () => {
      router.push({
        pathname: '/sample/h5/list',
      });
    }

    function sampleTypeChange(e) {
      setTypeState(e.target.value)
    }
  
    const { getFieldDecorator } = props.form;
    return (
      <Form {...formItemLayout} onSubmit={handleSubmit}>
            
          <Form.Item label="样例名" >
            {getFieldDecorator('sampleName',{
              rules: [{ required: true, message: '请输入样例名' },
              { max: 20, message: '样例名不超过20个字符' }],
            })(<Input placeholder="H5活动主题或目的，如植树节引流活动"/>)}
          </Form.Item>
          <Form.Item label="样例体验链接" >
            {getFieldDecorator('sampleTryLink',{
              rules: [{ max: 300, message: '样例体验链接不超过300个字符' }],
            })(<Input placeholder="若样例暂未发布到小程序，可直接粘贴网页链接"/>)}
          </Form.Item>
          <Form.Item label="样例体验二维码/小程序码" >
            {getFieldDecorator('sampleTryCode')(
              <ImageUpload />,
            )}
          </Form.Item>
          <Form.Item label="封面图" help="建议尺寸：495*330px，比例：3:2，格式：jpg，大小：不超过300KB，用于样例列表封面">
            {getFieldDecorator('coverImg', {
              rules: [{ required: true, message: '请选择列表图' }],
            })(
              <ImageUpload />,
            )}
          </Form.Item>
          <Form.Item label="方案/报价/技术联系人" >
            {getFieldDecorator('taContactList',{
              trigger: 'onSelected'
            })(<SelectContact />)}
          </Form.Item>
          <Form.Item label="发布状态" >
            {getFieldDecorator('status', {
              initialValue: "1",
            })(
            <Select style={{ width: '180px' }}>
              <Select.Option value="1">是</Select.Option>
              <Select.Option value="0">否</Select.Option>
            </Select>)}
          </Form.Item>
          <Form.Item label="权重" help="数值越大越靠前">
            {getFieldDecorator('orderNo')(<Input />)}
          </Form.Item>
          <Form.Item label="标签" help="标签长度6个字，最多3个标签">
            {getFieldDecorator('tags')(
              <Select mode="tags" placeholder="输入后选中" style={{ width: '1016px' }}>

              </Select>,
            )}
          </Form.Item>
          <Form.Item label="样例类型">
            {getFieldDecorator('sampleType',{
              initialValue: "rich",
            })(
            <Radio.Group onChange={e => sampleTypeChange(e)}>
              <Radio value="rich">富文本</Radio>
              <Radio value="link">外部链接</Radio>
            </Radio.Group>,
            )}
          </Form.Item>
          {typeState === 'link' && <Form.Item label="外部链接">
            {getFieldDecorator('sampleContentLink',{
              rules: [{ max: 300, message: '外部链接不超过300个字符' }],
            })(<Input placeholder="填写外部链接，如公众号链接或135编辑器生成的页面链接" />)}
          </Form.Item>}
          {typeState === 'rich' && <Form.Item label="样例内容" >
            {getFieldDecorator('sampleContent')(
              <Wangedit />,
            )}
          </Form.Item> }
          <Form.Item style={{ width: '400px', margin: 'auto', display: 'flex', justifyContent: 'space-between' }}>
            <Button type="primary" htmlType="submit">
                确定
            </Button>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <Button onClick={() => router.go(-1)}>
                取消
            </Button>
          </Form.Item>
        </Form>
    )
  }
  
  const WrappedNormalLoginForm = Form.create({ name: 'header' })(header);
  export default WrappedNormalLoginForm