import React, { useEffect, useState } from "react"
import { delSysProductCatalogApi, getSysProductCatalogApi, GetSysProductCatalogProps } from '@/services/launchAdq/goods'
import { useAjax } from "@/Hook/useAjax"
import TableData from '../../../components/TableData'
import tableConfig from './tableConfig'
import { Button, Col, Input, message, Row, Select } from "antd"
import { CatalogScaleType, CatalogType, IndustryType } from "@/services/launchAdq/enum"
import AddorEdit from "./addorEdit"
import Commodity from "./commodity"

/**
 * 商品库模板
 * @returns 
 */
const Goods: React.FC = () => {

    /** =================== */
    const [queryForm, setQueryFrom] = useState<GetSysProductCatalogProps>({ pageNum: 1, pageSize: 20 })
    const [modalConfig, setModalConfig] = useState<{ visible: boolean, title?: string, initialValues?: any }>({ visible: false, title: '新建' })
    const [commodityConfig, setCommodityConfig] = useState<{ visible: boolean, data?: any }>({ visible: false })

    const getSysProductCatalog = useAjax((params) => getSysProductCatalogApi(params))
    const delSysProductCatalog = useAjax((params) => delSysProductCatalogApi(params))
    /** =================== */

    useEffect(() => {
        getList()
    }, [queryForm])

    const getList = () => {
        getSysProductCatalog.run(queryForm)
    }

    const handle = (type: 1 | 2 | 3, data: any) => {
        switch (type) {
            case 1:
                setModalConfig({ visible: true, title: '修改', initialValues: data })
                break
            case 2:
                setCommodityConfig({ visible: true, data })
                break
            case 3:
                delSysProductCatalog.run({ productCatalogId: data?.id }).then(res => {
                    if (res) {
                        message.success('删除成功')
                        getSysProductCatalog.refresh()
                    }
                })
                break
        }
    }

    return <>
        <TableData
            columns={tableConfig(handle)}
            ajax={getSysProductCatalog}
            dataSource={getSysProductCatalog?.data?.records}
            loading={getSysProductCatalog?.loading}
            scroll={{ y: 600, x: 1500 }}
            total={getSysProductCatalog?.data?.total}
            page={getSysProductCatalog?.data?.current}
            pageSize={getSysProductCatalog?.data?.size}
            leftChild={<>
                <Row gutter={[10, 10]}>
                    <Col span={24}><Button type='primary' onClick={() => { setModalConfig({ visible: true, title: '新增' }) }}>新建商品库模板</Button></Col>
                    <Col>
                        <Input placeholder='商品库名称' allowClear value={queryForm?.catalogName} onChange={(e) => { setQueryFrom({ ...queryForm, catalogName: e.target.value, pageNum: 1 }) }} />
                    </Col>
                    <Col>
                        <Select placeholder='商品库规模' style={{ minWidth: 200 }} showSearch allowClear value={queryForm?.catalogScaleType}
                            filterOption={(input: any, option: any) =>
                                (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
                            }
                            onChange={(value: any) => {
                                setQueryFrom({ ...queryForm, catalogScaleType: value, pageNum: 1 })
                            }}
                        >
                            {Object.keys(CatalogScaleType).map(key => {
                                return <Select.Option value={key} key={key}>{CatalogScaleType[key]}</Select.Option>
                            })}
                        </Select>
                    </Col>
                    <Col>
                        <Select placeholder='商品库类型' style={{ minWidth: 200 }} showSearch allowClear value={queryForm?.catalogType}
                            filterOption={(input: any, option: any) =>
                                (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
                            }
                            onChange={(value: any) => {
                                setQueryFrom({ ...queryForm, catalogType: value, pageNum: 1 })
                            }}
                        >
                            {Object.keys(CatalogType).map(key => {
                                return <Select.Option value={key} key={key}>{CatalogType[key]}</Select.Option>
                            })}
                        </Select>
                    </Col>
                    <Col>
                        <Select placeholder='商品库行业类型' style={{ minWidth: 200 }} showSearch allowClear value={queryForm?.industryType}
                            filterOption={(input: any, option: any) =>
                                (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
                            }
                            onChange={(value: any) => {
                                setQueryFrom({ ...queryForm, industryType: value, pageNum: 1 })
                            }}
                        >
                            {Object.keys(IndustryType).map(key => {
                                return <Select.Option value={key} key={key}>{IndustryType[key]}</Select.Option>
                            })}
                        </Select>
                    </Col>
                </Row>
            </>}
            onChange={(props: any) => {
                let { sortData, pagination } = props
                let { current, pageSize } = pagination
                setQueryFrom({ ...queryForm, pageNum: current, pageSize })
            }}
        />
        {/* 新增修改商品库 */}
        {modalConfig.visible && <AddorEdit {...modalConfig} onClose={() => setModalConfig({ visible: false })} onChange={() => { getSysProductCatalog.refresh(); setModalConfig({ visible: false }) }} />}
        {/* 商品管理 */}
        {commodityConfig.visible && <Commodity visible={commodityConfig.visible} onClose={() => setCommodityConfig({ visible: false })} onChange={() => { getSysProductCatalog.refresh(); setCommodityConfig({ visible: false }) }} />}
    </>
}

export default React.memo(Goods)