antd#TimePicker JavaScript Examples

Demo = () => {
  const [value, setValue] = useState(null);

  const onChange = time => {
    setValue(time);
  };

  return <TimePicker value={value} onChange={onChange} />;
}

render() {
    return (
      <div>
        <h5 className="mb-3">
          <strong>Basic</strong>
        </h5>
        <div className="mb-5">
          <TimePicker onChange={onChange} defaultOpenValue={moment('00:00:00', 'HH:mm:ss')} />
        </div>
      </div>
    )
  }

render() {
    return (
      <TimePicker
        open={this.state.open}
        onOpenChange={this.handleOpenChange}
        renderExtraFooter={() => (
          <Button size="small" type="primary" onClick={this.handleClose}>
            Ok
          </Button>
        )}
      />
    );
  }

AdminTimetable = ({ setPopup, track, setTrack, speech, setSpeech, setStart, setEnd, handleTimetable }) => {
  return (
    <div className="admin-timetable">
      <div className="admin-timetable-area" onClick={() => setPopup(false)} />
      <div className="admin-timetable-box">
        <div className="admin-timetable-box-form">
          <span>Track Name</span>
          <input type="text" autoFocus value={track} onChange={(e) => setTrack(e.target.value)} />
        </div>
        <div className="admin-timetable-box-form">
          <span>Speech</span>
          <input type="text" value={speech} onChange={(e) => setSpeech(e.target.value)} />
        </div>
        <div className="admin-timetable-box-form">
          <span>Start Time</span>
          <TimePicker defaultValue={moment(new Date(), format)} format={format} onChange={(moment, val) => setStart(val)} />
        </div>
        <div className="admin-timetable-box-form">
          <span>End Time</span>
          <TimePicker defaultValue={moment(new Date(), format)} format={format} onChange={(moment, val) => setEnd(val)} />
        </div>
        <div className="admin-timetable-box-btn">
          <button onClick={() => setPopup(false)}>취소</button>
          <button onClick={() => handleTimetable()}>저장</button>
        </div>
      </div>
    </div>
  )
}

storiesOf('antd/time-picker', module).add('disabled', () => <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} disabled />, { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>A disabled state of the <code>TimePicker</code>.</p></>) } });

storiesOf('antd/time-picker', module).add('colored-popup', () => 
  <TimePicker
    onChange={onChange}
    defaultOpenValue={moment('00:00:00', 'HH:mm:ss')}
    popupClassName="myCustomClassName"
  />,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Passing custom class to <code>TimePicker</code> popup</p></>) } });

storiesOf('antd/time-picker', module).add('bordered', () => 
  <>
    <TimePicker bordered={false} />
    <RangePicker bordered={false} />
  </>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Bordered-less style component.</p></>) } });

{ RangePicker } = TimePicker

storiesOf('antd/time-picker', module).add('basic', () => 
  <TimePicker onChange={onChange} defaultOpenValue={moment('00:00:00', 'HH:mm:ss')} />,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Click <code>TimePicker</code>, and then we could select or input a time in panel.</p></>) } });

storiesOf('antd/time-picker', module).add('12hours', () => 
  <>
    <TimePicker use12Hours onChange={onChange} />
    <TimePicker use12Hours format="h:mm:ss A" onChange={onChange} style={{ width: 140 }} />
    <TimePicker use12Hours format="h:mm a" onChange={onChange} />
  </>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>TimePicker of 12 hours format, with default format <code>h:mm:ss a</code>.</p></>) } });

storiesOf('antd/Input', module).add('align', () => 
  <>
    <Mentions style={{ width: 100 }} rows={1} />
    <Input.TextArea rows={1} style={{ width: 100 }} />
    <Button type="primary">Button</Button>
    <Input style={{ width: 100 }} />
    <Text copyable>Ant Design</Text>
    <Input prefix="1" suffix="2" style={{ width: 100 }} />
    <Input addonBefore="1" addonAfter="2" style={{ width: 100 }} />
    <InputNumber style={{ width: 100 }} />
    <DatePicker style={{ width: 100 }} />
    <TimePicker style={{ width: 100 }} />
    <Select style={{ width: 100 }} defaultValue="jack">
      <Option value="jack">Jack</Option>
      <Option value="lucy">Lucy</Option>
      <Option value="disabled" disabled>
        Disabled
      </Option>
      <Option value="Yiminghe">yiminghe</Option>
    </Select>
    <TreeSelect style={{ width: 100 }} />
    <Cascader defaultValue={['zhejiang', 'hangzhou', 'xihu']} options={options} />
    <RangePicker />
    <DatePicker picker="month" />
    <Radio.Group defaultValue="a">
      <Radio.Button value="a">Hangzhou</Radio.Button>
      <Radio.Button value="b">Shanghai</Radio.Button>
    </Radio.Group>
    <AutoComplete style={{ width: 100 }} placeholder="input here" />
    <br />
    <Input prefix="$" addonBefore="Http://" addonAfter=".com" defaultValue="mysite" />
    <Input style={narrowStyle} suffix="Y" />
    <Input style={narrowStyle} />
    <Input style={narrowStyle} defaultValue="1" suffix="Y" />
  </>,
  { docs: { page: () => (<><hr />
<p>order: 99
title:
  zh-CN: 文本对齐
  en-US: Text Align</p>
<h2 id="debugtrue">debug: true</h2></>) } });

function PickerWithType({ type, onChange }) {
  if (type === 'time') return <TimePicker onChange={onChange} />;
  if (type === 'date') return <DatePicker onChange={onChange} />;
  return <DatePicker picker={type} onChange={onChange} />;
}

render() {
    const info = () => {
      Modal.info({
        title: 'some info',
        content: 'some info',
      });
    };
    const confirm = () => {
      Modal.confirm({
        title: 'some info',
        content: 'some info',
      });
    };
    return (
      <div className="locale-components">
        <div className="example">
          <Pagination defaultCurrent={1} total={50} showSizeChanger />
        </div>
        <div className="example">
          <Select showSearch style={{ width: 200 }}>
            <Option value="jack">jack</Option>
            <Option value="lucy">lucy</Option>
          </Select>
          <DatePicker />
          <TimePicker />
          <RangePicker style={{ width: 200 }} />
        </div>
        <div className="example">
          <Button type="primary" onClick={this.showModal}>
            Show Modal
          </Button>
          <Button onClick={info}>Show info</Button>
          <Button onClick={confirm}>Show confirm</Button>
          <Popconfirm title="Question?">
            <a href="#">Click to confirm</a>
          </Popconfirm>
        </div>
        <div className="example">
          <Transfer dataSource={[]} showSearch targetKeys={[]} render={item => item.title} />
        </div>
        <div className="site-config-provider-calendar-wrapper">
          <Calendar fullscreen={false} value={moment()} />
        </div>
        <div className="example">
          <Table dataSource={[]} columns={columns} />
        </div>
        <Modal title="Locale Modal" visible={this.state.visible} onCancel={this.hideModal}>
          <p>Locale Modal</p>
        </Modal>
      </div>
    );
  }

storiesOf('antd/time-picker', module).add('hide-column', () => <TimePicker defaultValue={moment('12:08', format)} format={format} />, { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>While part of <code>format</code> is omitted, the corresponding column in panel will disappear, too.</p></>) } });

Time_Picker = props => <TimePicker placeholder="请选择" suffixIcon={null} format={format} size="small" style={{width:80}} {...props}/>

storiesOf('antd/time-picker', module).add('interval-options', () => <TimePicker minuteStep={15} secondStep={10} />, { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Show stepped options by <code>hourStep</code> <code>minuteStep</code> <code>secondStep</code>.</p></>) } });

