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: [],
        },
    }
    extColumns = [
        {
            title: '附属机构',
            dataIndex: 'orgId',
            width: '45%',
            render: (text, record, index) => (
                <Form.Item name={['sysEmpParam', 'extIds', index, 'orgId']}>
                    <TreeSelect
                        defaultValue={text}
                        treeData={this.state.options.orgData}
                        className="w-100-p"
                        dropdownStyle={{ maxHeight: '300px', overflow: 'auto' }}
                        treeDefaultExpandAll
                        placeholder="请选择附加组织机构"
                    />
                </Form.Item>
            ),
        },
        {
            title: '附属岗位',
            dataIndex: 'posId',
            width: '45%',
            render: (text, record, index) => (
                <Form.Item name={['sysEmpParam', 'extIds', index, 'posId']}>
                    <Select
                        defaultValue={text}
                        className="w-100-p"
                        placeholder="请选择附加职位信息"
                    >
                        {this.state.options.posData.map(item => {
                            return (
                                <Select.Option key={item.id} value={item.id}>
                                    {item.name}
                                </Select.Option>
                            )
                        })}
                    </Select>
                </Form.Item>
            ),
        },
        {
            title: '操作',
            key: 'action',
            width: '70px',
            render: (text, record) => (
                <Button onClick={() => this.onRemoveExtData(record)} size="small" danger>
                    删除
                </Button>
            ),
        },
    ]
    // 表单实例
    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 从前段转换后端所需格式
            console.log(postData)
            //#endregion
            return postData
        }
    }

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

        const record = {
            key: extIds.length > 0 ? extIds[extIds.length - 1].key + 1 : 0,
            orgId: undefined,
            posId: undefined,
        }

        this.setState(
            {
                sysEmpParam: {
                    extIds: [...extIds, record],
                },
            },
            () => {
                console.log(this.form.current.getFieldsValue())
            }
        )
    }
    onRemoveExtData(record) {
        const ext = this.state.sysEmpParam.extIds,
            remove = ext.find(p => p.key === record.key),
            index = ext.indexOf(remove)

        ext.splice(index, 1)
        console.log(ext)

        // this.form.current.setFieldsValue({
        //     sysEmpParam: {
        //         extIds: {}
        //     }
        // })

        this.setState(
            {
                sysEmpParam: {
                    extIds: ext,
                },
            },
            () => {
                //console.log(this.form.current.getFieldsValue())
            }
        )
    }
    //#endregion
    renderExtInfoTable() {
        //console.log(this.state.sysEmpParam.extIds)
        return (
            <Table
                dataSource={this.state.sysEmpParam.extIds}
                columns={this.extColumns}
                pagination={false}
                size="small"
                bordered
                rowKey={record => record.key}
                footer={() => (
                    <Button
                        block
                        icon={<AntIcon type="plus" />}
                        type="dashed"
                        onClick={() => this.onAddExtData()}
                    >
                        新增一项
                    </Button>
                )}
            ></Table>
        )
    }

    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>
                        {/* {this.props.mode == 'add' && (
                            <>
                                <Form.Item
                                    label="密码"
                                    name="password"
                                    rules={[
                                        { required: true, message: '请输入密码', trigger: 'blur' },
                                    ]}
                                >
                                    <Input.Password autoComplete="off" placeholder="请输入密码" />
                                </Form.Item>
                                <Form.Item
                                    label="确认密码"
                                    name="confirm"
                                    rules={[
                                        { required: true, message: '请确认密码', trigger: 'blur' },
                                    ]}
                                >
                                    <Input.Password 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>
                    {/* <h4 className="h4">附加信息</h4>
                            <div className="pl-md pr-md">
                                {this.renderExtInfoTable()}
                            </div> */}
                </Spin>
            </Form>
        )
    }
}