import { Button, Card, Form, message, Modal, Select, Space } from "antd"
import React, { useEffect } from "react"
import '../../tencentAdPutIn/index.less'
import { useAjax } from "@/Hook/useAjax"
import { updateOwnerApi } from "@/services/adqV3/cloudNew"
import { getUserAllApi } from "@/services/operating/account"

interface Props {
    folderId: number
    visible?: boolean
    onClose?: () => void
    onChange?: () => void
}

/**
 * 修改文件所属人
 * @param param0 
 * @returns 
 */
const UpdateCreate: React.FC<Props> = ({ folderId, visible, onClose, onChange }) => {

    /********************************/
    const [form] = Form.useForm();

    const updateOwner = useAjax((params) => updateOwnerApi(params))
    const getUserAll = useAjax(() => getUserAllApi())
    /********************************/

    useEffect(() => {
        getUserAll.run()
    }, [])

    const handleOk = (values: any) => {
        console.log(values)
        updateOwner.run({ ...values, folderId }).then(res => {
            if (res) {
                message.success('更新成功')
                onChange?.()
            }
        })
    }

    return <Modal
        title={<strong>修改文件所属人</strong>}
        className="modalResetCss"
        open={visible}
        onCancel={onClose}
        footer={null}
        bodyStyle={{ padding: '0 0 40px', position: 'relative', borderRadius: '0 0 8px 8px' }}
        maskClosable={false}
        width={600}
    >
        <Form
            form={form}
            name="updateOwner"
            labelAlign='left'
            labelCol={{ span: 4 }}
            layout="horizontal"
            colon={false}
            style={{ backgroundColor: '#f1f4fc', maxHeight: 650, overflow: 'hidden', overflowY: 'auto', padding: '10px', borderRadius: '0 0 8px 8px' }}
            scrollToFirstError={{
                behavior: 'smooth',
                block: 'center'
            }}
            onFinishFailed={({ errorFields }) => {
                message.error(errorFields?.[0]?.errors?.[0])
            }}
            onFinish={handleOk}
            initialValues={{
                isPublic: true
            }}
        >
            <Card className="cardResetCss">
                <Form.Item name="ownerId" label={<strong>所属人</strong>} rules={[{ required: true, message: '请选择所属人!' }]}>
                    <Select
                        placeholder="请选择所属人"
                        showSearch
                        filterOption={(input, option) =>
                            ((option?.label ?? '') as any).toLowerCase().includes(input.toLowerCase())
                        }
                        options={getUserAll?.data?.map((item: { nickname: any; userId: any }) => ({ label: item.nickname, value: item.userId }))}
                    />
                </Form.Item>
            </Card>
            <Form.Item className="submit_pull">
                <Space>
                    <Button onClick={onClose}>取消</Button>
                    <Button type="primary" htmlType="submit" loading={updateOwner.loading} className="modalResetCss">
                        确定
                    </Button>
                </Space>
            </Form.Item>
        </Form>
    </Modal>
}

export default React.memo(UpdateCreate)