function getElement(item) {
    const {type = 'input', component, ...props} = item;

    const commonProps = {
        size: 'default',
    };
    // 样式
    // const width = props.width || '100%';
    // const elementCommonStyle = {width};
    // props.style = props.style ? {...elementCommonStyle, ...props.style} : elementCommonStyle;

    // 如果 component 存在，说明是自定义组件
    if (component) {
        return typeof component === 'function' ? component() : component;
    }

    if (isInputLikeElement(type)) {
        if (type === 'number') return <InputNumber {...commonProps} {...props}/>;
        if (type === 'textarea') return <TextArea {...commonProps} {...props}/>;
        if (type === 'password') return <Password {...commonProps} {...props}/>;

        return <Input {...commonProps} type={type} {...props}/>;
    }

    if (type === 'select') {
        const {options = [], ...others} = props;

        return (
            <Select {...commonProps} {...others}>
                {
                    options.map(opt => <Select.Option key={opt.value} {...opt}>{opt.label}</Select.Option>)
                }
            </Select>
        );
    }

    if (type === 'select-tree') return <TreeSelect {...commonProps} {...props} treeData={props.options}/>;

    if (type === 'checkbox') return <Checkbox {...commonProps} {...props}>{props.label}</Checkbox>;
    if (type === 'checkbox-group') return <Checkbox.Group {...commonProps} {...props}/>;

    if (type === 'radio') return <Radio {...commonProps} {...props}>{props.label}</Radio>;
    if (type === 'radio-group') return <Radio.Group {...commonProps} {...props}/>;
    if (type === 'radio-button') {
        const {options = [], ...others} = props;
        return (
            <Radio.Group buttonStyle="solid" {...commonProps} {...others}>
                {options.map(opt => <Radio.Button key={opt.value} {...opt}>{opt.label}</Radio.Button>)}
            </Radio.Group>
        );
    }

    if (type === 'cascader') return <Cascader {...commonProps} {...props}/>;

    if (type === 'switch') return <Switch {...commonProps} {...props} style={{...props.style, width: 'auto'}}/>;

    if (type === 'date') return <DatePicker {...commonProps} {...props}/>;

    if (type === 'date-time') return <DatePicker {...commonProps} showTime {...props}/>;

    if (type === 'date-range') return <DatePicker.RangePicker {...commonProps} {...props}/>;

    if (type === 'month') return <DatePicker.MonthPicker {...commonProps} {...props}/>;

    if (type === 'time') return <TimePicker {...commonProps} {...props}/>;

    if (type === 'transfer') return <Transfer {...commonProps} {...props}/>;

    if (type === 'icon-picker') return <IconPicker {...commonProps} {...props}/>;

    throw new Error(`no such type: ${type}`);
}

storiesOf('antd/time-picker', module).add('range-picker', () => <TimePicker.RangePicker />, { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Use time range picker with <code>TimePicker.RangePicker</code>.</p></>) } });

storiesOf('antd/time-picker', module).add('size', () => 
  <>
    <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} size="large" />
    <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} />
    <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} size="small" />
  </>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>The input box comes in three sizes. large is used in the form, while the medium size is the default.</p></>) } });

storiesOf('antd/time-picker', module).add('suffix', () => 
  <TimePicker
    suffixIcon={<SmileOutlined />}
    onChange={onChange}
    defaultOpenValue={moment('00:00:00', 'HH:mm:ss')}
  />,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Click <code>TimePicker</code>, and then we could select or input a time in panel.</p></>) } });

render() {
    const { getFieldDecorator } = this.props.form
    const { id, visiable } = this.state
    return (
      <Modal
        title={id ? '编辑维护组' : '添加维护组'}
        visible={visiable}
        onOk={this.handleOk}
        onCancel={this.handleCancel}
        maskClosable={false}
      >
        <Form {...formItemLayout} layout="horizontal">
          <Form.Item label="维护时间段" required style={{ marginBottom: 0 }}>
            <Form.Item style={{ display: 'inline-block', width: 'calc(50% - 10px)' }}>
              {getFieldDecorator('time_start', {
                rules: [{ type: 'object', required: true, message: 'Please select time!' }],
              })(<TimePicker style={{ width: '100%' }} format="HH:mm" />)}
            </Form.Item>
            <span style={{ display: 'inline-block', width: '20px', textAlign: 'center' }}>~</span>
            <Form.Item style={{ display: 'inline-block', width: 'calc(50% - 10px)' }}>
              {getFieldDecorator('time_end', {
                rules: [
                  { type: 'object', required: true, message: 'Please select time!' },
                ],
              })(<TimePicker style={{ width: '100%' }} format="HH:mm" />)}
            </Form.Item>
          </Form.Item>
          <Form.Item label="维护月" required>
            {getFieldDecorator('month', {
              rules: [
                { type: 'array', required: true, message: 'Please select month' },
              ]
            })(<Select mode="multiple">
              { new Array(12).fill(1).map((item, index) => (<Option value={index + 1}>{index + 1}</Option>))}
            </Select>)}
          </Form.Item>
          <Form.Item label="维护日期" required style={{ marginBottom: 0 }}>
            <Form.Item style={{ display: 'inline-block', width: 'calc(50% - 10px)' }}>
              {getFieldDecorator('day_start', {
                rules: [{ required: true, message: 'Please input day!' }],
              })(<InputNumber style={{ width: '100%' }} format="HH:mm" />)}
            </Form.Item>
            <span style={{ display: 'inline-block', width: '20px', textAlign: 'center' }}>~</span>
            <Form.Item style={{ display: 'inline-block', width: 'calc(50% - 10px)' }}>
              {getFieldDecorator('day_end', {
                rules: [
                  { required: true, message: 'Please input day!' },
                  { validator: this.dayEndValid },
                ],
              })(<InputNumber style={{ width: '100%' }} format="HH:mm" />)}
            </Form.Item>
          </Form.Item>
          <Form.Item label="有效期">
            {getFieldDecorator('valid', {
              rules: [
                { required: true, message: '请填写有效期' },
              ],
            })(<DatePicker
              style={{ width: '100%' }}
              showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
              format="YYYY-MM-DD HH:mm:ss"
              placeholder={['请填写有效期']}
            />)}
          </Form.Item>
          <Form.Item label="机器列表">
            {getFieldDecorator('hosts', {
              rules: [
                { required: true, message: '请输入成员' },
              ],
            })(<Input.TextArea autoSize={{ minRows: 2 }} />)}
          </Form.Item>
        </Form>
      </Modal>
    )
  }

