// 菜单明细from页面
import React from 'react';
import PropTypes from 'prop-types';
import { Drawer, Form, Input, Row, Col, Button, message, Switch, Select } from 'antd';
import { $http } from 'containers/config/https';
import { Util } from 'tools';

const FormItem = Form.Item;
const { TextArea } = Input;

const DetailFormHandel = Form.create()(
    class extends React.Component {
        constructor() {
            super();
            this.state = {
                visible: false,
                userInfo: {},
                productCatSelectData: [],
                productModuleSelectData: []
            };
            this.myRef1 = React.createRef();
        }

        componentDidUpdate() {
            if (this.state.visible === true) {
                Util.changeEnter(this.myRef1)
            }
        }

        static getDerivedStateFromProps(nextProps, prevState) {
            if (JSON.stringify(nextProps.userInfo) !== JSON.stringify(prevState.userInfo)) {
                return {
                    userInfo: nextProps.userInfo
                }
            }
            if (JSON.stringify(nextProps.productCatSelectData) !== JSON.stringify(prevState.productCatSelectData)) {
                return {
                    productCatSelectData: nextProps.productCatSelectData
                }
            }
            return null
        }

        componentDidUpdate(prevState) {
            if (JSON.stringify(prevState.userInfo) !== JSON.stringify(this.state.userInfo)) {
                this.getProductModuleSelectData(this.state.userInfo?.ProductCatDr);
            }
        }

        componentDidMount() {
            this.props.onRef(this);
        }

        // 打开抽屉
        showDrawer = () => {
            this.setState({
                visible: true,
            });
        };

        // 关闭抽屉
        onClose = () => {
            this.setState({
                visible: false,
            }, () => {
                // 如果为编辑，则关闭后清除表单
                if (this.props.flag === 'compile') {
                    this.props.handelThis.resetUserInfo();
                    this.resetFields()
                }
            });
        };

        // 重置表单
        resetFields() {
            // console.log("触发了")
            this.props.form.resetFields(); //清空所有
        }

        handelFunction(code, msg) {
            const { form: { validateFields } } = this.props;
            validateFields((errors, values) => {
                // 验证成功
                if (errors === null) {
                    let data = {
                        params: []
                    }
                    let obj = JSON.parse(JSON.stringify(values));
                    obj.UpdateUserDr = this.props.flag === 'add' ? 1 : this.props.userInfo.UpdateUserDr;
                    if (this.props.flag === 'compile') {
                        obj.ID = this.props.userInfo.ID
                    }
                    if (obj.MenuGroup === true) {
                        obj.MenuGroup = 'Y'
                    } else {
                        obj.MenuGroup = 'N'
                    }
                    if (obj.ClickRateFlag === true) {
                        obj.ClickRateFlag = 'Y'
                    } else {
                        obj.ClickRateFlag = 'N'
                    }
                    // 处理需要传递的obj
                    data.params.push(Util.disposeData(obj));
                    $http.post('urlADS', this, {
                        code: code,
                        data: data,
                        success: function (res) {
                            if (+res.errorCode === 0) {
                                // 关闭抽屉
                                this.onClose();
                                // 提示
                                message.success(msg + '成功');
                                // 刷新列表数据
                                this.props.handelThis.handleQuery();
                                // 新增或编辑成功重置form表单
                                this.resetFields();
                            } else {
                                if (this.props.flag === 'compile') {
                                    // 编辑可能失败，但还是需要重置表单
                                    this.resetFields();
                                }
                            }
                        },
                        error: function () {
                            if (this.props.flag === 'compile') {
                                // 编辑可能失败，但还是需要重置表单
                                this.resetFields();
                            }
                        }
                    })
                }
            });
        }

        // 保存
        handelSave = () => {
            let { flag } = this.props;
            if (flag === 'add') {
                this.handelFunction('2302', '新增')
            } else if (flag === 'compile') {
                this.handelFunction('2303', '编辑')
            }
        }

        // 获取产品模块字典数据
        getProductModuleSelectData = async (e, type) => {
            try {
                if (!e) return;
                let data = {
                    params: [{
                        productCatID: e
                    }]
                };
                let res = await React.$asyncPost(this, '2309', data);
                this.setState({ productModuleSelectData: res.result }, () => {
                    type === 'change' && this.props.form.setFieldsValue({ productModuleID: undefined });
                });
            } catch (error) {
                this.setState({ productModuleSelectData: {} });
            }
        }

        render() {
            const { productCatSelectData, productModuleSelectData, userInfo } = this.state;
            const { getFieldDecorator } = this.props.form;

            return (
                <Drawer
                    title={this.props.title + "菜单明细"}
                    width={720}
                    onClose={this.onClose}
                    visible={this.state.visible}
                >
                    <Form layout="vertical">
                        <Row gutter={16}>
                            <Col span={12}>
                                <FormItem label="代码">
                                    {getFieldDecorator('Code', {
                                        initialValue: userInfo?.Code || undefined,
                                        rules: [{ required: true, message: '代码不能为空' }],
                                    })(
                                        <Input placeholder="请输入代码" className='input' autoFocus />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="描述">
                                    {getFieldDecorator('Descripts', {
                                        initialValue: userInfo?.Descripts || undefined,
                                        rules: [{ required: true, message: '描述不能为空' }],
                                    })(
                                        <Input placeholder="请输入描述" className='input' />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row gutter={16}>
                            <Col span={12}>
                                <FormItem label="英文描述">
                                    {getFieldDecorator('ENDesc', {
                                        initialValue: userInfo?.ENDesc || undefined,
                                    })(
                                        <Input placeholder="请输入英文描述" className='input' />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="顺序号">
                                    {getFieldDecorator('SeqNo', {
                                        initialValue: userInfo?.SeqNo || undefined,
                                    })(
                                        <Input type="number" className="input input-number" placeholder="请输入顺序号" />
                                    )}
                                </FormItem>
                            </Col>

                        </Row>
                        <Row gutter={16}>
                            <Col span={12}>
                                <FormItem label="链接地址">
                                    {getFieldDecorator('LinkAddress', {
                                        initialValue: userInfo?.LinkAddress || undefined,
                                    })(
                                        <Input placeholder="请输入链接地址" className='input' />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="提示信息">
                                    {getFieldDecorator('Tooltip', {
                                        initialValue: userInfo?.Tooltip || undefined,
                                    })(
                                        <Input placeholder="请输入提示信息" className='input' />
                                    )}
                                </FormItem>
                            </Col>
                            {/* <Col span={12}>
                        <FormItem label="链接目录">
                            {getFieldDecorator('LinkPath', {
                                initialValue:userInfo.LinkPath,
                                rules: [{ required: true, message: '链接目录不能为空' }],
                            })(
                                <Input placeholder="请输入链接目录" className='input' />
                            )}
                        </FormItem>
                    </Col> */}
                        </Row>
                        <Row gutter={16}>
                            <Col span={12}>
                                <FormItem label="图片地址">
                                    {getFieldDecorator('Image', {
                                        initialValue: userInfo?.Image || undefined,
                                    })(
                                        <Input placeholder="请输入" className='input' />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="tab主菜单id">
                                    {getFieldDecorator('MainMenuDr', {
                                        initialValue: userInfo?.MainMenuDr || undefined,
                                    })(
                                        <Input placeholder="请输入tab主菜单id" className='input' />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row gutter={16}>
                            <Col span={12}>
                                <FormItem label="快捷键">
                                    {getFieldDecorator('ShortcutKey', {
                                        initialValue: userInfo?.ShortcutKey || undefined,
                                    })(
                                        <Input placeholder="请输入快捷键" className='input' />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="弹窗位置">
                                    {getFieldDecorator('WinPosition', {
                                        initialValue: userInfo?.WinPosition || undefined,
                                    })(
                                        <Input placeholder="请输入弹窗位置" className='input' />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row gutter={16}>
                            <Col span={12}>
                                <FormItem label="条件表达式">
                                    {getFieldDecorator('CondExpress', {
                                        initialValue: userInfo?.CondExpress || undefined,
                                    })(
                                        <Input placeholder="请输入条件表达式" className='input' />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="JS方法">
                                    {getFieldDecorator('JSMethod', {
                                        initialValue: userInfo?.JSMethod || undefined,
                                    })(
                                        <Input placeholder="请输入JS方法" className='input' />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row gutter={16}>
                            <Col span={12}>
                                <FormItem label="产品分类">
                                    {getFieldDecorator('productCatID', {
                                        initialValue: userInfo?.ProductCatDr || undefined,
                                        rules: [{ required: true, message: '产品分类不能为空' }],
                                    })(
                                        <Select
                                            allowClear
                                            showSearch
                                            placeholder="请选择"
                                            optionFilterProp="seachprop"
                                            onChange={(e) => this.getProductModuleSelectData(e, 'change')}
                                        >
                                            {React.$SelectOptions(productCatSelectData)}
                                        </Select>
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="产品模块">
                                    {getFieldDecorator('productModuleID', {
                                        initialValue: userInfo?.ProductModuleDr || undefined,
                                        rules: [{ required: true, message: '产品模块不能为空' }],
                                    })(
                                        <Select
                                            allowClear
                                            showSearch
                                            placeholder="请先选择产品分类"
                                            optionFilterProp="seachprop"
                                        >
                                            {React.$SelectOptions(productModuleSelectData)}
                                        </Select>
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row gutter={16}>
                            <Col span={12}>
                                <FormItem label="执行后台方法">
                                    {getFieldDecorator('BackMethod', {
                                        initialValue: userInfo?.BackMethod || undefined,
                                    })(
                                        <Input placeholder="请输入执行后台方法" className='input' />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={6}>
                                <FormItem label="菜单组标志">
                                    {getFieldDecorator('MenuGroup', {
                                        valuePropName: 'checked',
                                        initialValue: userInfo && 'MenuGroup' in userInfo && userInfo.MenuGroup === 'Y' ? true : false,
                                        rules: [{ required: true, message: '菜单组标志不能为空' }],
                                    })(
                                        <Switch checkedChildren="是" unCheckedChildren="否" className="input" ref={this.myRef1} />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={6}>
                                <FormItem label="记录点击率标志">
                                    {getFieldDecorator('ClickRateFlag', {
                                        valuePropName: 'checked',
                                        initialValue: userInfo && 'ClickRateFlag' in userInfo && userInfo.ClickRateFlag === 'Y' ? true : false,
                                    })(
                                        <Switch checkedChildren="是" unCheckedChildren="否" className="input" />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={24}>
                                <FormItem label="参数">
                                    {getFieldDecorator('Paras', {
                                        initialValue: userInfo?.Paras || undefined,
                                    })(
                                        <TextArea placeholder="请输入参数" autoSize={{ maxRows: 5 }} />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>
                    <div
                        style={{
                            position: 'absolute',
                            left: 0,
                            bottom: 0,
                            width: '100%',
                            borderTop: '1px solid #e9e9e9',
                            padding: '10px 16px',
                            background: '#fff',
                            textAlign: 'right',
                        }}
                    >
                        <Button onClick={this.onClose} style={{ marginRight: 8 }}>
                            返回
                        </Button>
                        <Button onClick={this.handelSave} type="primary">
                            保存
                        </Button>
                    </div>
                </Drawer>
            );
        }
    }
);
export default DetailFormHandel;

DetailFormHandel.propTypes = {
    // 验证userInfo的属性
    userInfo: PropTypes.object
}