import React, { useEffect, useState } from "react"
import { Form, Select, TreeSelect, Input, Modal, message } from "antd"
import { useRequest, useModel } from 'umi';
import { screenSave } from '../service';

import style from "../index.less"

const { Option } = Select

const AddPageModal = ({ setAddPageModalShow , isShow , formValues, selectTreeData, onSubmit,selectArea }) => {
    const pageTypeList = ["前台", "后台"]
    const pageSizeList = ["自定义", "1920*1080", "1080*560"]
    // 新页面创建表单
    const [form] = Form.useForm()
    
    const [confirmLoading, setConfirmLoading] = useState(false);
    const [measurement, setMeasurement] = useState(formValues?.measurement);

    const {initialState} = useModel('@@initialState')


    useEffect(() => {
        setMeasurement(formValues?.measurement)
        form.resetFields();
    }, [formValues]);

    // 点击弹框取消按钮
    const addModalHide = () => {
        setAddPageModalShow(false)
    }

    const fetchSave = useRequest(screenSave, {
        manual: true,
        onSuccess: res => {
          message.success('操作成功')
          setAddPageModalShow(false);
          setConfirmLoading(false);
          onSubmit();    
        }
      });

    // 点击弹框确定按钮
    const addModalShow = (e) => {
        e.preventDefault();
        setConfirmLoading(true);
        form.validateFields()
            .then((values) => {
                fetchSave.run({ projectId: initialState.currentUser?.currentProjectId, screenMode: {}, ...(formValues || {}), ...values });
            })
            .catch((info) => {
                console.log('Validate Failed:', info);
        });
    }

    const handleMeasurementChange = (value) => {
        if (value.indexOf('*') > -1) {
            const values = value.split('*')
            form.setFieldsValue({wight: values[0], high: values[1]})
        } else {

        }
        setMeasurement(value)
    }

    return <Modal
        title={<span style={{fontWeight: 'bold'}}>{(formValues && formValues.id) ? '修改' : '创建' }页面</span>}
        onOk={addModalShow}
        onCancel={addModalHide}
        confirmLoading={confirmLoading}
        visible={isShow}
        className={style.new_page_modal}
    >
        <Form form={form} initialValues={ formValues }>
            <Form.Item label="id" name="id" style={{ display: 'none' }}>
                <Input placeholder="请输入" />
            </Form.Item>
            <Form.Item label="页面名称" name="name" rules={[{ required: true, message: "输入不能为空！" }]}>
                <Input placeholder="请输入" />
            </Form.Item>
            <Form.Item label="编号" name="identifierID" rules={[{ required: true, message: "输入不能为空！" }]}>
                <Input placeholder="请输入" />
            </Form.Item>
            <Form.Item label="页面类型" name="type" rules={[{ required: true, message: "输入不能为空！" }]}>
                <Select>
                    {
                        pageTypeList.map(i => {
                            return <Option key={i}>{i}</Option>
                        })
                    }
                </Select>
            </Form.Item>
            <Form.Item label="所属系统" name="systemId" rules={[{ required: true, message: "输入不能为空！" }]}>
                <TreeSelect
                    treeData={ selectTreeData }
                />
            </Form.Item>
            <Form.Item label="页面尺寸" name="measurement" rules={[{ required: true, message: "输入不能为空！" }]}>
                <Select onChange={ handleMeasurementChange }>
                    {
                        pageSizeList.map(i => {
                            return <Option key={i}>{i}</Option>
                        })
                    }
                </Select>
            </Form.Item>
            <Form.Item label="宽度" name="wight" rules={[{ required: true, message: "输入不能为空！" }]}>
                <Input placeholder="请输入" readOnly={measurement !== '自定义'} />
            </Form.Item>
            <Form.Item label="高度" name="high" rules={[{ required: true, message: "输入不能为空！" }]}>
                <Input placeholder="请输入" readOnly={measurement !== '自定义'} />
            </Form.Item>
            <Form.Item label="所属部门" name="organizationId" rules={[{ required: false, message: "输入不能为空！" }]}>
                <TreeSelect
                    filterTreeNode
                    treeNodeFilterProp="title"
                    showSearch
                    allowClear
                    treeDefaultExpandAll
                    style={{ width: '100%' }}
                    dropdownMatchSelectWidth = {350}
                    dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                    placeholder="请选择所在部门"
                    treeData={selectArea}
                />
            </Form.Item>
        </Form>
    </Modal>
}

export default AddPageModal;