render() {
    const {
      form: { getFieldDecorator },
      submitting,
    } = this.props;
    return (
      <>
        <PageHeaderWrapper content="高级表单常见于一次性输入和提交大批量数据的场景。">
          <Card title="仓库管理" className={styles.card} bordered={false}>
            <Form layout="vertical" hideRequiredMark>
              <Row gutter={16}>
                <Col lg={6} md={12} sm={24}>
                  <Form.Item label={fieldLabels.name}>
                    {getFieldDecorator('name', {
                      rules: [
                        {
                          required: true,
                          message: '请输入仓库名称',
                        },
                      ],
                    })(<Input placeholder="请输入仓库名称" />)}
                  </Form.Item>
                </Col>
                <Col
                  xl={{
                    span: 6,
                    offset: 2,
                  }}
                  lg={{
                    span: 8,
                  }}
                  md={{
                    span: 12,
                  }}
                  sm={24}
                >
                  <Form.Item label={fieldLabels.url}>
                    {getFieldDecorator('url', {
                      rules: [
                        {
                          required: true,
                          message: '请选择',
                        },
                      ],
                    })(
                      <Input
                        style={{
                          width: '100%',
                        }}
                        addonBefore="http://"
                        addonAfter=".com"
                        placeholder="请输入"
                      />,
                    )}
                  </Form.Item>
                </Col>
                <Col
                  xl={{
                    span: 8,
                    offset: 2,
                  }}
                  lg={{
                    span: 10,
                  }}
                  md={{
                    span: 24,
                  }}
                  sm={24}
                >
                  <Form.Item label={fieldLabels.owner}>
                    {getFieldDecorator('owner', {
                      rules: [
                        {
                          required: true,
                          message: '请选择管理员',
                        },
                      ],
                    })(
                      <Select placeholder="请选择管理员">
                        <Option value="xiao">付晓晓</Option>
                        <Option value="mao">周毛毛</Option>
                      </Select>,
                    )}
                  </Form.Item>
                </Col>
              </Row>
              <Row gutter={16}>
                <Col lg={6} md={12} sm={24}>
                  <Form.Item label={fieldLabels.approver}>
                    {getFieldDecorator('approver', {
                      rules: [
                        {
                          required: true,
                          message: '请选择审批员',
                        },
                      ],
                    })(
                      <Select placeholder="请选择审批员">
                        <Option value="xiao">付晓晓</Option>
                        <Option value="mao">周毛毛</Option>
                      </Select>,
                    )}
                  </Form.Item>
                </Col>
                <Col
                  xl={{
                    span: 6,
                    offset: 2,
                  }}
                  lg={{
                    span: 8,
                  }}
                  md={{
                    span: 12,
                  }}
                  sm={24}
                >
                  <Form.Item label={fieldLabels.dateRange}>
                    {getFieldDecorator('dateRange', {
                      rules: [
                        {
                          required: true,
                          message: '请选择生效日期',
                        },
                      ],
                    })(
                      <RangePicker
                        placeholder={['开始日期', '结束日期']}
                        style={{
                          width: '100%',
                        }}
                      />,
                    )}
                  </Form.Item>
                </Col>
                <Col
                  xl={{
                    span: 8,
                    offset: 2,
                  }}
                  lg={{
                    span: 10,
                  }}
                  md={{
                    span: 24,
                  }}
                  sm={24}
                >
                  <Form.Item label={fieldLabels.type}>
                    {getFieldDecorator('type', {
                      rules: [
                        {
                          required: true,
                          message: '请选择仓库类型',
                        },
                      ],
                    })(
                      <Select placeholder="请选择仓库类型">
                        <Option value="private">私密</Option>
                        <Option value="public">公开</Option>
                      </Select>,
                    )}
                  </Form.Item>
                </Col>
              </Row>
            </Form>
          </Card>
          <Card title="任务管理" className={styles.card} bordered={false}>
            <Form layout="vertical" hideRequiredMark>
              <Row gutter={16}>
                <Col lg={6} md={12} sm={24}>
                  <Form.Item label={fieldLabels.name2}>
                    {getFieldDecorator('name2', {
                      rules: [
                        {
                          required: true,
                          message: '请输入',
                        },
                      ],
                    })(<Input placeholder="请输入" />)}
                  </Form.Item>
                </Col>
                <Col
                  xl={{
                    span: 6,
                    offset: 2,
                  }}
                  lg={{
                    span: 8,
                  }}
                  md={{
                    span: 12,
                  }}
                  sm={24}
                >
                  <Form.Item label={fieldLabels.url2}>
                    {getFieldDecorator('url2', {
                      rules: [
                        {
                          required: true,
                          message: '请选择',
                        },
                      ],
                    })(<Input placeholder="请输入" />)}
                  </Form.Item>
                </Col>
                <Col
                  xl={{
                    span: 8,
                    offset: 2,
                  }}
                  lg={{
                    span: 10,
                  }}
                  md={{
                    span: 24,
                  }}
                  sm={24}
                >
                  <Form.Item label={fieldLabels.owner2}>
                    {getFieldDecorator('owner2', {
                      rules: [
                        {
                          required: true,
                          message: '请选择管理员',
                        },
                      ],
                    })(
                      <Select placeholder="请选择管理员">
                        <Option value="xiao">付晓晓</Option>
                        <Option value="mao">周毛毛</Option>
                      </Select>,
                    )}
                  </Form.Item>
                </Col>
              </Row>
              <Row gutter={16}>
                <Col lg={6} md={12} sm={24}>
                  <Form.Item label={fieldLabels.approver2}>
                    {getFieldDecorator('approver2', {
                      rules: [
                        {
                          required: true,
                          message: '请选择审批员',
                        },
                      ],
                    })(
                      <Select placeholder="请选择审批员">
                        <Option value="xiao">付晓晓</Option>
                        <Option value="mao">周毛毛</Option>
                      </Select>,
                    )}
                  </Form.Item>
                </Col>
                <Col
                  xl={{
                    span: 6,
                    offset: 2,
                  }}
                  lg={{
                    span: 8,
                  }}
                  md={{
                    span: 12,
                  }}
                  sm={24}
                >
                  <Form.Item label={fieldLabels.dateRange2}>
                    {getFieldDecorator('dateRange2', {
                      rules: [
                        {
                          required: true,
                          message: '请输入',
                        },
                      ],
                    })(
                      <TimePicker
                        placeholder="提醒时间"
                        style={{
                          width: '100%',
                        }}
                        getPopupContainer={trigger => {
                          if (trigger && trigger.parentNode) {
                            return trigger.parentNode;
                          }

                          return trigger;
                        }}
                      />,
                    )}
                  </Form.Item>
                </Col>
                <Col
                  xl={{
                    span: 8,
                    offset: 2,
                  }}
                  lg={{
                    span: 10,
                  }}
                  md={{
                    span: 24,
                  }}
                  sm={24}
                >
                  <Form.Item label={fieldLabels.type2}>
                    {getFieldDecorator('type2', {
                      rules: [
                        {
                          required: true,
                          message: '请选择仓库类型',
                        },
                      ],
                    })(
                      <Select placeholder="请选择仓库类型">
                        <Option value="private">私密</Option>
                        <Option value="public">公开</Option>
                      </Select>,
                    )}
                  </Form.Item>
                </Col>
              </Row>
            </Form>
          </Card>
          <Card title="成员管理" bordered={false}>
            {getFieldDecorator('members', {
              initialValue: tableData,
            })(<TableForm />)}
          </Card>
        </PageHeaderWrapper>
        <FooterToolbar>
          {this.getErrorInfo()}
          <Button type="primary" onClick={this.validate} loading={submitting}>
            提交
          </Button>
        </FooterToolbar>
      </>
    );
  }

