import { Button, Card, Form, Input, Modal, Table, message } from 'antd'
import '../../tencentAdPutIn/index.less'
import React, { useEffect, useState } from 'react'
import { PlusOutlined, SearchOutlined } from '@ant-design/icons'
import { useAjax } from '@/Hook/useAjax'
import { addSysBrandApi, delSysBrandApi, editSysBrandApi, getSysBrandApi } from '@/services/adqV3/global'
import brandColumns from '../../components/BrandImage/tableConfig'
import { UploadImage } from '../../components/BrandImage'

const Brand: React.FC = () => {


    /***************************************/
    const [addVisible, setAddVisible] = useState<boolean>(false)
    const [initialValues, setInitialValues] = useState<any>({})
    const [form] = Form.useForm()

    const getSysBrand = useAjax(() => getSysBrandApi())
    const addSysBrand = useAjax((params) => addSysBrandApi(params))
    const editSysBrand = useAjax((params) => editSysBrandApi(params))
    const delSysBrand = useAjax((params) => delSysBrandApi(params))
    /***************************************/

    // 获取列表
    useEffect(() => {
        getSysBrand.run()
    }, [])

    // 新增修改
    const handleOk = async () => {
        form.submit()
        let data = await form.validateFields()
        if (Object.keys(initialValues).length > 0) { // 修改
            editSysBrand.run({ ...data, sysBrandId: initialValues.id }).then(res => {
                if (res) {
                    message.success('修改成功')
                    setAddVisible(false)
                    getSysBrand.refresh()
                }
            })
        } else { // 新增
            addSysBrand.run(data).then(res => {
                if (res) {
                    message.success('新增成功')
                    setAddVisible(false)
                    getSysBrand.refresh()
                }
            })
        }
        setInitialValues({})
    }

    /** 删除 */
    const del = (id: number) => {
        delSysBrand.run({ sysBrandId: id }).then(res => {
            if (res) {
                message.success('删除成功')
                getSysBrand.refresh()
            }
        })
    }

    /** 修改 */
    const edit = (data: any) => {
        setInitialValues(data)
        setAddVisible(true)
    }

    return <Card
        className="cardResetCss"
        title={<div className="flexStart" style={{ gap: 8 }}>
            <Button type="primary" icon={<SearchOutlined />} onClick={() => getSysBrand.refresh()}>搜索</Button>
            <Button type="primary" icon={<PlusOutlined />} onClick={() => { setAddVisible(true); setInitialValues({}) }}>上传品牌形象</Button>
        </div>}
    >
        <Table
            columns={brandColumns(del, edit)}
            dataSource={getSysBrand?.data}
            size="small"
            loading={getSysBrand?.loading}
            scroll={{ y: 300 }}
            bordered
            rowKey={'id'}
        />

        {addVisible && <Modal className="modalResetCss" title="上传品牌形象" open={addVisible} confirmLoading={addSysBrand.loading} onOk={handleOk} onCancel={() => setAddVisible(false)}>
            <Form
                name="basic"
                form={form}
                layout='vertical'
                autoComplete="off"
                initialValues={{ ...initialValues }}
            >
                <Form.Item label={<strong>头像</strong>} name="brandImgUrl" rules={[{ required: true, message: '请选择头像!' }]}>
                    <UploadImage />
                </Form.Item>
                <Form.Item label={<strong>名称</strong>} name="name" rules={[{ required: true, message: '请输入名称!' }]}>
                    <Input placeholder="请输入名称" maxLength={12} />
                </Form.Item>
            </Form>
        </Modal>}
    </Card>
}


export default Brand