import { getSetting } from '@/services/api/system'
import { useRequest } from 'umi'
import { PageContainer } from '@ant-design/pro-layout'
import { Card, Form, Input, Button, Upload } from 'antd'
import { UploadOutlined } from '@ant-design/icons'
import React, { useEffect, useState } from 'react'

const Setting = () => {
  const [state, setState] = useState({
    contentValue: ''
  })
  const [form] = Form.useForm()

  const { run: tryGetSetting } = useRequest(
    () => {
      return getSetting()
    },
    {
      manual: true,
      onSuccess: (result: API.GetSettingParams) => {
        setState({ ...state, contentVlue: result })
        form.current?.setFieldsValue({ name: result.name, backstageName: result.backstageName })
      }
    }
  )

  useEffect(() => {
    tryGetSetting()
    form.current?.setFieldsValue(...state.contentValue)
  }, [])

  return (
    <PageContainer title={false}>
      <Card>
        <div className="text-2xl mb-7">系统设置</div>
        <Form
          labelCol={{ span: 2 }}
          wrapperCol={{ span: 8 }}
          layout="horizontal"
          form={form}
          // initialValues={{ name: 'admin' }}
          onFinish={async values => {
            console.log(values)
          }}>
          <Form.Item label="系统名称" name="name">
            <Input />
          </Form.Item>
          <Form.Item
            name="logo"
            label="系统LOGO"
            valuePropName="logo"
            // getValueFromEvent={normFile}
            // extra="大小"
          >
            <Upload name="logo" action="/upload.do" listType="picture">
              <Button icon={<UploadOutlined />}>上传</Button>
            </Upload>
          </Form.Item>
          <Form.Item label="后台名称" name="backstageName">
            <Input />
          </Form.Item>
          <Form.Item
            name="backstageLogo"
            label="后台LOGO"
            valuePropName="backstageLogo"
            // getValueFromEvent={normFile}
            // extra="大小"
          >
            <Upload name="logo" action="/upload.do" listType="picture">
              <Button icon={<UploadOutlined />}>上传</Button>
            </Upload>
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 2, span: 8 }}>
            <Button type="primary" htmlType="submit">
              确认
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </PageContainer>
  )
}

export default Setting