render(){
    const { gooddata, id, model_type } = this.conversionObject();
    const { upLoading, GoodsLoading, is_template } = this.props;
    const { templete, listdata, is_build, delivery_data, request } = this.state;
    const createTem = this.getAuth('createTemplate');

    const goodgroups = listdata.map(item => <Option key={item.id} value={item.id}>{item.name}</Option>);
    const statusgroup = {
      is_sell: '在售',
      preview: '预览',
      not_enough: '库存不足',
      not_sell: '下架'
    };

    return(
      <PageHeaderWrapper>
        <Card className={styles.main}
              title={id ? `编辑${textSwitch[model_type].label}商品信息` : `新增${textSwitch[model_type].label}商品信息`}
              extra={[
                <Button onClick={() => this.goBack(-1)}>取消</Button>,
                <Button type="primary" style={{ marginLeft: 8 }}
                        onClick={() => request
                          && this.setState({request:false},
                            () => this.handleSubmit())}>
                  {id == null ? '创建' : '保存'}
                </Button>
              ]}>
          <Spin spinning={Boolean(GoodsLoading || upLoading)} tip="正在操作中">
            <Tabs defaultActiveKey="1" type="card">
              <TabPane tab="基本信息" key="1" forceRender={true}>
                <Form>
                  { !is_template &&
                    <FormItem label="商品模板选择" required={false} style={id ? { display: 'none' } : {}}>
                      <Select
                        style={{ width: '60%'}}
                        value={templete}
                        onChange={e => {this.selectTemplete(e) }}>
                        {goodgroups}
                      </Select>
                      <Link to='/good/template/goodlistTemplate/editgoodTemplate?id' style={{ marginLeft: 10 }}>新增模版</Link>
                    </FormItem>
                  }
                  {model_type !== 'replace' &&
                    <FormItem label="商品类别">
                      <CategorySelect
                        value={(gooddata.category && gooddata.category.name) || gooddata.category}
                        onChange={e => this.chnangegooddata(e, 'category')}
                      />
                      <Link to='/good/categorylist/editpage?id' style={{ marginLeft: 10 }}>新增分类</Link>
                    </FormItem>
                  }
                  { model_type !== 'replace' &&
                    <FormItem label="接力拼团商品" required={false}>
                      <Switch
                        disabled={!createTem}
                        checked={gooddata.groupbuy}
                        onChange={e => {
                          this.chnangegooddata(e, 'groupbuy');
                        }}
                      />{' '}
                      {is_build ? <a>该商品仍然有人在拼团，可以关闭拼团功能，不可更改拼团数据设置</a> : null}
                    </FormItem>
                  }
                  <FormItem label="虚拟商品" required={false}>
                    <Switch
                      disabled={!createTem}
                      checked={gooddata.fictitious}
                      onChange={e => {
                        this.chnangegooddata(e, 'fictitious');
                      }}
                    />
                  </FormItem>
                  {model_type !== 'replace' &&
                    <FormItem label="热门商品" required={false}>
                      <Switch
                        disabled={!createTem}
                        checked={gooddata.recommendation}
                        onChange={e => {
                          this.chnangegooddata(e, 'recommendation');
                        }}
                      />
                    </FormItem>
                  }
                  <FormItem label="商品名">
                    <Input
                      disabled={!createTem}
                      style={{ width: 250 }}
                      placeholder="请输入商品名称"
                      value={gooddata.name}
                      onChange={e => {
                        this.chnangegooddata(e.target.value, 'name');
                      }}
                    />
                  </FormItem>
                  <FormItem label="排序" required={false}>
                    <InputNumber
                      min={0}
                      style={{ width: 150 }}
                      placeholder="请输入排序"
                      value={gooddata.index}
                      onChange={e => {
                        this.chnangegooddata(e, 'index');
                      }}
                    />
                  </FormItem>
                  <FormItem label="商品描述">
                    <Input.TextArea
                      disabled={!createTem}
                      style={{ width: 500 }}
                      rows={3}
                      placeholder="请输入商品描述"
                      value={gooddata.goods_brief}
                      onChange={e => {
                        this.chnangegooddata(e.target.value, 'goods_brief');
                      }}
                    />
                  </FormItem>
                  {!is_template ?
                    <FormItem label="商品状态">
                      <Select
                        style={{ width: 150 }}
                        value={statusgroup[gooddata.status]}
                        onChange={e => {
                          this.chnangegooddata(e, 'status');
                        }}
                      >
                        <Option value="is_sell">在售</Option>
                        <Option value="preview">预览</Option>
                        <Option value="not_sell">下架</Option>
                      </Select>
                    </FormItem>
                    : null
                  }
                  { model_type === 'sub' &&
                    <FormItem label="订阅持续时间">
                      <RadioGroup onChange={(e) => {
                        this.chnangegooddata(e.target.value, 'sub_goods', 'duration')
                      }}
                                  value={gooddata.sub_goods.duration}
                                  disabled={!createTem}>
                        <Radio value="long_term">长期</Radio>
                        <Radio value="time_frame">具体日期</Radio>
                        <RangePicker size="small"
                                     disabled={!createTem || !(gooddata.sub_goods.duration === "time_frame")}
                                     value={gooddata.sub_goods.duration_start ? [moment(gooddata.sub_goods.duration_start), moment(gooddata.sub_goods.duration_end)] : null}
                                     onChange={this.changeTemTime}/>
                      </RadioGroup>
                    </FormItem>
                  }
                  <ImageGroup
                    video={gooddata.video ? [gooddata.video] : []}
                    goodimg={[]}
                    poster={gooddata.poster ? [gooddata.poster] : []}
                    detailgroup={gooddata.detail || []}
                    bannergroup={gooddata.banner || []}
                    onChange={(e, key) => this.chnangegooddata(e, key)}
                    disabled={!createTem}
                  />
                </Form>
              </TabPane>

              <TabPane tab="商品规格" key="4" forceRender={true}>
                <GType
                  mode={id ? 'edit' : 'new'}
                  type={textSwitch[model_type].key}
                  disabled={is_build}
                  isMixed={gooddata.groupbuy}
                  model_type={model_type}
                  ladder_list={gooddata.groupbuy_info && gooddata.groupbuy_info.ladder_list || []}
                  gtypes={gooddata[textSwitch[model_type].key].gtypes || []}
                  onChange={e => this.chnangegooddata(e, textSwitch[model_type].key, 'gtypes')}
                />
              </TabPane>

              {model_type !== 'replace' &&
              <TabPane tab="拼团设置" disabled={!gooddata.groupbuy} key="3" forceRender={true}>
                <Form>
                  <GroupBuy
                    disabled={is_build}
                    groupbuy_info={gooddata.groupbuy_info}
                    onChange={(e, label) => this.chnangegooddata(e, 'groupbuy_info', label)}
                  />
                </Form>
              </TabPane>
              }

              {
                this.props.config && this.props.config.attach_switch && (
                  <TabPane tab="自定义商品信息" key="5" forceRender={true}>
                    <AttachField
                      attach={gooddata.attach || []}
                      onChange={(e) => this.chnangegooddata(e, 'attach')}
                    />
                  </TabPane>
                )
              }

              <TabPane tab="配送设置" disabled={model_type !== 'sub' && gooddata.fictitious} key="2" forceRender={true}>
                <Form>
                  { model_type === 'sub' &&
                    <Fragment>
                      <FormItem label="配送时间设置">
                        <RadioGroup onChange={(e) => { this.chnangegooddata(e.target.value,'sub_goods','delivery_setup')}}
                                    value={gooddata.sub_goods.delivery_setup}
                                    disabled={!createTem}>
                          <Radio value="date">配送日期</Radio>
                          <Radio value="interval">固定间隔</Radio>
                        </RadioGroup>
                      </FormItem>
                      <FormItem label="配送日期设置">
                        <RadioGroup onChange={(e) => { this.chnangegooddata(e.target.value,'sub_goods','date_setup')}}
                                    value={gooddata.sub_goods.date_setup}
                                    disabled={!createTem || !(gooddata.sub_goods.delivery_setup === 'date')}>
                          <Radio value="specific">具体日期</Radio>
                          <Radio value="weekly">每周设置</Radio>
                        </RadioGroup>
                        { gooddata.sub_goods.delivery_setup === 'date' && gooddata.sub_goods.date_setup === 'specific'
                          ? <DeliveryData specific={delivery_data.specific || []}
                                          limit={gooddata.sub_goods.duration === "time_frame" ? [gooddata.sub_goods.duration_start,gooddata.sub_goods.duration_end] : null}
                                          onChange={(e) => this.chnangegooddata(e,'sub_goods','delivery_data','specific')} />
                          : null
                        }
                        <div style={gooddata.sub_goods.delivery_setup === 'date' && gooddata.sub_goods.date_setup === 'weekly' ? {} : {display:'none'}}>
                          <CheckboxGroup
                            value={delivery_data.weekly}
                            onChange={(e) => this.chnangegooddata(e,'sub_goods','delivery_data','weekly')}>
                            <Checkbox value="1">周一</Checkbox>
                            <Checkbox value="2">周二</Checkbox>
                            <Checkbox value="3">周三</Checkbox>
                            <Checkbox value="4">周四</Checkbox>
                            <Checkbox value="5">周五</Checkbox>
                            <Checkbox value="6">周六</Checkbox>
                            <Checkbox value="0">周日</Checkbox>
                          </CheckboxGroup>
                        </div>
                      </FormItem>
                      <FormItem label="固定间隔/天">
                        <InputNumber
                          disabled={!createTem || !(gooddata.sub_goods.delivery_setup === 'interval')}
                          style={{ width: 250 }}
                          placeholder='请输入两次配送的时间间距'
                          value={gooddata.sub_goods.interval}
                          onChange={(e) => { this.chnangegooddata(e,'sub_goods','interval')}}
                        />
                      </FormItem>
                      <FormItem label="配送日的配送时间" required={false}>
                        <TimePicker
                          format='HH:mm:ss'
                          value={gooddata.sub_goods.send_start ? moment(gooddata.sub_goods.send_start, 'HH:mm:ss') : null }
                          onChange={(e,str) => { this.chnangegooddata(str,'sub_goods','send_start')}} />
                        <span style={{marginLeft: 10,marginRight: 10}}>-</span>
                        <TimePicker
                          format='HH:mm:ss'
                          value={gooddata.sub_goods.send_end ? moment(gooddata.sub_goods.send_end, 'HH:mm:ss') : null }
                          onChange={(e,str) => { this.chnangegooddata(str,'sub_goods','send_end')}} />
                      </FormItem>
                    </Fragment>
                  }
                  { !gooddata.fictitious &&
                    <Fragment>
                      <FormItem label="配送方式">
                        <CheckboxGroup
                          onChange={e => {
                            this.chnangegooddata(e, 'delivery_method');
                          }}
                          value={gooddata.delivery_method}
                          disabled={!createTem}
                        >
                          <Checkbox
                            value="own"
                            disabled={gooddata.delivery_method &&gooddata.delivery_method.includes('express')}
                          >
                            自配送
                          </Checkbox>
                          <Checkbox
                            value="express"
                            disabled={gooddata.delivery_method &&gooddata.delivery_method.includes('own')}
                          >
                            快递物流
                          </Checkbox>
                          <Checkbox value="buyer">自提</Checkbox>
                        </CheckboxGroup>
                      </FormItem>
                      {gooddata.delivery_method && gooddata.delivery_method.includes('own') && model_type !== 'sub' ? (
                        <FormItem label="自配送预计时间" required={false}>
                          <BookTime
                            estimate_time={gooddata[textSwitch[model_type].key].estimate_time || []}
                            disabled={!createTem}
                            onChange={e => this.chnangegooddata(e, textSwitch[model_type].key, 'estimate_time')}
                          />
                        </FormItem>
                      ) : null}
                      {/*<FormItem label="是否允许自提">*/}
                        {/*<Switch*/}
                          {/*disabled={!createTem}*/}
                          {/*checked={gooddata.pick_up}*/}
                          {/*onChange={e => {*/}
                            {/*this.chnangegooddata(e, 'pick_up');*/}
                          {/*}}*/}
                        {/*/>*/}
                      {/*</FormItem>*/}
                      <FormItem label="运费设置" style={model_type === 'replace' ? {display: 'none'} : {}}>
                        <RadioGroup
                          onChange={e => {
                            this.chnangegooddata(e.target.value, 'postage_setup');
                          }}
                          value={gooddata.postage_setup || (model_type === 'replace' && 'free')}
                          disabled={!createTem || model_type === 'replace'}
                        >
                          <Radio value="free">免邮</Radio>
                          <Radio value="distance">按配送距离设置</Radio>
                          <Radio value={3} disabled>
                            物流公司
                          </Radio>
                        </RadioGroup>
                        {gooddata.postage_setup === 'distance' ? (
                          <PostageType
                            set_postage={gooddata.postage || []}
                            disabled={!createTem}
                            onChange={e => this.chnangegooddata(e, 'postage')}
                          />
                        ) : null}
                      </FormItem>
                    </Fragment>
                  }
                </Form>
              </TabPane>

              {
                id && (
                  <TabPane tab="小程序" key="6" forceRender={true}>
                    <FormItem label="页面路径" help={`/pages/util/index?pid=${id}`} required={false}>
                      <Button size='small' onClick={() => copy(`/pages/util/index?pid=${id}`)}>
                        复制
                      </Button>
                    </FormItem>
                  </TabPane>
                )
              }
            </Tabs>
          </Spin>
        </Card>
      </PageHeaderWrapper>
    )
  }

