import React, { useRef, useState, useEffect } from 'react'
import { Button, Form } from 'antd'
import { connect } from 'react-redux'
import { InfoCircleOutlined } from '@ant-design/icons'
import { ModalForm, ProFormSelect, ProFormText, ProFormDatePicker, ProFormTextArea,ProForm  } from '@ant-design/pro-form'
import moment from 'moment'
import Uploads from '$components/Uploads'

function AddAdvisoryNoticeModal(props) {
  const {
    title,
    triggerRender,
    editData = null,
    onFinish,
    devices,
    actions,
    dispatch,
    disabled,
  } = props
  const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 16 } }
  const initialValues = editData ? { ...editData } : {}
  const [form] = Form.useForm()
  const formRef = useRef()

  return (
    <ModalForm
    width={500}
      formRef={formRef}
      title={title || ''}
      initialValues={initialValues}
      trigger={triggerRender ? triggerRender : <Button type='primary'>{title || ''}</Button>}
      layout='horizontal'
      grid={true}
      {...formItemLayout}
      modalProps={{
        destroyOnClose: true,
        onCancel: () => {},
      }}
      onFinish={async values => {
        let value = {
          title: values?.title,
          content: values?.content,
          id: initialValues ? initialValues.id : null,
          attachments:values?.attachments?.length?
          values?.attachments[0]?.name ? values?.attachments.map(u => u.storageUrl) : editData?.attachments:[],
        }
        if(disabled){
          return true
        }
        return onFinish && (await onFinish(value))
        // return true;
      }}>
      <ProFormText
        rules={[{ required: true, message: '资讯标题' }]}
        placeholder='请输入资讯标题'
        name='title'
        label='资讯标题'
        disabled={disabled ? true : false}
      />
      <ProFormTextArea
        rules={[{ required: true, message: '咨讯内容' }]}
        placeholder='请输入咨讯内容'
        name='content'
        label='咨讯内容'
        disabled={disabled ? true : false}
      />
    <div className='ant-col ant-col-xs-24'>
    <Form.Item
        label='文件:'
        name='attachments'
        //  rules={[{ required: true, message: '请添加附件！' }]}
        disabled={disabled ? true : false}>
        <Uploads
          disabled={disabled ? true : false}
          listType='picture-card'
          uploadType='project'
          maxFilesNum={10}
          maxFileSize={10}
          isQiniu={true}
          // disabled={true}
          fileTypes={['png', 'jpg']}
          defaultValue={(() => {
            let nextV = []
            for (let s of editData?.attachments || []) {
              if (s) {
                nextV.push({
                  storageUrl: s,
                })
              }
            }
            return nextV
          })()}
        />
      </Form.Item>
    </div>
    </ModalForm>
  )
}
function mapStateToProps(state) {
  const { auth, global, device } = state
  return {
    loading: device.isRequesting,
    clientHeight: global.clientHeight,
    actions: global.actions,
  }
}

export default connect(mapStateToProps)(AddAdvisoryNoticeModal)