import { connect } from "umi";
import type { ConnectState } from "@/models/connect";
import { Button, Col, FormInstance, Modal, Row } from "antd";
import { useRef, useState } from "react";
import ProForm, { ProFormDateTimePicker, ProFormDigit, ProFormSelect, ProFormText, ProFormTextArea, ProFormTreeSelect } from "@ant-design/pro-form";
import { handleGetServerpartShopTrade } from "../../commodityInfo/service";
import moment from 'moment'
import { getServerpartTree } from "@/services/options";
import { handleGetUSERDEFINEDTYPEList } from "../../userDefinedType/service";


type DetailProps = {
    modalType: any // 2 为调价  3 为信息修改
    onShow: any // 是否显示
    currentShopRow: any // 当前选中的商品信息
    handleCencel: any // 关闭触发的方法
    currentUser: any // 一些公参
    parentRow: any // 当前最大的数据
    treeView: any // 商品类别 数据
    setShopData: any // 改变商品信息
    shopData: any // 当前的商品信息
}
const EditShopModal = ({ modalType, onShow, currentShopRow, handleCencel, currentUser, parentRow, treeView, setShopData, shopData }: DetailProps) => {
    const modalShopFormRef = useRef<FormInstance>();
    // 商品业态的搜索框内容
    const [commodityList, setCommodityList] = useState<any>([])
    const [selectSERVERPARTID, setSelectSERVERPARTID] = useState<any>()
    const [selectBUSINESSTYPE, setSelectBUSINESSTYPE] = useState<any>()
    const [customClassList, setCustomClassList] = useState<any>()

    // 请求自定义类的选择列表
    const handleGetCustomClassList = async (id: any) => {
        const req: any = {
            SearchParameter: {
                USERDEFINEDTYPE_STATE: 1,
                SERVERPART_ID: id,
                BUSINESSTYPE: selectBUSINESSTYPE
            },
            PageIndex: 1,
            PageSize: 999999,
            pageSize: 999999,
        }
        const data = await handleGetUSERDEFINEDTYPEList(req)
        if (data && data.length > 0) {
            const list: any = []
            data.forEach((item: any) => {
                list.push({ label: item.USERDEFINEDTYPE_NAME, value: item.USERDEFINEDTYPE_ID })
            })
            setCustomClassList(list)
        }
        console.log('data', data)
    }
    // 拿到对应的商品业态
    const handleGetCommodity = async (id: any) => {
        const req: any = {
            ProvinceCode: currentUser?.ProvinceCode,
            ServerpartId: id
        }
        const data = await handleGetServerpartShopTrade(req)
        console.log('data', data)
        setCommodityList(data)
    }

    return (
        <div>
            <Modal
                open={onShow}
                width={1200}
                wrapClassName={'shopModal'}
                destroyOnClose
                title={modalType === 3 ? '编辑商品' : currentShopRow?.COMMODITY_ID ? '编辑商品' : '添加商品'}
                onOk={() => {
                    modalShopFormRef.current?.validateFields().then(async (res: any) => {
                        if (handleCencel) {
                            handleCencel()
                        }
                    })
                }}
                footer={modalType === 3 ? parentRow?.BusinessProcess_State > 1000 ? '' :
                    <div style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', boxSizing: 'border-box', padding: '0 16px' }}>
                        {/* 审批过程中只能看 所以把底部隐藏 这样即使修改也没用 */}
                        <div></div>
                        <div>
                            <Button onClick={() => {
                                if (handleCencel) {
                                    handleCencel()
                                }
                            }}>取消</Button>
                            <Button type={"primary"} onClick={() => {
                                modalShopFormRef.current?.validateFields().then(async (res: any) => {
                                    let oldData: any = shopData && shopData.length > 0 ? JSON.parse(JSON.stringify(shopData)) : []
                                    let newList: any = []
                                    console.log('resresres', res);
                                    console.log('oldDataoldDataoldData', oldData);

                                    // 判断当前的里面有没有一样的
                                    if (oldData && oldData.length > 0) {
                                        oldData.forEach((item: any, index: number) => {
                                            // if (item.ADDTIME === res.ADDTIME) {
                                            if (item.COMMODITY_ID === currentShopRow?.COMMODITY_ID) {
                                                console.log('itemitemitemitem', item);
                                                console.log('resresresresres', res);

                                                newList.push({
                                                    ...item,
                                                    ...res
                                                })
                                            } else {
                                                newList.push(item)
                                            }
                                        })
                                    } else {
                                        newList.push(res)
                                    }

                                    console.log('newListnewList', newList);


                                    if (setShopData) {
                                        setShopData(newList)
                                    }
                                    if (handleCencel) {
                                        handleCencel()
                                    }
                                })
                            }}>确认</Button>

                        </div>
                    </div> : false}
                onCancel={() => {
                    if (handleCencel) {
                        handleCencel()
                    }
                }}
                bodyStyle={{
                    height: '700px', // 你可以根据需要调整高度
                    overflowY: 'auto',
                }}
            >
                <ProForm
                    formRef={modalShopFormRef}
                    submitter={false}
                    initialValues={currentShopRow}
                    request={async () => {
                        // !currentShopRow?.COMMODITY_ID && 
                        if (currentShopRow?.SERVERPART_ID) {
                            await handleGetCommodity(currentShopRow?.SERVERPART_ID)
                        }
                        return {
                            ...currentShopRow,
                            BUSINESSTYPE: currentShopRow?.BUSINESSTYPE.toString(),
                            COMMODITY_GRADE: Number(currentShopRow?.COMMODITY_GRADE),
                            ADDTIME: moment(currentShopRow?.ADDTIME).format('YYYY-MM-DD HH:mm:ss')
                        }
                    }}
                    disabled={parentRow?.BusinessProcess_State === 9000}
                >
                    <div className={'modalTitle'}>商品基本信息</div>
                    <Row gutter={16}>
                        <Col span={16}>
                            <ProFormText
                                name="COMMODITY_NAME"
                                label="商品名称"
                                placeholder="请输入商品名称"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入商品名称',
                                    },
                                ]}
                                readonly={modalType === 2}
                            />
                        </Col>
                        <Col span={8}>
                            <ProFormText
                                name="COMMODITY_EN"
                                label="拼音简码"
                                readonly={modalType === 2}
                            />
                        </Col>

                        <Col span={8}>
                            <ProFormSelect
                                name="SERVERPART_ID"
                                label="服务区名"
                                readonly={modalType === 2}
                                request={async () => {
                                    const data = await getServerpartTree(currentUser?.ProvinceCode, currentUser?.CityAuthority, true, true, true)
                                    const list: any = []
                                    if (data && data.length > 0) {
                                        data.forEach((item: any) => {
                                            if (item.children && item.children.length > 0) {
                                                item.children.forEach((subItem: any) => {
                                                    list.push({ label: subItem.label, value: subItem.value })
                                                })
                                            }
                                        })
                                        data.forEach((item: any) => {
                                            list.push({ label: item.label, value: item.value })
                                        })
                                    }
                                    return list
                                }}
                                rules={[
                                    {
                                        required: true,
                                        message: '请选择服务区',
                                    },
                                ]}
                                fieldProps={{
                                    onChange: async (e: any) => {
                                        console.log('e', e)
                                        if (e) {
                                            setSelectSERVERPARTID(e)
                                            await handleGetCommodity(e)
                                            if (selectBUSINESSTYPE) {
                                                await handleGetCustomClassList(e)
                                            }
                                        } else {
                                            setSelectSERVERPARTID(undefined)
                                            setCommodityList([])
                                            setCustomClassList([])
                                        }
                                    },
                                    showSearch: true,  // 启用搜索框
                                    filterOption: (inputValue: any, option: any) => {
                                        // 通过 label 搜索
                                        return option.label.toLowerCase().includes(inputValue.toLowerCase());
                                    }
                                }}
                            />
                        </Col>
                        <Col span={8}>
                            <ProFormSelect
                                name="BUSINESSTYPE"
                                label="商品业态"
                                readonly={modalType === 2}
                                rules={[
                                    {
                                        required: true,
                                        message: '请选择商品业态',
                                    },
                                ]}
                                options={commodityList}
                                fieldProps={{
                                    onChange: async (e: any) => {
                                        if (e) {
                                            setSelectBUSINESSTYPE(e)
                                            if (selectSERVERPARTID) {
                                                await handleGetCustomClassList(e)
                                            }
                                        } else {
                                            setSelectBUSINESSTYPE(undefined)
                                        }
                                    }
                                }}
                            />
                        </Col>
                        <Col span={8}>
                            <ProFormTreeSelect
                                name="COMMODITY_TYPE"
                                label="商品类别"
                                readonly={modalType === 2}
                                rules={[
                                    {
                                        required: true,
                                        message: '请选择商品类别',
                                    },
                                ]}
                                request={() => {
                                    return treeView
                                }}
                                fieldProps={{
                                    treeDefaultExpandAll: true
                                }}
                            />
                        </Col>

                        <Col span={8}>
                            <ProFormText
                                name="COMMODITY_BARCODE"
                                label="商品条码"
                                readonly={modalType === 2}
                                disabled={modalType === 2 ? parentRow : true}
                            />
                        </Col>
                        <Col span={8}>
                            <ProFormText
                                name="COMMODITY_UNIT"
                                label="商品单位"
                                readonly={modalType === 2}
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入商品单位',
                                    },
                                ]}
                            />
                        </Col>
                        <Col span={8}>
                            <ProFormText
                                name="COMMODITY_RULE"
                                label="商品规格"
                                readonly={modalType === 2}
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入商品规格',
                                    },
                                ]}
                            />
                        </Col>

                        <Col span={8}>
                            <ProFormText
                                name="COMMODITY_HOTKEY"
                                label="快捷键值"
                                readonly={modalType === 2}
                            />
                        </Col>
                        <Col span={8}>
                            <ProFormSelect
                                name="COMMODITY_GRADE"
                                label="质量等级"
                                readonly={modalType === 2}
                                rules={[
                                    {
                                        required: true,
                                        message: '请选择质量等级',
                                    },
                                ]}
                                initialValue={1000}
                                options={[{ label: '一等品', value: 1000 }, { label: '二等品', value: 2000 }, { label: '三等品', value: 5000 }, { label: '优等品', value: 3000 }, { label: '合格品', value: 4000 },]}
                            />
                        </Col>
                        <Col span={8}>
                            <ProFormText
                                name="COMMODITY_ORI"
                                label="商品产地"
                                readonly={modalType === 2}
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入商品产地',
                                    },
                                ]}
                            />
                        </Col>

                        <Col span={8}>
                            <ProFormSelect
                                name="USERDEFINEDTYPE_ID"
                                label="自定义类"
                                readonly={modalType === 2}
                                options={customClassList}
                            />
                        </Col>
                        <Col span={8}>
                            <ProFormText
                                name="PROVINCE_CODE"
                                label="省份编码"
                                readonly={modalType === 2}
                                disabled
                            // initialValue={currentUser?.ProvinceCode}
                            />
                        </Col>
                        <Col span={8}>
                            <ProFormText
                                name="COMMODITY_CODE"
                                label="商品编码"
                                readonly={modalType === 2}
                                disabled
                            />
                        </Col>

                        <Col span={24}>
                            <ProFormTextArea
                                name="COMMODITY_DESC"
                                label="商品说明"
                                readonly={modalType === 2}
                            />
                        </Col>
                    </Row>
                    <div className={'modalTitle'}>商品状态信息</div>
                    <Row gutter={16}>
                        <Col span={8}>
                            <ProFormSelect
                                name="CANSALE"
                                readonly={modalType === 2}
                                label="是否销售"
                                rules={[
                                    {
                                        required: true,
                                        message: '请选择是否销售',
                                    },
                                ]}
                                initialValue={1}
                                options={[{ label: '是', value: 1 }, { label: '否', value: 0 }]}
                            />
                        </Col>
                        <Col span={8}>
                            <ProFormSelect
                                name="ISBULK"
                                label="是否散装"
                                readonly={modalType === 2}
                                rules={[
                                    {
                                        required: true,
                                        message: '请选择是否散装',
                                    },
                                ]}
                                initialValue={0}
                                options={[{ label: '是', value: 1 }, { label: '否', value: 0 }]}
                            />
                        </Col>
                        <Col span={8}>
                            <ProFormSelect
                                name="METERINGMETHOD"
                                label="称重方式"
                                readonly={modalType === 2}
                                rules={[
                                    {
                                        required: true,
                                        message: '请选择称重方式',
                                    },
                                ]}
                                initialValue={1}
                                options={[{ label: '计价', value: 1 }, { label: '散装称重', value: 0 }]}
                            />
                        </Col>


                        <Col span={8}>
                            <ProFormSelect
                                name="COMMODITY_STATE"
                                label="审核状态"
                                readonly={modalType === 2}
                                rules={[
                                    {
                                        required: true,
                                        message: '请选择审核状态',
                                    },
                                ]}
                                initialValue={1}
                                options={[{ label: '有效', value: 1 }, { label: '审核中', value: 2 }, { label: '无效', value: 0 }]}
                            />
                        </Col>
                        <Col span={8}>
                            <ProFormText
                                name="ADDTIME"
                                label="添加时间"
                                readonly={modalType === 2}
                                disabled
                                initialValue={moment().format('YYYY-MM-DD HH:mm:ss')}
                            />
                        </Col>
                        <Col span={8}>
                            <ProFormDateTimePicker
                                name="OPERATE_DATE"
                                label="生效时间"
                                readonly={modalType === 2}
                                initialValue={moment().format('YYYY-MM-DD HH:mm:ss')}
                            />
                        </Col>
                    </Row>
                    <div className={'modalTitle'}>商品价格信息</div>
                    <Row gutter={16}>
                        <Col span={8}>
                            <ProFormDigit
                                name="COMMODITY_RETAILPRICE"
                                label="零售价"
                                readonly={modalType === 2}
                                disabled={modalType === 3}
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入零售价',
                                    },
                                ]}
                            />
                        </Col>
                        <Col span={8}>
                            <ProFormDigit
                                name="COMMODITY_CURRPRICE"
                                label="当前价格"
                                readonly={modalType === 2}
                                disabled={modalType === 3}
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入当前价格',
                                    },
                                ]}
                            />
                        </Col>
                        <Col span={8}>
                            <ProFormDigit
                                name="COMMODITY_MEMBERPRICE"
                                label="会员价"
                                readonly={modalType === 2}
                                disabled={modalType === 3}
                            />
                        </Col>

                        <Col span={8}>
                            <ProFormDigit
                                name="COMMODITY_PURCHASEPRICE"
                                label="进货价"
                                readonly={modalType === 2}
                                disabled={modalType === 3}
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入进货价',
                                    },
                                ]}
                            />
                        </Col>
                        <Col span={8}>
                            <ProFormDigit
                                name="COMMODITY_MINPRICE"
                                label="最低价"
                                readonly={modalType === 2}
                                disabled={modalType === 3}
                            />
                        </Col>
                        <Col span={8}>
                            <ProFormDigit
                                name="COMMODITY_MAXPRICE"
                                label="最高价"
                                readonly={modalType === 2}
                                disabled={modalType === 3}
                            />
                        </Col>
                    </Row>
                    <div className={'modalTitle'}>商品进销信息</div>
                    <Row gutter={16}>
                        <Col span={8}>
                            <ProFormDigit
                                name="DUTY_PARAGRAPH"
                                label="进价税率"
                                readonly={modalType === 2}
                            />
                        </Col>
                        <Col span={8}>
                            <ProFormDigit
                                name="RETAIL_DUTY"
                                label="零售税率"
                                readonly={modalType === 2}
                            />
                        </Col>
                        <Col span={8}>
                            <ProFormSelect
                                name="COMMODITY_FROZENCOUNT"
                                label="采购状态"
                                readonly={modalType === 2}
                                options={[{ label: '允许', value: 1000 }, { label: '禁止', value: 2000 }]}
                            />
                        </Col>
                    </Row>
                </ProForm>
            </Modal>
        </div >
    )
}

export default connect(({ user, }: ConnectState) => ({
    currentUser: user.currentUser,
}))(EditShopModal);
