import React, { Component } from 'react'
import {
    Button,
    Row,
    Col,
    Form,
    Input,
    DatePicker,
    Radio,
    Table,
    Select,
    Spin,
    TreeSelect,
} from 'antd'
import { AntIcon } from 'components'
import { cloneDeep } from 'lodash'
import getDictData from 'util/dic'
import { EMPTY_ID } from 'util/global'
import { api } from 'common/api'
import moment from 'moment'

const initialValues = {
    sex: 0,
    sysEmpParam: {},
}

export default class form extends Component {
    state = {
        // 加载状态
        loading: true,
        codes: {
            orgType: [],
        },

        options: {
            orgData: [],
            posData: [],
        },
        sysEmpParam: {
            extIds: [],
        },
    }

    // 表单实例
    form = React.createRef()

    // 初始化数据
    record = {}

    /**
     * mount后回调
     */
    componentDidMount() {
        this.props.created && this.props.created(this)
    }

    /**
     * 填充数据
     * 可以在设置this.record之后对其作出数据结构调整
     * [异步,必要]
     * @param {*} params
     */
    async fillData(params) {
        //#region 从后端转换成前段所需格式
        if (params.id) {
            this.record = (await api.sysUserDetail({ id: params.id })).data
        }
        const orgData = await this.loadOrgData()
        const posData = await this.loadPosData()
        const codes = await getDictData('org_type')

        // 日期特殊处理
        if (this.record.birthday) {
            this.record.birthday = moment(this.record.birthday)
        }

        // 提交的时候是"param",而获取下来却是"info",在这里转换一下
        if (this.record.sysEmpInfo) {
            this.record.sysEmpParam = this.record.sysEmpInfo
            delete this.record.sysEmpInfo
        } else if (!this.record.sysEmpParam) {
            this.record.sysEmpParam = {
                extIds: [],
            }
        }

        // 转换职位信息列表
        if (this.record.sysEmpParam.positions) {
            this.record.sysEmpParam.posIdList = this.record.sysEmpParam.positions.map(p => p.posId)
        }

        // 附加信息
        if (this.record.sysEmpParam.extOrgPos) {
            this.record.sysEmpParam.extIds = this.record.sysEmpParam.extOrgPos.map((p, i) => {
                return {
                    key: i,
                    orgId: p.orgId,
                    posId: p.posId,
                }
            })
        }

        if (params.orgId) {
            this.record.sysEmpParam.orgId = params.orgId
        }

        this.setState({
            codes,
            options: {
                ...this.state.options,
                orgData,
                posData,
            },
            sysEmpParam: {
                ...this.record.sysEmpParam,
            },
        })

        this.record = {
            ...this.record,
        }
        //#endregion
        this.form.current.setFieldsValue(this.record)

        this.setState({
            loading: false,
        })
    }

    /**
     * 获取数据
     * 可以对postData进行数据结构调整
     * [异步,必要]
     * @returns
     */
    async getData() {
        const form = this.form.current

        const valid = await form.validateFields()
        if (valid) {
            const postData = form.getFieldsValue()
            if (this.record) {
                postData.id = this.record.id
            }
            //#region 从前段转换后端所需格式
            //#endregion
            return postData
        }
    }

    //#region 自定义方法
    async loadOrgData() {
        const { data } = await api.getOrgTree()
        return data
    }
    async loadPosData() {
        const { data } = await api.sysPosList()
        return data
    }
    //#endregion

    render() {
        return (
            <Form initialValues={initialValues} ref={this.form} className="yo-form">
                <Spin spinning={this.state.loading} indicator={<AntIcon type="loading" />}>
                    <h3 className="h3">基本信息</h3>
                    <div className="yo-form-group">
                        <Form.Item
                            label="账号"
                            name="account"
                            rules={[{ required: true, message: '请输入账号', trigger: 'blur' }]}
                        >
                            <Input autoComplete="off" placeholder="请输入账号" />
                        </Form.Item>
                        <Form.Item
                            label="姓名"
                            name="name"
                            rules={[{ required: true, message: '请输入姓名', trigger: 'blur' }]}
                        >
                            <Input autoComplete="off" placeholder="请输入姓名" />
                        </Form.Item>
                        <Form.Item label="昵称" name="nickName">
                            <Input autoComplete="off" placeholder="请输入昵称" />
                        </Form.Item>
                        <Form.Item label="生日" name="birthday">
                            <DatePicker className="w-100-p" />
                        </Form.Item>
                        <Form.Item label="性别" name="sex">
                            <Radio.Group>
                                <Radio.Button value={0}>
                                    <AntIcon className="mr-xxs" type="stop" />
                                    <span>保密</span>
                                </Radio.Button>
                                <Radio.Button value={1}>
                                    <AntIcon
                                        style={{ color: '#1890ff' }}
                                        className="mr-xxs"
                                        type="man"
                                    />
                                    <span>男</span>
                                </Radio.Button>
                                <Radio.Button value={2}>
                                    <AntIcon
                                        style={{ color: '#eb2f96' }}
                                        className="mr-xxs"
                                        type="woman"
                                    />
                                    <span>女</span>
                                </Radio.Button>
                            </Radio.Group>
                        </Form.Item>
                        <Form.Item
                            label="邮箱"
                            name="email"
                            rules={[
                                {
                                    pattern: /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/,
                                    message: '邮箱格式不正确',
                                    trigger: 'blur',
                                },
                            ]}
                        >
                            <Input autoComplete="off" placeholder="请输入邮箱" />
                        </Form.Item>
                        <Form.Item
                            label="手机号"
                            name="phone"
                            rules={[
                                {
                                    pattern:
                                        /^((13[0-9])|(14[5,7])|(15[^4,\\D])|(17[0,1,3,6-8])|(18[0-9])|(19[8,9])|(166))[0-9]{8}$/,
                                    message: '手机号格式不正确',
                                    trigger: 'blur',
                                },
                            ]}
                        >
                            <Input autoComplete="off" placeholder="请输入手机号" />
                        </Form.Item>
                        <Form.Item label="电话" name="tel">
                            <Input autoComplete="off" placeholder="请输入电话" />
                        </Form.Item>
                    </div>
                    <h3 className="h3">员工信息</h3>
                    <div className="yo-form-group">
                        <Form.Item
                            label="所属组织机构"
                            name={['sysEmpParam', 'orgId']}
                            rules={[{ required: true, message: '所属组织机构' }]}
                        >
                            <TreeSelect
                                treeData={this.state.options.orgData}
                                dropdownStyle={{ maxHeight: '300px', overflow: 'auto' }}
                                treeDefaultExpandAll
                                placeholder="请选择所属组织机构"
                            />
                        </Form.Item>
                        <Form.Item label="工号" name={['sysEmpParam', 'jobNum']}>
                            <Input autoComplete="off" placeholder="请输入工号" />
                        </Form.Item>
                        <Form.Item label="职位信息" name={['sysEmpParam', 'posIdList']}>
                            <Select mode="multiple" placeholder="请选择职位信息">
                                {this.state.options.posData.map(item => {
                                    return (
                                        <Select.Option key={item.id} value={item.id}>
                                            {item.name}
                                        </Select.Option>
                                    )
                                })}
                            </Select>
                        </Form.Item>
                    </div>
                </Spin>
            </Form>
        )
    }
}
