import React, { useState, useEffect } from 'react';
import { Form, Card, Row, Col, Input, Steps, Tabs, Button, Table , Image} from 'antd';
import classNames from 'classnames';
import { connect } from 'umi';
import moment from 'moment'
import useFormTable from '@/useHooks/useFormTable';
import { dispatchHandle } from "@/utils/publicHandle";
import utilsStyles from '@/utils/utils.less';
import storageCount from '../utils/storageCountButtons'
import StepGroupBar from '@/components/Customized/StepGroupBar';

import style from '../index.less'
import RelativeOrderInfo from '@/components/RelativeOrderInfo';

const { TextArea } = Input;
const { TabPane } = Tabs;

// 已入库状态详情页
const AlreadyDetailStorage = (props) => {
    const {
        dispatch,
        loading,
        location: {
            query
        },
        warehousing: {
            storageOrderDetail,
            storageDetailMaterialList,
        },
    } = props;
    const [form] = Form.useForm();
    const [listTabs, setListTabs] = useState(1)

    const getListItems = (payload = {}) => {
        payload.orderId = query?.id
        const result = { ...payload, inCount: listTabs }
        delete result.remarks
        dispatchHandle(
            dispatch,
            'warehousing/warehouse_service_in_material_count_detail_post',
            result
        )
    }
    const { tableProps, search } = useFormTable(getListItems, {
        form
    })

    /**
   * @列表信息已入库tabs切换
   */
    const tabsChange = (activeKey) => {
        setListTabs(activeKey)
        search.submit({
            inCount: activeKey
        })
    }
    const columns = [
        {
            title: '序号',
            dataIndex: 'index',
            render: (text, record, index) => <>{index + 1}</>
        },
        {
            title: '物料图片',
            dataIndex: ['materialInfoSnapshort', 'picture'],
            render: (text, record) => (
                <Image style={{ width: 50, height: 50 }} src={record?.materialInfoSnapshort?.picture || '/pageImg/default@2x.png'} alt="" placeholder={true} />
            )
        },
        { title: '物料编号', dataIndex: ['materialInfoSnapshort', 'materialCode'] },
        { title: '品名', dataIndex: ['materialInfoSnapshort', 'materialName'] },
        { title: '品牌', dataIndex: ['materialInfoSnapshort', 'brand'] },
        { title: '规格/型号', dataIndex: ['materialInfoSnapshort', 'mmodel'] },
        { title: '产地', dataIndex: ['materialInfoSnapshort', 'produceArea'] },
        { title: '单位', dataIndex: ['materialInfoSnapshort', 'munit'] },
        { title: '单价（元）', dataIndex: ['materialInfoSnapshort', 'materialPrice'] },
        { title: '供应商', dataIndex: ['materialInfoSnapshort', 'supplierName'] },
        { title: '供应商代码', dataIndex: ['materialInfoSnapshort', 'supplierCode'] },
        { title: '需入库数', dataIndex: 'totalNum' },
        {
            title: '待入库数',
            dataIndex: 'unNum',
            render: (text) => <>{text || 0}</>
        },
        {
            title: '入库数',
            dataIndex: 'currentNum',
            render: (text) => <>{text || 0}</>
        },
        { title: '备注', dataIndex: 'remarks' },
    ];
    const formItemLayout = {
        labelCol: { span: 8 },
        wrapperCol: { span: 16 }
    };
    const stepGroupItemArr = [
        {
            itemType: 'create',
            dataTsFlowIndex: 0,// 对应 tsFlow 里面的data所在的值
            itemName: '已创建'
        },
        // 4 领料 5 出库，6 退料
        {
            itemType: 'audit',
            itemName: '审批',
        },
        {
            itemType: 'business',
            itemName: '领料',
            moduleType: 'pick',
            nodeCode: 4
        },
        {
            itemType: 'finished',
            itemName: '已完成'
        }
    ];
    useEffect(() => {
        dispatchHandle(
            dispatch,
            'warehousing/warehouse_service_in_material_detail_all_id_get',
            {
                id: query?.id
            },
            res => {
                form.setFieldsValue({ ...res })
            }
        )
    }, []);
    const storageUser = () => {
        if (storageDetailMaterialList && storageDetailMaterialList.list && storageDetailMaterialList.list.length > 0) {
            const { inMaterialCount: { inUserName, createTime } } = storageDetailMaterialList.list[0]
            return {
                inUserName,
                createTime
            }
        }
    }
    return (
        <Row style={{ width: '100%' }}>
            <Col
                span={24}
            >
                <Card>
                    <Form form={form}>
                        <h4 className={style.h3_title}> 基本信息</h4>
                        <Row gutter={10} className={classNames(utilsStyles.gutterBox)}>
                            <Col span={6}>
                                <Form.Item name='aa' className={classNames(utilsStyles.antFormItem)} label='入库单号'  {...formItemLayout}>
                                    <span>{storageOrderDetail?.inStockSheet || ''}</span>
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item name='bb'
                                    className={classNames(utilsStyles.antFormItem)}
                                    label='入库类型'
                                    {...formItemLayout}>
                                    <span>{storageOrderDetail?.inStockStyleName || ''}</span>
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item name='cc' className={classNames(utilsStyles.antFormItem)} label='入库仓库' {...formItemLayout}>
                                    <span>{storageOrderDetail?.warehouseName || ''}</span>
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item name='dd' className={classNames(utilsStyles.antFormItem)} label='仓管员' {...formItemLayout}>
                                    <span>{storageOrderDetail?.warehouse || ''}</span>
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item name='ee' className={classNames(utilsStyles.antLightFormItem)} label='关联单号'  {...formItemLayout}>
                                    {/* <span>{storageOrderDetail?.refSheet || ''}</span> */}
                                    <RelativeOrderInfo detail={storageOrderDetail}/>
                                </Form.Item>
                            </Col>
                            <Col span={24}>
                                <Form.Item name="remarks" className={style.note} label='备注'>
                                    <TextArea value={storageOrderDetail?.remarks || ''} rows={5} style={{ marginLeft: '-15px' }} disabled />
                                </Form.Item>
                            </Col>
                        </Row>
                    </Form>
                </Card>
                {
                    storageOrderDetail?.orderProcessBOS ? (
                        <Card style={{ marginTop: '15px' }}>
                            <h3 className={style.h3_title}>处理流程</h3>
                            <div style={{ paddingTop: 10 }}>
                                <StepGroupBar
                                    businessCode={4}
                                    data={storageOrderDetail?.orderProcessBOS}
                                    stepGroupItemArr={stepGroupItemArr}
                                    auditDetail={storageOrderDetail?.auditDetail}
                                />
                            </div>
                        </Card>
                    ) : null
                }
                <Card style={{ marginTop: 15 }}>
                    <h4 className={style.h3_title}>列表信息</h4>

                    <Tabs onChange={tabsChange} type="card">
                        {
                            storageCount(storageOrderDetail?.inCount || 0) &&
                            storageCount(storageOrderDetail.inCount || 0).length > 0 &&
                            storageCount(storageOrderDetail.inCount || 0).map((item, index) => (
                                <TabPane tab={item} key={index + 1} />
                            ))
                        }
                    </Tabs>
                    <>
                        <p style={{ marginTop: 10 }}>
                            入库时间：
                            <span>{storageUser()?.createTime ? moment(storageUser()?.createTime || '').format('YYYY-MM-DD HH:mm:ss') : '暂无'}</span>
                        </p>
                        <p style={{ marginBottom: 10 }}>
                            仓管员：
                            <span>{storageUser()?.inUserName || ''}</span>
                        </p>
                        <Table
                            loading={loading}
                            columns={columns}
                            dataSource={storageDetailMaterialList.list}
                            pagination={storageDetailMaterialList.pagination}
                            rowKey={record => record.id}
                            style={{ marginTop: '10px' }}
                            {...tableProps}
                        />
                    </>
                </Card>
            </Col>
        </Row>
    )
}

export default connect(({ warehousing, user, loading }) => ({
    warehousing,
    user,
    loading: loading.effects['warehousing/warehouse_service_in_material_count_detail_post']
}))(AlreadyDetailStorage);