render() {
    const {
      form: { getFieldDecorator },
      submitting,
    } = this.props;
    const { width } = this.state;

    return (
      <PageHeaderWrapper
        title="高级表单"
        content="高级表单常见于一次性输入和提交大批量数据的场景。"
        wrapperClassName={styles.advancedForm}
      >
        <Card title="仓库管理" className={styles.card} bordered={false}>
          <Form layout="vertical" hideRequiredMark>
            <Row gutter={16}>
              <Col lg={6} md={12} sm={24}>
                <Form.Item label={fieldLabels.name}>
                  {getFieldDecorator('name', {
                    rules: [{ required: true, message: '请输入仓库名称' }],
                  })(<Input placeholder="请输入仓库名称" />)}
                </Form.Item>
              </Col>
              <Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
                <Form.Item label={fieldLabels.url}>
                  {getFieldDecorator('url', {
                    rules: [{ required: true, message: '请选择' }],
                  })(
                    <Input
                      style={{ width: '100%' }}
                      addonBefore="http://"
                      addonAfter=".com"
                      placeholder="请输入"
                    />
                  )}
                </Form.Item>
              </Col>
              <Col xl={{ span: 8, offset: 2 }} lg={{ span: 10 }} md={{ span: 24 }} sm={24}>
                <Form.Item label={fieldLabels.owner}>
                  {getFieldDecorator('owner', {
                    rules: [{ required: true, message: '请选择管理员' }],
                  })(
                    <Select placeholder="请选择管理员">
                      <Option value="xiao">付晓晓</Option>
                      <Option value="mao">周毛毛</Option>
                    </Select>
                  )}
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col lg={6} md={12} sm={24}>
                <Form.Item label={fieldLabels.approver}>
                  {getFieldDecorator('approver', {
                    rules: [{ required: true, message: '请选择审批员' }],
                  })(
                    <Select placeholder="请选择审批员">
                      <Option value="xiao">付晓晓</Option>
                      <Option value="mao">周毛毛</Option>
                    </Select>
                  )}
                </Form.Item>
              </Col>
              <Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
                <Form.Item label={fieldLabels.dateRange}>
                  {getFieldDecorator('dateRange', {
                    rules: [{ required: true, message: '请选择生效日期' }],
                  })(
                    <RangePicker placeholder={['开始日期', '结束日期']} style={{ width: '100%' }} />
                  )}
                </Form.Item>
              </Col>
              <Col xl={{ span: 8, offset: 2 }} lg={{ span: 10 }} md={{ span: 24 }} sm={24}>
                <Form.Item label={fieldLabels.type}>
                  {getFieldDecorator('type', {
                    rules: [{ required: true, message: '请选择仓库类型' }],
                  })(
                    <Select placeholder="请选择仓库类型">
                      <Option value="private">私密</Option>
                      <Option value="public">公开</Option>
                    </Select>
                  )}
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </Card>
        <Card title="任务管理" className={styles.card} bordered={false}>
          <Form layout="vertical" hideRequiredMark>
            <Row gutter={16}>
              <Col lg={6} md={12} sm={24}>
                <Form.Item label={fieldLabels.name2}>
                  {getFieldDecorator('name2', {
                    rules: [{ required: true, message: '请输入' }],
                  })(<Input placeholder="请输入" />)}
                </Form.Item>
              </Col>
              <Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
                <Form.Item label={fieldLabels.url2}>
                  {getFieldDecorator('url2', {
                    rules: [{ required: true, message: '请选择' }],
                  })(<Input placeholder="请输入" />)}
                </Form.Item>
              </Col>
              <Col xl={{ span: 8, offset: 2 }} lg={{ span: 10 }} md={{ span: 24 }} sm={24}>
                <Form.Item label={fieldLabels.owner2}>
                  {getFieldDecorator('owner2', {
                    rules: [{ required: true, message: '请选择管理员' }],
                  })(
                    <Select placeholder="请选择管理员">
                      <Option value="xiao">付晓晓</Option>
                      <Option value="mao">周毛毛</Option>
                    </Select>
                  )}
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col lg={6} md={12} sm={24}>
                <Form.Item label={fieldLabels.approver2}>
                  {getFieldDecorator('approver2', {
                    rules: [{ required: true, message: '请选择审批员' }],
                  })(
                    <Select placeholder="请选择审批员">
                      <Option value="xiao">付晓晓</Option>
                      <Option value="mao">周毛毛</Option>
                    </Select>
                  )}
                </Form.Item>
              </Col>
              <Col xl={{ span: 6, offset: 2 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
                <Form.Item label={fieldLabels.dateRange2}>
                  {getFieldDecorator('dateRange2', {
                    rules: [{ required: true, message: '请输入' }],
                  })(
                    <TimePicker
                      placeholder="提醒时间"
                      style={{ width: '100%' }}
                      getPopupContainer={trigger => trigger.parentNode}
                    />
                  )}
                </Form.Item>
              </Col>
              <Col xl={{ span: 8, offset: 2 }} lg={{ span: 10 }} md={{ span: 24 }} sm={24}>
                <Form.Item label={fieldLabels.type2}>
                  {getFieldDecorator('type2', {
                    rules: [{ required: true, message: '请选择仓库类型' }],
                  })(
                    <Select placeholder="请选择仓库类型">
                      <Option value="private">私密</Option>
                      <Option value="public">公开</Option>
                    </Select>
                  )}
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </Card>
        <Card title="成员管理" bordered={false}>
          {getFieldDecorator('members', {
            initialValue: tableData,
          })(<TableForm />)}
        </Card>
        <FooterToolbar style={{ width }}>
          {this.getErrorInfo()}
          <Button type="primary" onClick={this.validate} loading={submitting}>
            提交
          </Button>
        </FooterToolbar>
      </PageHeaderWrapper>
    );
  }

AntdFormExample = () => {
  return (
    <Form {...formItemLayout}>
      <Form.Item
        label="Fail"
        validateStatus="error"
        help="Should be combination of numbers & alphabets"
      >
        <Input placeholder="unavailable choice" id="error" />
      </Form.Item>

      <Form.Item label="Warning" validateStatus="warning">
        <Input placeholder="Warning" id="warning" prefix={<SmileOutlined />} />
      </Form.Item>

      <Form.Item
        label="Validating"
        hasFeedback
        validateStatus="validating"
        help="The information is being validated..."
      >
        <Input placeholder="I'm the content is being validated" id="validating" />
      </Form.Item>

      <Form.Item label="Success" hasFeedback validateStatus="success">
        <Input placeholder="I'm the content" id="success" />
      </Form.Item>

      <Form.Item label="Warning" hasFeedback validateStatus="warning">
        <Input placeholder="Warning" id="warning2" />
      </Form.Item>

      <Form.Item
        label="Fail"
        hasFeedback
        validateStatus="error"
        help="Should be combination of numbers & alphabets"
      >
        <Input placeholder="unavailable choice" id="error2" />
      </Form.Item>

      <Form.Item label="Success" hasFeedback validateStatus="success">
        <DatePicker style={{ width: '100%' }} />
      </Form.Item>

      <Form.Item label="Warning" hasFeedback validateStatus="warning">
        <TimePicker style={{ width: '100%' }} />
      </Form.Item>

      <Form.Item label="Error" hasFeedback validateStatus="error">
        <Select>
          <Option value="1">Option 1</Option>
          <Option value="2">Option 2</Option>
          <Option value="3">Option 3</Option>
        </Select>
      </Form.Item>

      <Form.Item
        label="Validating"
        hasFeedback
        validateStatus="validating"
        help="The information is being validated..."
      >
        <Cascader options={[]} />
      </Form.Item>

      <Form.Item label="inline" style={{ marginBottom: 0 }}>
        <Form.Item
          validateStatus="error"
          help="Please select the correct date"
          style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}
        >
          <DatePicker />
        </Form.Item>
        <span
          style={{
            display: 'inline-block',
            width: '24px',
            lineHeight: '32px',
            textAlign: 'center',
          }}
        >
          -
        </span>
        <Form.Item style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}>
          <DatePicker />
        </Form.Item>
      </Form.Item>

      <Form.Item label="Success" hasFeedback validateStatus="success">
        <InputNumber style={{ width: '100%' }} />
      </Form.Item>

      <Form.Item label="Success" hasFeedback validateStatus="success">
        <Input allowClear placeholder="with allowClear" />
      </Form.Item>

      <Form.Item label="Warning" hasFeedback validateStatus="warning">
        <Input.Password placeholder="with input password" />
      </Form.Item>

      <Form.Item label="Error" hasFeedback validateStatus="error">
        <Input.Password allowClear placeholder="with input password and allowClear" />
      </Form.Item>
    </Form>
  )
}

