import { useState, useEffect } from 'react'
import { Col, DatePicker, Form, Input, Modal, Row, Select } from 'antd'
import SelectDeptTree from '@/components/SelectDeptTree'
import SelectOrganTree from '@/components/SelectOrganTree'
import datadictionary from '@/utils/dataDictionary'
import { formatDictOptions, verifyPhone } from '@/utils/globalCommon'
import { NumberInput } from '@/components/NumberInput'
import styles from '../StaffSheetList.less'
import style from '@/global.less'
import dayjs from 'dayjs'
import { formatDate } from '@/utils/formatUtils'

const { Item: FormItem } = Form
const { TextArea } = Input
const dictData = datadictionary

//新增表单
let getDeptTreeBySelectTree
let getOrganTreeBySelectTree

const StaffSheetCreateForm = (props => {
    const [form] = Form.useForm()
    const [jobStatus, setJobStatus] = useState('1')

    const {
        modalVisible,
        handleAdd,
        handleModalVisible,
        loading,
        dispatch,
        selectDeptTree,
        selectOrganTree
    } = props

    useEffect(() => {
        form.setFieldsValue({
            user_type: 'employee',
            job_status: '1',
            mgr_type: '0'
        })
    }, [])

    const selectedDeptTreeValue = (deptRecord) => {
        getDeptTreeBySelectTree = deptRecord
    }

    const selectedOrganTreeValue = (orgRecord) => {
        getOrganTreeBySelectTree = orgRecord
    }

    const parentDeptTreeMethod = {
        dispatch: dispatch,
        selectDeptTree: selectDeptTree,
        selectedDeptTreeValue: selectedDeptTreeValue,
    }

    const parentOrganTreeMethod = {
        dispatch: dispatch,
        selectOrganTree: selectOrganTree,
        selectedOrganTreeValue: selectedOrganTreeValue
    }

    const okHandle = () => {
        form.validateFields()
            .then(fieldsValue => {
                form.resetFields()
                fieldsValue.birthday = formatDate(fieldsValue.birthday, 'YYYY-MM-DD')
                fieldsValue.hiredate = formatDate(fieldsValue.hiredate, 'YYYY-MM-DD')
                fieldsValue.departure_time = formatDate(fieldsValue.departure_time, 'YYYY-MM-DD')
                fieldsValue.posts = fieldsValue.posts ? JSON.stringify(fieldsValue.posts) : null

                // if (getDeptTreeBySelectTree) {
                //     fieldsValue.dept_code = getDeptTreeBySelectTree.dept_code
                //     fieldsValue.dept_name = getDeptTreeBySelectTree.title
                // }

                if (getOrganTreeBySelectTree) {
                    fieldsValue.org_code = getOrganTreeBySelectTree.org_code
                    fieldsValue.org_name = getOrganTreeBySelectTree.title
                }

                handleAdd(fieldsValue)
            })
            .catch(errInfo => {})
    }

    const afterClose = () =>{
        form.resetFields();
    }

    const handleJobStatusChange = (value) => {
        setJobStatus(value)
    }

    return (
        <Modal
            width={800}
            height={550}
            bodyStyle={{ height: '500px', overflowY: 'auto' }}
            className={style.createForm}
            centered
            destroyOnClose
            title='新增'
            open={modalVisible}
            onOk={okHandle}
            onCancel={() => handleModalVisible()}
            afterClose={() => afterClose()}
            confirmLoading={loading}
        >
            <Form form={form} layout='vertical' requiredMark={false}>
                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                    <Col md={12} sm={24}>
                        <FormItem label='登录账号' name='user_name' rules={[{ required: true, message: '请输入至少2个字符的用户名！', min: 2 }]}>
                            <Input placeholder='请输入' />
                        </FormItem>
                    </Col>

                    <Col md={12} sm={24}>
                        <FormItem label='用户名称' name='user_name_cn' rules={[{ required: true, message: '请输入至少2个字符的用户名称！', min: 2 }]}>
                            <Input placeholder='请输入' />
                        </FormItem>
                    </Col>
                </Row>

                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                    <Col md={12} sm={24}>
                        <FormItem label='用户性别' name='sex'>
                            <Select options={formatDictOptions(dictData.sys_user_sex, 'dict_label', 'dict_value')} placeholder='请选择' />
                        </FormItem>
                    </Col>

                    <Col md={12} sm={24}>
                        <FormItem label='用户生日' name='birthday'>
                            <DatePicker format='YYYY-MM-DD' placeholder='请选择' />
                        </FormItem>
                    </Col>
                </Row>

                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                    <Col md={12} sm={24}>
                        <FormItem label='手机号码' name='phone' rules={[{ required: false, min: 1, validator: verifyPhone }]}>
                            <NumberInput placeholder='请输入' style={{width: '100%'}} maxLength={11} />
                        </FormItem>
                    </Col>

                    <Col md={12} sm={24}>
                        <FormItem label='电子邮箱' name='email' rules={[{ type: 'email' }]}>
                            <Input placeholder='请输入' />
                        </FormItem>
                    </Col>
                </Row>

                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                    <Col md={12} sm={24}>
                        <FormItem label='机构名称' name='org_code'>
                            <SelectOrganTree {...parentOrganTreeMethod} />
                        </FormItem>
                    </Col>

                    {/*<Col md={12} sm={24}>*/}
                    {/*    <FormItem label='部门名称' name='dept_code'>*/}
                    {/*        <SelectDeptTree {...parentDeptTreeMethod} placeholder={'请选择部门'} />*/}
                    {/*    </FormItem>*/}
                    {/*</Col>*/}

                    <Col md={12} sm={24}>
                        <FormItem label='所属岗位' name='posts'>
                            <Select
                                mode='multiple'
                                allowClear
                                placeholder='请选择'
                                options={formatDictOptions(dictData.sys_user_post, 'dict_label', 'dict_value')}
                            />
                        </FormItem>
                    </Col>
                </Row>

                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                    {/*<Col md={12} sm={24}>
                        <FormItem
                            label={
                                <span>
                                    密码
                                    <em className={styles.optional}>
                                      <Tooltip title='默认密码：123456'>
                                        <InfoCircleOutlined style={{ marginLeft: 4 }} />
                                      </Tooltip>
                                    </em>
                                </span>
                            }
                            name='password'
                            initialValue={'123456'}
                            rules={[{required: true, message: '请输入至少6个字符的密码！', min: 6}]}>
                            <Input placeholder='请输入' type='password'/>
                        </FormItem>
                    </Col>*/}

                    <Col md={12} sm={24}>
                        <FormItem label='在职状态' name='job_status'>
                            <Select
                                placeholder='请选择'
                                options={formatDictOptions(dictData.sys_job_status, 'dict_label', 'dict_value')}
                                onChange={handleJobStatusChange}
                            />
                        </FormItem>
                    </Col>

                    {jobStatus === '1' ?
                        <Col md={12} sm={24}>
                            <FormItem label='入职时间' name='hiredate' initialValue={dayjs().endOf('day')}>
                                <DatePicker format='YYYY-MM-DD' placeholder='请选择' />
                            </FormItem>
                        </Col>
                        :
                        <Col md={12} sm={24}>
                            <FormItem label='离职时间' name='departure_time'>
                                <DatePicker format='YYYY-MM-DD' placeholder='请选择' />
                            </FormItem>
                        </Col>
                    }
                </Row>

                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>

                    <Col md={12} sm={24}>
                        <FormItem label='员工类型' name='user_type'>
                            <Select
                                placeholder='请选择'
                                options={formatDictOptions(dictData.sys_user_type, 'dict_label', 'dict_value')}
                            />
                        </FormItem>
                    </Col>

                    <Col md={12} sm={24}>
                        <FormItem label='员工工号' name='emp_no'>
                            <Input placeholder='请输入' />
                        </FormItem>
                    </Col>
                </Row>

                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                    <Col md={12} sm={24}>
                        <FormItem label='门禁卡号' name='access_card_no'>
                            <Input placeholder='请输入' />
                        </FormItem>
                    </Col>

                    <Col md={12} sm={24}>
                        <FormItem label='是否是管理员' name='mgr_type'>
                            <Select
                                style={{width: '100%'}}
                                placeholder='请选择'
                                options={formatDictOptions(dictData.sys_mgr_type, 'dict_label', 'dict_value')}
                            />
                        </FormItem>
                    </Col>
                </Row>

                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                    <Col md={24} sm={24}>
                        <FormItem label='备注' name='remarks'>
                            <TextArea rows={4} />
                        </FormItem>
                    </Col>
                </Row>
            </Form>
        </Modal>
    )
})

export default StaffSheetCreateForm
