import React, { useEffect, useState } from 'react'
import { Form, Input, Button, Radio, InputNumber, notification, Select } from 'antd'
import router from 'umi/router'
import { fetch, apis } from '@/utils/request'
import ImageUpload from '@/components/uploadImage/ImageUpload'
import EditableTagGroup from '@/components/EditableTagGroup'

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,
    },
  },
}

const getDetail = fetch(apis.ticket.repairType.getDetail)
const saveType = fetch(apis.ticket.repairType.saveType)
const updateType = fetch(apis.ticket.repairType.updateType)

export default Form.create()(props => {
  const [loading, setLoading] = useState(false)
  const [detailData, setDetailData] = useState({})

  const { id } = props.location.query
  
  const handleSubmit = e => {
    // e.preventDefault();
    props.form.validateFields((err, values) => {
      if (!err) {
        setLoading(true)
        if (id) {
          const data = {
            ...(detailData || {}),
            ...values,
          }
          updateType({data, urlData: {id}}).then(res => {
            notification.success({ message: "修改内容成功" })
            setLoading(false)
          }).catch(err => {
            setLoading(false)
          })
        } else {
          saveType({data: values}).then(res => {
            notification.success({ message: "保存内容成功" })
            setLoading(false)
            router.go(-1)
          }).catch(err => {
            setLoading(false)
          })
        }
      }
    });
  }

  useEffect(() => {
    if (id) {
      getDetail({urlData: {id}}).then(res => {
        setDetailData(res)
        props.form.setFieldsValue(res)
      })
    }
  }, [id])
  
  return (
    <div>
      <Form {...formItemLayout} onSubmit={e => e.preventDefault()}>
        <Form.Item label="名称">
          {
            props.form.getFieldDecorator('typeName', {
              rules: [
                { required: true, message: '请填写名称' },
              ],
            })(<Input placeholder="名称" />)
          }
        </Form.Item>
        <Form.Item label="图标">
          {
            props.form.getFieldDecorator('icon')(<ImageUpload />)
          }
        </Form.Item>
        <Form.Item label="说明">
          {
            props.form.getFieldDecorator('desc')(<Input placeholder="说明" />)
          }
        </Form.Item>
        <Form.Item label="快捷提问">
          {
            props.form.getFieldDecorator('tags')(<EditableTagGroup />)
          }
        </Form.Item>
        <Form.Item label="排序">
          {
            props.form.getFieldDecorator('sortNum')(<InputNumber min={1} />)
          }
        </Form.Item>
        <Form.Item label="状态">
          {
            props.form.getFieldDecorator('status')(
              <Radio.Group>
                <Radio value={0}>未发布</Radio>
                <Radio value={1}>已发布</Radio>
              </Radio.Group>
            )
          }
        </Form.Item>
        <Form.Item {...tailFormItemLayout} >
          <Button loading={loading} type="primary" onClick={handleSubmit}>提交</Button>
          <Button style={{ marginLeft: '24px' }} onClick={() => router.go(-1)}>取消</Button>
        </Form.Item>
      </Form>
    </div>
  )
})