UpdateEvent = props => {
	const format = "h:mm a";
	const [event, setEvent] = useState(null);
	const [mdx, setMdx] = useState("");
	const [isLoading, setIsLoading] = useState(false);
	const [showSkeleton, setShowSkeleton] = useState(false);
	const [fileList, setFileList] = useState(null);
	const [form] = Form.useForm();
	const [isModalVisible, setIsModalVisible] = useState(false);

	const handlePreview = () => {
		setIsModalVisible(!isModalVisible);
	};

	const uploadprops = {
		name: "file",
		action: "https://www.api.dsckiet.com/dev",
		headers: {
			authorization: "authorization-text"
		},
		onChange(info) {
			if (info.file.status === "done") {
				message.success(`${info.file.name} file uploaded successfully`);
			} else if (info.file.status === "error") {
				message.error(`${info.file.name} file upload failed.`);
			}
			setFileList(info.fileList);
		}
	};
	useEffect(() => {
		(async () => {
			setShowSkeleton(true);
			try {
				const id = props.eventId;
				const res = await getEventService(id);
				if (res.message === "success") {
					setEvent(res.data);
					setShowSkeleton(false);
				} else {
					_notification("warning", "Error", res.message);
				}
			} catch (err) {
				_notification("error", "Error", err.message);
			}
		})();
	}, [props.eventId]);

	useEffect(() => {
		if (event) {
			let {
				startDate,
				endDate,
				time,
				title,
				description,
				isRegistrationOpened,
				isRegistrationRequired,
				venue,
				maxRegister,
				image
			} = event;
			console.log(event);

			startDate = startDate.split("T")[0];
			endDate = endDate.split("T")[0];

			setMdx(description);

			form.setFieldsValue({
				startTime: moment(time.split(" to ")[0], format),
				endTime: moment(time.split(" to ")[1], format),
				dates: [
					moment(startDate, "YYYY-MM-DD"),
					moment(endDate, "YYYY-MM-DD")
				],
				title,
				description,
				isRegistrationOpened,
				isRegistrationRequired,
				venue,
				maxRegister,
				image
			});
		}
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [event]);

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

	const handleSubmit = async values => {
		setIsLoading(true);
		if (form.getFieldValue("isRegistrationRequired") === false) {
			form.setFieldsValue({ isRegistrationOpened: false });
		}
		try {
			let xtime =
				values.startTime.format("h:mm a") +
				" to " +
				values.endTime.format("h:mm a");

			const formData = new FormData();
			if (values.image.file) {
				formData.append("image", values.image.file.originFileObj);
			} else {
				formData.append("image", values.image);
			}
			formData.append("title", values.title);
			formData.append("description", values.description);
			formData.append("startDate", values.dates[0].format("YYYY-MM-DD"));
			formData.append("endDate", values.dates[1].format("YYYY-MM-DD"));
			formData.append("time", xtime);
			formData.append("venue", values.venue);
			formData.append(
				"isRegistrationRequired",
				values.isRegistrationRequired
			);
			formData.append(
				"isRegistrationOpened",
				values.isRegistrationOpened
			);
			formData.append("maxRegister", values.maxRegister);
			formData.append("slug", slugify(event.slug));

			let params = props.eventId;
			console.log(formData, "yeh h final");

			const res = await updateEventService(formData, params);
			if (res.message === "success") {
				_notification("success", "Success", "Event Updated");
				props.onUpdateEvent();
			} else {
				_notification("error", "Error", res.message);
			}
			setIsLoading(false);
		} catch (err) {
			_notification("error", "Error", err.message);
			setIsLoading(false);
		}
	};

	const slugify = text => {
		return text
			.replace(/ /g, "-")
			.replace(/[^\w-]+/g, "-")
			.replace(/-+/g, "-");
	};

	const renderers = {
		img: ({ alt, src, title }) => (
			<img
				alt={alt}
				src={src}
				title={title}
				style={{
					maxWidth: "100%",
					borderRadius: "8px",
					marginTop: "12px"
				}}
			/>
		),
		h2: ({ node }) => (
			<h2
				style={{
					fontSize: "28px",
					fontWeight: "600",
					textTransform: "capitalize",
					marginTop: "24px",
					color: "rgba(0, 0, 0, 0.65)"
				}}
			>
				{node.children[0].value}
			</h2>
		),
		h3: ({ node }) => (
			<h3
				style={{
					color: "rgba(0, 0, 0, 0.65)",
					fontWeight: 600
				}}
			>
				{node.children[0].value}
			</h3>
		)
	};

	return (
		<Skeleton loading={showSkeleton} active>
			<Form onFinish={handleSubmit} layout="vertical" form={form}>
				<Form.Item
					label="Event Title"
					required
					name="title"
					rules={[
						{
							required: true,
							message: "Please input event title!"
						}
					]}
				>
					<Input type="text" placeholder="Event title" />
				</Form.Item>
				<Form.Item
					label="Description"
					required
					name="description"
					rules={[
						{
							require: true,
							message: "Please enter description!"
						}
					]}
				>
					<TextArea
						rows={4}
						placeholder="Enter event description"
						onChange={e => setMdx(e.target.value)}
					/>
				</Form.Item>
				<Form.Item>
					<Button type="primary" onClick={handlePreview}>
						Preview Event
					</Button>
				</Form.Item>

				{event ? (
					<img
						width="100%"
						style={{ borderRadius: 4, marginBottom: 8 }}
						src={event.image}
						alt={event.name}
					/>
				) : null}

				<Form.Item
					label="Update Picture"
					required
					name="image"
					rules={[
						{
							required: true,
							message: "Please select!"
						}
					]}
				>
					<Upload
						{...uploadprops}
						fileList={fileList}
						listType="picture"
					>
						<Button>
							<Icon type="upload" /> Click to Upload
						</Button>
					</Upload>
				</Form.Item>

				<Form.Item
					label="Event Venue"
					required
					name="venue"
					rules={[
						{
							required: true,
							message: "Please input event venue!"
						}
					]}
				>
					<Input type="text" placeholder="Event venue" />
				</Form.Item>

				<Form.Item
					label="Event Dates"
					required
					name="dates"
					rules={[
						{
							required: true,
							message: "Please select event dates!"
						}
					]}
				>
					<RangePicker
						style={{ width: "100%" }}
						disabledDate={disabledDate}
						format="YYYY-MM-DD"
					/>
				</Form.Item>

				<Row gutter={16}>
					<Col span={12}>
						<Form.Item
							label="Start Time"
							required
							name="startTime"
							rules={[
								{
									required: true,
									message: "Please select event timings!"
								}
							]}
						>
							<TimePicker
								use12Hours
								format="h:mm a"
								style={{ width: "100%" }}
							/>
						</Form.Item>
					</Col>
					<Col span={12}>
						<Form.Item
							label="End Time"
							required
							name="endTime"
							rules={[
								{
									required: true,
									message: "Please select event timings!"
								}
							]}
						>
							<TimePicker
								use12Hours
								format="h:mm a"
								style={{ width: "100%" }}
							/>
						</Form.Item>
					</Col>
				</Row>

				<Row gutter={16}>
					<Col span={12}>
						<Form.Item name="isRegistrationRequired">
							<Checkbox
								checked={form.getFieldValue(
									"isRegistrationRequired"
								)}
							>
								Is Registration Required?
							</Checkbox>
						</Form.Item>
					</Col>

					<Col span={12}>
						<Form.Item
							name="isRegistrationOpened"
							hidden={
								form.getFieldValue("isRegistrationRequired") ===
								false
									? true
									: false
							}
						>
							<Checkbox
								checked={form.getFieldValue(
									"isRegistrationOpened"
								)}
							>
								Is Registration Open?
							</Checkbox>
						</Form.Item>
					</Col>
				</Row>
				<Form.Item
					label="Max Registerations"
					name="maxRegister"
					rules={[
						{
							required: true,
							message: "Please enter maximum registrations."
						}
					]}
				>
					<InputNumber min={1} />
				</Form.Item>

				<Form.Item>
					<Form.Item>
						<Button
							type="primary"
							htmlType="submit"
							className="login-form-button"
							loading={isLoading}
						>
							Update Event
						</Button>
					</Form.Item>
				</Form.Item>
			</Form>
			<Modal
				title="Desription Preview"
				visible={isModalVisible}
				footer={null}
				onCancel={() => setIsModalVisible(!isModalVisible)}
			>
				<ReactMarkdown components={renderers}>{mdx}</ReactMarkdown>
			</Modal>
		</Skeleton>
	);
}

CreateEvent = props => {
	const [isLoading, setIsLoading] = useState(false);
	const [fileList, setFileList] = useState(null);
	const [mdx, setMdx] = useState("");
	const [isModalVisible, setIsModalVisible] = useState(false);
	const [form] = Form.useForm();
	const [title, setTitle] = useState("");
	const [slug, setSlug] = useState("");

	useEffect(() => {
		form.setFieldsValue({
			maxRegister: 1
		});
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, []);

	const uploadprops = {
		name: "file",
		action: "https://www.api.dsckiet.com/dev",
		headers: {
			authorization: "authorization-text"
		},
		onChange(info) {
			if (info.file.status === "done") {
				message.success(`${info.file.name} file uploaded successfully`);
			} else if (info.file.status === "error") {
				message.error(`${info.file.name} file upload failed.`);
			}
			setFileList(info.fileList);
		}
	};

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

	const handleSubmit = async values => {
		if (values.isRegistrationRequired === false) {
			values.isRegistrationOpened = false;
		}

		try {
			let xtime =
				values.startTime.format("h:mm a") +
				" to " +
				values.endTime.format("h:mm a");
			const formData = new FormData();
			formData.append("image", values.image.file.originFileObj);
			formData.append("title", title);
			formData.append("slug", slug);
			formData.append("description", values.description);
			formData.append("time", xtime);
			formData.append("venue", values.venue);
			formData.append("maxRegister", values.maxRegister);
			formData.append("startDate", values.dates[0].format("YYYY-MM-DD"));
			formData.append("endDate", values.dates[1].format("YYYY-MM-DD"));
			if (values.isRegistrationRequired === undefined) {
				formData.append("isRegistrationRequired", false);
			} else {
				formData.append(
					"isRegistrationRequired",
					values.isRegistrationRequired
				);
			}
			if (values.isRegistrationOpened === undefined) {
				formData.append("isRegistrationOpened", false);
			} else {
				formData.append(
					"isRegistrationOpened",
					values.isRegistrationOpened
				);
			}
			const res = await addEventService(formData);
			if (res.message === "success") {
				_notification("success", "Success", "Event Added");
				props.onAddEvent();
			} else {
				_notification("error", "Error", res.message);
			}
			setIsLoading(false);
		} catch (err) {
			_notification("error", "Error", err.message);
			setIsLoading(false);
		}
	};

	const handlePreview = () => {
		setIsModalVisible(!isModalVisible);
	};

	const slugify = text => {
		return text
			.replace(/ /g, "-")
			.replace(/[^\w-]+/g, "-")
			.replace(/-+/g, "-");
	};

	const renderers = {
		img: ({ alt, src, title }) => (
			<img
				alt={alt}
				src={src}
				title={title}
				style={{
					maxWidth: "100%",
					borderRadius: "8px",
					marginTop: "12px"
				}}
			/>
		)
	};

	return (
		<>
			<Form onFinish={handleSubmit} layout="vertical" form={form}>
				{/* <Form.Item
					label="Event Title"
					required
					name="title"
					rules={[
						{
							required: true,
							message: "Please input event title!"
						}
					]}
				> */}

				<Input
					required
					value={title ? title : ""}
					type="text"
					placeholder="Event title"
					onChange={e => {
						setTitle(e.target.value);
						setSlug(slugify(e.target.value));
					}}
					style={{ marginBottom: "20px" }}
				/>
				{/* </Form.Item> */}
				{/* <Form.Item
					label="Event Slug"
					required
					name="slug"
					rules={[
						{
							required: true,
							message: "Please input event slug!"
						}
					]}
				> */}
				<Input
					value={slug ? slug : ""}
					type="text"
					placeholder="Event slug"
					onChange={e => setSlug(slugify(e.target.value))}
					style={{ marginBottom: "20px" }}
				/>
				{/* </Form.Item> */}
				<Form.Item
					label="Description"
					required
					name="description"
					rules={[
						{
							required: true,
							message: "Please enter description!"
						}
					]}
				>
					<TextArea
						rows={4}
						placeholder="Enter event description"
						onChange={e => setMdx(e.target.value)}
					/>
				</Form.Item>
				<Form.Item>
					<Button type="primary" onClick={handlePreview}>
						Preview Event
					</Button>
				</Form.Item>
				<Form.Item
					label="Upload Picture"
					required
					name="image"
					rules={[
						{
							required: true,
							message: "Please select image!"
						}
					]}
				>
					<Upload
						{...uploadprops}
						fileList={fileList}
						listType="picture"
					>
						<Button>
							<VerticalAlignTopOutlined /> Click to Upload
						</Button>
					</Upload>
				</Form.Item>

				<Form.Item
					label="Event Venue"
					required
					name="venue"
					rules={[
						{
							required: true,
							message: "Please input event venue!"
						}
					]}
				>
					<Input type="text" placeholder="Event venue" />
				</Form.Item>

				<Form.Item
					label="Event Dates"
					required
					name="dates"
					rules={[
						{
							required: true,
							message: "Please select event dates!"
						}
					]}
				>
					<RangePicker
						style={{ width: "100%" }}
						disabledDate={disabledDate}
					/>
				</Form.Item>

				<Row gutter={16}>
					<Col span={12}>
						<Form.Item
							label="Start Time"
							required
							name="startTime"
							rules={[
								{
									required: true,
									message: "Please select event timings!"
								}
							]}
						>
							<TimePicker
								use12Hours
								format="h:mm a"
								style={{ width: "100%" }}
							/>
						</Form.Item>
					</Col>
					<Col span={12}>
						<Form.Item
							label="End Time"
							required
							name="endTime"
							rules={[
								{
									required: true,
									message: "Please select event timings!"
								}
							]}
						>
							<TimePicker
								use12Hours
								format="h:mm a"
								style={{ width: "100%" }}
							/>
						</Form.Item>
					</Col>
				</Row>

				<Row gutter={16}>
					<Col span={12}>
						<Form.Item
							valuePropName="checked"
							name="isRegistrationRequired"
						>
							<Checkbox>Is Registration Required?</Checkbox>
						</Form.Item>
					</Col>
					<Col span={12}>
						<Checkbox.Group>
							<Form.Item
								name="isRegistrationCompleted"
								valuePropName="checked"
							>
								<Checkbox>Is Registration Open?</Checkbox>
							</Form.Item>
						</Checkbox.Group>
					</Col>
				</Row>

				<Form.Item
					label="Max Registration"
					name="maxRegister"
					rules={[
						{
							required: true,
							message: "Please enter maximum registrations."
						}
					]}
				>
					<InputNumber min={1} />
				</Form.Item>

				<Form.Item>
					<Button
						type="primary"
						htmlType="submit"
						className="login-form-button"
						loading={isLoading}
					>
						Add Event
					</Button>
				</Form.Item>
			</Form>
			<Modal
				title="Desription Preview"
				visible={isModalVisible}
				footer={null}
				onCancel={() => setIsModalVisible(!isModalVisible)}
			>
				<ReactMarkdown components={renderers}>{mdx}</ReactMarkdown>
			</Modal>
		</>
	);
}

TicketTime = (props) => {
  const [date, setDate] = useState(moment().format("MM/DD/YYYY"));
  const [time, setTime] = useState();
  const [activity, setActivity] = useState("");
  const [log, setLog] = useState([]);

  const format = "HH:mm";

  function onChangeDate(date, dateString) {
    const d = moment(date).format("MM/DD/YYYY");
    setDate(d);
  }

  function onChangeTime(time) {
    const t = time;
    const m = moment(t).format("hh:mm");
    setTime(m);
  }

  async function postData() {
    await fetch(`/api/v1/time/createTime`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: "Bearer " + localStorage.getItem("jwt"),
      },
      body: JSON.stringify({
        ticket: props.ticket._id,
        date,
        time,
        activity,
      }),
    })
      .then((res) => res.json())
      .then((data) => {
        if (data.error) {
          console.log(data.error);
        } else {
          console.log("Congrats it worked");
        }
      });
  }

  async function getLogById() {
    const id = props.ticket._id;
    await fetch(`/api/v1/time/getLog/${id}`, {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        Authorization: "Bearer " + localStorage.getItem("jwt"),
      },
    })
      .then((res) => res.json())
      .then((res) => {
        setLog(res.log);
      });
  }

  async function deleteLog(id) {
    await fetch(`/api/v1/time/deleteLog/${id}`, {
      method: "DELETE",
      headers: {
        "Content-Type": "application/json",
        Authorization: "Bearer " + localStorage.getItem("jwt"),
      },
    })
      .then((res) => res.json())
  }

  useEffect(() => {
    getLogById();
  }, []);

  return (
    <div>
      <div className="ticket-log">
      <DatePicker onChange={onChangeDate} defaultValue={moment} />
        <TimePicker format={format} onChange={onChangeTime} />
        <Input
          style={{ width: 300 }}
          placeholder="Enter activity here"
          onChange={(e) => setActivity(e.target.value)}
        />
        <Button onClick={postData}>
          <EditTwoTone />
        </Button>
      </div>
      <div className="ticket-logs">
        {log.map((log) => {
          return (
            <div key={log._id}>
              <ul>
                <li>
                  <span>{log.date} | </span>
                  <span>{log.time} | </span>
                  <span>{log.user.name} | </span>
                  <span>{log.activity}</span>
                  <Tooltip placement="right" title="Delete">
                    <Button
                      onClick={() => deleteLog(log._id)}
                    >
                      <DeleteTwoTone twoToneColor="#FF0000" />
                    </Button>
                  </Tooltip>
                </li>
              </ul>
            </div>
          );
        })}
      </div>
    </div>
  );
}

