import React, { useState, useEffect } from 'react';
import { connect, history } from 'umi';
import { Card, Tabs, Badge, Spin, Row, Col,Table,Descriptions,Image } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { dispatchHandle } from '@/utils/publicHandle';
import classNames from 'classnames';
import utilsStyles from '@/utils/utils.less';
import moment from 'moment';

const { TabPane } = Tabs;


const PartTabTable = (props) => {
  const { unReceiveDataSource,receiveDataSource, counts,id,modelUrl,dispatch, status } = props;
  const [receiveCount, setReceiveCount] = useState(1);//默认第1次;
  const [currentList, setCurrentList] = useState([]);

  console.log(`unReceiveDataSource is:`, unReceiveDataSource);
  const receiveCallback = val => {
    setReceiveCount(val);
  };
  const getListItems = (payload = {}) => {
      id && dispatchHandle(dispatch, modelUrl, payload);
     };
  useEffect(() => {
    getListItems({
      orderId: id,
      receiveCount
    });
  }, [receiveCount]);




  const hasPanelArr = [];
  for (let i = 0; i < counts;i++){
    hasPanelArr.push(1);
  }
    const baseColumns = [
          {
          title: '序号', dataIndex: 'id', disabled: true, render: (val, record,index) => {
            return  index + 1
        }},
        {
          title: '物料图片', dataIndex: 'picture', dataIndex: ['materialInfoSnapshort', 'picture'],render:(val,record)=>{
            return <Image src={val} width="50px" height="50px" placeholder={true} />
         } },
        {
          title: '物料编号', dataIndex: 'materialCode', render: (val,record) => {
            return record?.materialInfoSnapshort?.materialCode
        }},
        { title: '品名', dataIndex: 'materialName', render: (val,record) => {
            return record?.materialInfoSnapshort?.materialName
        }},
        { title: '规格/型号', dataIndex: 'mmodel',render: (val,record) => {
            return record?.materialInfoSnapshort?.mmodel
        }},
        { title: '供应商', dataIndex: 'supplierName',render: (val,record) => {
            return record?.materialInfoSnapshort?.supplierName
        } },
        { title: '采购周期(天)', dataIndex: 'purchaseCycle',render: (val,record) => {
            return record?.materialInfoSnapshort?.purchaseCycle || '暂无'
        } },
        { title: '单位', dataIndex: 'munit', render: (val,record) => {
            return record?.materialInfoSnapshort?.munit
        } },
        { title: '单价(元)', dataIndex: 'materialPrice', render: (val,record) => {
            return record?.materialInfoSnapshort?.materialPrice
        }},
    ];
    
    const optColumns = [
     ...baseColumns,
    {
      title: '备注', dataIndex: 'remarks', editable: true, width: 150, render: (val,record) => {
        if (val) {
          return val;
        } else {
            return '暂无'
          }
            }
    },
    {
      title: '库存数量', dataIndex: ['inventoryAccount', 'stockNum']
    },
    { title: '被占用数量', dataIndex:['inventoryAccount','lockNum'] },
      {
        title: '可领取数量', dataIndex: 'canAccount', render: (val, record) => {
        return record.stockNum - record.lockNum || 0
    }},
    { title: '需领取数量', dataIndex: 'totalNum'},
     { title: '领取金额', dataIndex: 'amount' },
     { title: '未领取数', dataIndex: 'ungetedNum' },
    ];
    const okOptColumns = [
        ...baseColumns,
        {
          title: '领取数量',
          dataIndex:'currentNum'
        },
        {
          title: '备注', dataIndex: 'remarks', width: 100, render: (val,record) => {
            if (val) {
              return val;
            } else {
                return '暂无'
            }
          }
        }
    ];
    return (
        <div>
        <Card>
        <div className={utilsStyles.subMenus}>
            <Tabs animated={false}>
              {
              status !== 40 && status !== 30 && <TabPane tab='未领取' key='no'>
                <div style={{ paddingTop: 20 }}>
                    <Table
                          rowKey={(record) => record.id}
                          dataSource={ unReceiveDataSource || [] }
                          columns={optColumns}
                          className="custom-table-setting"
                          pagination={[]}
                      />
                </div>
            </TabPane>
        }
        <TabPane tab='领取记录' key='ok'>
                  <div style={{ paddingTop: 20 }}>
                  <Tabs  onChange = { receiveCallback }>
                        {
                          hasPanelArr && hasPanelArr.map((item,index) => (
                            <TabPane tab={`第${ index + 1 }次领取`} key={ index + 1  } >
                                      <Descriptions style={{paddingTop:15}}>
                                <Descriptions.Item label="出库时间">{ receiveDataSource && receiveDataSource[0]?.requisitionMaterialCount?.createTime && moment(item?.requisitionMaterialCount?.createTime).format('YYYY/MM/DD HH:mm:ss') }</Descriptions.Item>
                                <Descriptions.Item label="仓管员">{ receiveDataSource && receiveDataSource[0]?.requisitionMaterialCount?.requisitionUserName }</Descriptions.Item>
                                <Descriptions.Item label="状态"> { {'16':'已通过','30':'待确认','45':'已撤销','90':'已驳回'}[receiveDataSource && receiveDataSource[0]?.requisitionMaterialCount?.status]}</Descriptions.Item>
                                      </Descriptions>
                                      <Table
                                          rowKey={(record) => record.id}
                                          dataSource={receiveDataSource}
                                          pagination={[]}
                                          columns={ okOptColumns }
                                          className="custom-table-setting"
                                      />
                                    </TabPane>
                          ))
                        }
                      </Tabs>
                    </div>
              </TabPane>
            </Tabs>
        </div>
        </Card>
        </div>
    )
};

export default connect(({ ware,warePick,dict,universal, loading }) => ({
  ware,dict,universal,warePick,
  queryLoading: loading.models.ware,
}))(PartTabTable);