import React, { useEffect, useState } from 'react'
import { Form, Modal, Button, Input, InputNumber, Select, Radio } from 'antd'
import { fetch, apis } from '@/utils/request'
import MiniAppMedia from './MiniAppMedia'

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 6 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 12 },
  },
}

const tailFormItemLayout = {
  wrapperCol: {
    xs: {
      span: 24,
      offset: 0,
    },
    sm: {
      span: 16,
      offset: 6,
    },
  },
}

export default Form.create()(props => {
  const handleMiniAppChange = vals => {
    setDetailData({
      ...props.value,
      miniappMedia: vals.mediaId,
      miniappUrl: vals.url
    })
  }

  useEffect(() => {
    props.form.setFieldsValue(props.value)
  }, [props.value])

  return (
    <div>
      <Form {...formItemLayout}>
        {/* <Form.Item label="名称">
          {
            props.form.getFieldDecorator('name')(<Input placeholder="请填写名称" readOnly />)
          }
        </Form.Item> */}
        <Form.Item label="APPID">
          {
            props.form.getFieldDecorator('appid')(<Input placeholder="请填写 APPID" readOnly />)
          }
        </Form.Item>
        <Form.Item label="SECRET">
          {
            props.form.getFieldDecorator('secret')(<Input placeholder="请填写 SECRET" readOnly />)
          }
        </Form.Item>
        <Form.Item label="TOKEN">
          {
            props.form.getFieldDecorator('token')(<Input placeholder="请填写 TOKEN" readOnly />)
          }
        </Form.Item>
        <Form.Item label="AES_KEY">
          {
            props.form.getFieldDecorator('aesKey')(<Input placeholder="请填写 AES_KEY" readOnly />)
          }
        </Form.Item>
        <Form.Item label="小程序封面" help="仅支持JPG图片,建议大小为520*416">
          <div>
            {props.value.miniappMedia && <span style={{display: 'inline-block', marginRight: '24px'}}>{props.value.miniappMedia}</span>}
            {/* <MiniAppMedia onChange={handleMiniAppChange} /> */}
          </div>
        </Form.Item>
      </Form>
    </div>
  )
})
