import React, { useState, useRef, useEffect } from "react";
import { connect } from "react-redux";
import { Modal, Form } from "@douyinfe/semi-ui";
import { IconAlertCircle } from '@douyinfe/semi-icons';


function FileModal (props) {
   const { close, success, dispatch, actions, editData, pepProjectId, higherFile } = props;
   const { means } = actions;
   const form = useRef();//表单


   return (
      <>
         <Modal
            title={editData?.id ? '编辑文件夹' : '新建文件夹'}
            okText="确定"
            cancelText="取消"
            visible={true}
            onOk={() => {
               form.current.validate().then((v) => {
                  dispatch(means.addEditFile({
                     id: editData?.id,
                     projectId: pepProjectId,
                     fileName: v.fileName,
                     higherFileId: editData?.higherFileId || v.higherFileId || null,
                     type: 1
                  })).then(v => {
                     if (v.success) {
                        close()
                        success()
                     }
                  })
               })
            }}
            width={607}
            onCancel={() => {
               close()
            }}
         >
            <div style={{ margin: "0px 25px" }}>
               <Form
                  allowEmpty
                  labelPosition="left"
                  labelAlign="right"
                  labelWidth="100px"
                  getFormApi={(formApi) => (form.current = formApi)}
               >

                  <Form.Input
                     field='fileName'
                     label='文件夹名称'
                     rules={[{ required: true, message: "请输入文件夹名称,最多20个字", max: 20 }]}
                     initValue={editData?.fileName}
                  />

                  {editData?.id ? "" : <Form.Select
                     field="higherFileId"
                     label='上级文件夹'
                     style={{ width: '100%' }}
                  >
                     {higherFile?.map((item, index) => (
                        <Form.Select.Option key={index} value={item.value}>
                           {item.name}
                        </Form.Select.Option>
                     ))}
                  </Form.Select>}


               </Form>
            </div>
         </Modal>
      </>
   );
}
function mapStateToProps (state) {
   const { auth, global, members } = state;
   return {
      //   loading: members.isRequesting,
      user: auth.user,
      actions: global.actions,
      //   members: members.data,
   };
}

export default connect(mapStateToProps)(FileModal);