render() {
    const { getFieldDecorator } = this.props.form
    const { mode, visible, groupState } = this.state

    return (
        <Modal
    title={mode === 'edit' ? '编辑报警策略' : '添加报警策略'}
    visible={visible}
    onOk={this.handleOk}
    onCancel={this.handleCancel}
    maskClosable={false}
        >
        <Form {...formItemLayout} layout="horizontal" onValuesChange={this.groupChange}>
        <Form.Item label="报警时间段" style={{ marginBottom: 0 }}>
  <Form.Item style={{ display: 'inline-block', width: 'calc(50% - 10px)' }}>
    {getFieldDecorator('start_time', {
      rules: [{ type: 'object', required: true, message: 'Please select time!' }],
    })(<TimePicker style={{ width: '100%' }} format="HH:mm" onChange={this.startTimeChange} />)}
    </Form.Item>
    <span style={{ display: 'inline-block', width: '20px', textAlign: 'center' }}>~</span>
    <Form.Item style={{ display: 'inline-block', width: 'calc(50% - 10px)' }}>
      {getFieldDecorator('end_time', {
        rules: [
          { type: 'object', required: true, message: 'Please select time!' },
          // { validator: this.endTimeValid}
        ],
      })(<TimePicker style={{ width: '100%' }} format="HH:mm" />)}
    </Form.Item>
    </Form.Item>
    <Form.Item label="报警延迟">
        {getFieldDecorator('start', {
      rules: [
        { required: true, message: '请输入报警延迟' },
        { validator: this.delayValid },
      ],
    })(<InputNumber type="number" style={{ width: '100%' }} />)}
    </Form.Item>
    <Form.Item label="报警周期"
      wrapperCol={{
      xs: { span: 24 },
      sm: { span: 16 },
    }}
    >
      {getFieldDecorator('period', {
        rules: [
          { required: true, message: '请输入报警周期' },
          { validator: this.cycleValid },
        ],
      })(<InputNumber type="number" style={{ width: 'calc(100% - 20px)' }} />)}
      <span style={{ width: '20px', display: 'inline-block', textAlign: 'right' }}>分</span>
      </Form.Item>
      <Form.Item label="报警用户">
          {getFieldDecorator('user', {
        rules: [
          { required: groupState.user, message: '请输入报警用户' },
        ],
      })(<DInput onChange={this.groupChange} />)}
      </Form.Item>
      <Form.Item label="值班组">
          {getFieldDecorator('duty_group', {
        rules: [
          { required: groupState.duty_group, message: '请输入报警用户' },
        ],
      })(<DInput onChange={this.groupChange} />)}
      </Form.Item>
      <Form.Item label="报警用户组">
          {getFieldDecorator('group', {
        rules: [
          { required: groupState.group, message: '请输入报警用户组' },
        ],
      })(<DInput onChange={this.groupChange} />)}
      </Form.Item>
      <Form.Item label="Filter表达式">
          {getFieldDecorator('expression', {})(<Input />)}
      </Form.Item>
      <Form.Item label="报警方式">
          {getFieldDecorator('method', {
        initialValue: 'LANXIN',
            rules: [
          { required: true, message: '请输入报警用户组' },
        ],
      })(<Select onChange={this.selectMethod}>
          <Option value="LANXIN">LANXIN</Option>
          <Option value="CALL">CALL</Option>
          <Option value="SMS">SMS</Option>
          <Option value="HOOK">HOOK</Option>
          <Option value="DINGTALK">DINGTALK</Option>
          </Select>)}
          </Form.Item>
        {this.state.method === 'HOOK' ?
        <Form.Item label="HOOK URL">
            {getFieldDecorator('hookurl', {
          // initialValue: hookurl,
          rules: [
            { required: true, message: '请输入HOOK URL' },
          ],
        })(<Input />)}
        </Form.Item> : null
        }
        {this.state.method === 'DINGTALK' ?
        <Form.Item label="钉钉机器人URL">
            {getFieldDecorator('dingtalkUrl', {
          // initialValue: dingtalkUrl,
          rules: [
            { required: true, message: '请输入DINGTALK URL' },
          ],
        })(<Input />)}
        </Form.Item> : null
        }
        {this.state.method === 'DINGTALK' ?
        <Form.Item label="钉钉加签密钥">
            {getFieldDecorator('dingtalkSecret', {
          rules: [
            { required: true, message: '请输入钉钉加签密钥' },
          ],
        })(<Input />)}
        </Form.Item> : null
        }
      </Form>
      </Modal>
      )
      }