import React, { useEffect, useState } from 'react'
import { Form, InputNumber } from 'antd'
import { fetch, apis } from '@/utils/request'
import CommEditor from '@/components/CommEditor';
import ImageUpload from '@/components/XForm/ImageUpload'
import { get } from 'lodash';

const getData = fetch(apis.shop.banner.detail)
const saveData = fetch(apis.shop.banner.save)
const updateData = fetch(apis.shop.banner.update)

const buildForm = props => {
  const { getFieldDecorator } = props.form

  return (
    <>
      <Form.Item label="Banner" help="建议图片尺寸：750*600px，比例5:4,格式：jpg" >
        {getFieldDecorator('thumb', {
          rules: [{ required: true, message: '请上传Banner' }],
        })(
          <ImageUpload />,
        )}
      </Form.Item>
      <Form.Item label="排序">
        {getFieldDecorator('sortNo')(<InputNumber min={0} />)}
      </Form.Item>
    </>
  )
}

export default props => {
  const { id } = (props.location || {}).query || {}
  
  return (
    <CommEditor
      dataId={id}
      record={props.record}
      mode={props.mode}
      dateKey={x => x.serialNo}
      render={buildForm}
      fetchAPI={getData}
      saveAPI={saveData}
      updateAPI={updateData}
      onCancel={props.onCancel}
      onSuccess={props.onSuccess}
      onError={props.onError}
      showHeader={false}
    />
  )
}
