import * as React from 'react';
import { PageHeaderFoot, Button, AutoTableContainer, message, Pagination, Tag, TableManual, Modal as Modal2 } from 'kts-xui';
import { AdvancedSearch, KtsForm } from 'kts-components';
import AddModal from './UI.DenyModal';
import moment from 'moment';
import { columnEnum } from '../CommonComponents/ColumnEnum';
import { findLabel, invoiceTypeEnum, proveStatusEnum, effectiveStatusEnum, } from '../CommonComponents/FiledsEnum';
import { withRouter, RouteChildrenProps } from 'react-router-dom';
import agent from '../Server';
import { Space, Tooltip, Modal } from 'kts-components-antd-x4';
import VerifyList from './VerifyList'
import { DigitalAssetVerification } from '../..';
import Sort from '../CommonComponents/Sort'
import { SettingOutlined } from '@ant-design/icons';
/** Props接口 */
interface IProps {

}
/**
 * 被核商品明细
 */

class UIComponents extends React.Component<IProps & RouteChildrenProps, any> {
    columnAction = [
        {
            title: '操作',
            dataIndex: 'id',
            width: 150,
            fixed: 'right',
            render: (text, record) => {
                return <Space>
                    {record.effectiveStatus === 1 && <a onClick={() => { this.onDenyHandler([text]); }}>拒绝</a>}
                    {record.reviewStatus !== 0 && <a onClick={() => { this.onVerifyRecords(record.lineUuid); }}>处理记录</a>}
                </Space>
            }
        },
    ]

    constructor(props) {
        super(props);
        this.state = {
            pageMeta: null,
            list: [
            ],
            params: this.props.location.state || {},
            showModal: false,
            selectedRowKeys: [],
            denyList: [],
            lineUuid: '',
            columns: [
                {
                    title: '商品id',
                    dataIndex: 'lineUuid',
                    key:'lineUuid',
                    width: 340,
                },
                {
                    title: '采集方',
                    dataIndex: columnEnum['被核验方'],
                    key: columnEnum['被核验方'],
                    width: 160,
                    ellipsis: true,
                },
                {
                    title: '销售方',
                    dataIndex: columnEnum['销售方'],
                    key: columnEnum['销售方'],
                    width: 160,
                    ellipsis: true,
                }, {
                    title: '采购方',
                    dataIndex: columnEnum['采购方'],
                    key: columnEnum['采购方'],
                    width: 160,
                    ellipsis: true,
                },
                {
                    dataIndex:'buyerTaxNo',
                    type: 'string',
                    width: 160,
                    title: '采购方纳税人识别号',
                    ellipsis: true,
                },
                {
                    title: '业务有效性',
                    width: 120,
                    align: 'center',
                    dataIndex: columnEnum['有效性状态'],
                    key: columnEnum['有效性状态'],
                    render: (text, record) => {
                        if (text === 2) {
                            return <Tooltip title={record.refusalCause}><span style={{ color: 'red' }}>{findLabel(text, effectiveStatusEnum)}</span></Tooltip>
                        } else {
                            return <span style={{ color: '#0074ff' }}>{findLabel(text, effectiveStatusEnum)}</span>
                        }
                    }
                },
                {
                    title: '证明结果',
                    width: 100,
                    align: 'center',
                    dataIndex: columnEnum['证明标识'],
                    key: columnEnum['证明标识'],
                    render: (text, record) => {
                        if (text === 2 || text === 4) {
                            return <Tooltip title={record.proveMsg}><span style={{ color: 'red' }}>{findLabel(text, proveStatusEnum)}</span></Tooltip>
                        } else if (text === 1) {
                            return <span style={{ color: '#0074ff' }}>{findLabel(text, proveStatusEnum)}</span>
                        } else {
                            return findLabel(text, proveStatusEnum);
                        }
                    }
                }, {
                    title: '商品名称',
                    dataIndex: columnEnum['商品名称'],
                    key: columnEnum['商品名称'],
                    width: 160,
                    ellipsis: true,
                }, {
                    title: '规格型号',
                    dataIndex: columnEnum['规格型号'],
                    key: columnEnum['规格型号'],
                    width: 140,
                    ellipsis: true,
                    render: (text) => {
                        return <span style={{ whiteSpace: 'pre-wrap' }}>{text}</span>
                    }
                }, {
                    title: '数量',
                    dataIndex: columnEnum['数量'],
                    key: columnEnum['数量'],
                    width: 80,
                    ellipsis: true,
                    align: 'right'
                }, {
                    title: '单位',
                    dataIndex: columnEnum['单位'],
                    key: columnEnum['单位'],
                    width: 80,
                    ellipsis: true,
                    align: 'right'
                }, {
                    title: '发票类型',
                    width: 120,
                    dataIndex: 'invoiceType',
                    key: 'invoiceType',
                    align: 'center',
                    render: (text, record) => {
                        if (text) {
                            return <Tag>{findLabel(text, invoiceTypeEnum)}</Tag>

                        }
                    }
                }, {
                    title: '发票代码',
                    width: 140,
                    dataIndex: 'invoiceCode',
                    key: 'invoiceCode',
                }, {
                    title: '发票号码',
                    width: 190,
                    dataIndex: 'invoiceNo',
                    key: 'invoiceNo',
                }, {
                    title: '开票日期',
                    width: 130,
                    dataIndex: 'invoiceDate',
                    key: 'invoiceDate',
                    render: (text) => {
                        return text && moment(text).format('YYYY-MM-DD');
                    }
                },
                {
                    title: '任务单号',
                    dataIndex: columnEnum['任务单号'],
                    key: columnEnum['任务单号'],
                    width: 160,
                    ellipsis: true,
                    render: (text, record) => {
                        if (record.originPartyType === 1) {
                            return <span>{text}</span>
                        }
                    }
                },
                {
                    title: '关联单据',
                    width: 120,
                    dataIndex: 'goodsDocRelationList',
                    key: 'goodsDocRelationList',
                    ellipsis: true,
                    render: (text, record) => {
                        if (text.length > 0) {
                            let originalDocuments = text.reduce((acc, obj) => {
                                acc.push(obj.originalDocument);
                                return acc;
                            }, [])
                            let str = originalDocuments.join('/');
                            return str
                        }
                    }
                },
                {
                    title: '提交时间',
                    width: 160,
                    dataIndex: columnEnum['提交时间'],
                    key: columnEnum['提交时间'],
                    ellipsis: true,
                    render: text => {
                        return text && moment(text).format('YYYY-MM-DD HH:mm')
                    }
                },
                {
                    title: '提交用途',
                    width: 150,
                    ellipsis: true,
                    key: 'submitPurpose',
                    dataIndex: 'submitPurpose',
                },
            ],
            columnsMok: [
                {
                    title: '商品id',
                    dataIndex: 'lineUuid',
                    key:'lineUuid',
                    type:'string'
                },
                {
                    title: '采集方',
                    dataIndex: columnEnum['被核验方'],
                    key: columnEnum['被核验方'],
                    type: 'string',
                },
                {
                    title: '销售方',
                    dataIndex: columnEnum['销售方'],
                    key: columnEnum['销售方'],
                    type: 'string',
                }, {
                    title: '采购方',
                    dataIndex: columnEnum['采购方'],
                    key: columnEnum['采购方'],
                    type: 'string',
                },
                {
                    title: '业务有效性',
                    type: 'string',
                    dataIndex: columnEnum['有效性状态'],
                    key: columnEnum['有效性状态'],
                },
                {
                    title: '证明结果',
                    dataIndex: columnEnum['证明标识'],
                    key: columnEnum['证明标识'],
                    type: 'string',
                }, {
                    title: '商品名称',
                    dataIndex: columnEnum['商品名称'],
                    key: columnEnum['商品名称'],
                    type: 'string',
                }, {
                    title: '规格型号',
                    dataIndex: columnEnum['规格型号'],
                    key: columnEnum['规格型号'],
                    type: 'string',
                    render: (text) => {
                        return <span style={{ whiteSpace: 'pre-wrap' }}>{text}</span>
                    }
                }, {
                    title: '数量',
                    dataIndex: columnEnum['数量'],
                    key: columnEnum['数量'],
                    type: 'string',
                }, {
                    title: '单位',
                    dataIndex: columnEnum['单位'],
                    key: columnEnum['单位'],
                    type: 'string',
                }, {
                    title: '发票类型',
                    dataIndex: 'invoiceType',
                    key: 'invoiceType',
                    type: 'string',
                }, {
                    title: '发票代码',
                    type: 'string',
                    dataIndex: 'invoiceCode',
                    key: 'invoiceCode',
                }, {
                    title: '发票号码',
                    type: 'string',
                    dataIndex: 'invoiceNo',
                    key: 'invoiceNo',
                }, {
                    title: '开票日期',
                    dataIndex: 'invoiceDate',
                    key: 'invoiceDate',
                    type: 'string',
                },
                {
                    title: '任务单号',
                    dataIndex: columnEnum['任务单号'],
                    key: columnEnum['任务单号'],
                    type: 'string',
                },
                {
                    title: '关联单据',
                    dataIndex: 'goodsDocRelationList',
                    key: 'goodsDocRelationList',
                    type: 'string',
                },
                {
                    title: '提交时间',
                    dataIndex: columnEnum['提交时间'],
                    key: columnEnum['提交时间'],
                    type: 'string',
                },
                {
                    title: '提交用途',
                    type: 'string',
                    key: 'submitPurpose',
                    dataIndex: 'submitPurpose',
                },
            ],
            sortDataSource: []
        };
        // console.log(this.state.params)
    }
    onVerifyRecords = id => {
        this.setState({
            lineUuid: id
        })
    }
    closeVerify = () => {
        this.setState({
            lineUuid: ''
        })
    }
    topExpand = () => {
        const { params } = this.state;
        let cloneData = JSON.parse(JSON.stringify(params));
        delete cloneData.minInvoiceDate
        delete cloneData.maxInvoiceDate
        delete cloneData.minSubmitTime
        delete cloneData.maxSubmitTime
        return (
            <AdvancedSearch
                width={480}
                height={44}
                initialValues={cloneData}
                compact={true}
                defaultKey="goodsName"
                placeholder="请输入商品名称"
                searchFormSubmit={this.onSearch}
            >
                <KtsForm
                    labelCol={9}
                    wrapperCol={15}
                    initialValues={cloneData}
                    labelAlign="left"
                    compact={true}
                    schema={{
                        type: 'object',
                        properties: {
                            [columnEnum['任务单号']]: {
                                type: 'string',
                                title: '任务单号',
                            },
                            'lineUuid': {
                                type: 'string',
                                title: '商品id',
                            },
                            [columnEnum['商品名称']]: {
                                type: 'string',
                                title: '商品名称',
                            },
                            [columnEnum['规格型号']]: {
                                type: 'string',
                                title: '规格型号(包含)',
                            },
                            'notContainSpecificationModel': {
                                type: 'string',
                                title: '规格型号(不包含)',
                            },
                            
                            [columnEnum['被核验方']]: {
                                type: 'string',
                                title: '采集方',
                            },
                            [columnEnum['销售方']]: {
                                type: 'string',
                                title: '销售方',
                            },
                            [columnEnum['采购方']]: {
                                type: 'string',
                                title: '采购方',
                            },
                            'buyerTaxNo': {
                                type: 'string',
                                title: '采购方纳税人识别号',
                            },
                            kaipiao: {
                                type: 'daterange',
                                title: '开票日期',
                                'x-props': {
                                    extendsFields: ['minInvoiceDate', 'maxInvoiceDate'],
                                }
                            },
                            endDate: {
                                type: 'daterange',
                                title: '提交时间',
                                'x-props': {
                                    extendsFields: ['minSubmitTime', 'maxSubmitTime'],
                                }
                            },
                            submitPurpose: {
                                type: 'string',
                                title: '提交用途',
                            },
                            invoiceCode: {
                                type: 'string',
                                title: '发票代码',
                            },
                            invoiceNo: {
                                type: 'string',
                                title: '发票号码',
                            },
                            [columnEnum['证明标识']]: {
                                type: 'string',
                                title: '证明结果',
                                enum: proveStatusEnum.slice(0, 3),
                                'x-props': {
                                    allowClear: true
                                }
                            },
                            'includeManyEffectiveStatus': {
                                type: 'string',
                                title: '业务有效性',
                                enum: effectiveStatusEnum,
                                'x-props': {
                                    mode: "multiple"
                                }
                            },
                            // 'reviewStatus': {
                            //     type: 'string',
                            //     title: '是否复验',
                            //     enum: reviewStatusEnum
                            // },
                            [columnEnum['单位']]: {
                                type: 'string',
                                title: '单位',
                            },
                            originalDocument: {
                                type: 'string',
                                title: '关联单据',
                            },
                        },
                    }}
                >
                </KtsForm>
            </AdvancedSearch>
        );
    }
    /**
     * 拒绝
     * @param keys 
     */
    onDenyHandler = (keys: string[]) => {
        this.setState({
            denyList: keys,
            showModal: true
        })
    }
    componentDidMount() {
        const params = {
            pageNum: 1,
            pageSize: 10,
            ...this.state.params,
        };
        this.getData(params);
        this.getLocalSort();
    }
    onPageChange = (pageNum, pageSize) => {
        this.setState({
            pageMeta: {
                ...this.state.pageMeta,
                pageNum,
                pageSize
            }
        }, () => {
            this.onRefresh();
        });
    }
    onRefresh = () => {
        const params = {
            ...this.state.params,
            ...this.state.pageMeta,
        };
        this.getData(params);
    }
    onSearch = (data = {}) => {
        this.setState({
            params: data,
        });
        const params = {
            ...data,
            ...this.state.pageMeta,
            pageNum: 1
        };
        this.getData(params);
    }
    getData = async (params?) => {
        params = {
            ...params,
            minInvoiceDate: params['minInvoiceDate'] && moment(params['minInvoiceDate']).format('YYYY-MM-DD 00:00:00'),
            maxInvoiceDate: params['maxInvoiceDate'] && moment(params['maxInvoiceDate']).format('YYYY-MM-DD 23:59:59'),
            minSubmitTime: params['minSubmitTime'] && moment(params['minSubmitTime']).format('YYYY-MM-DD 00:00:00'),
            maxSubmitTime: params['maxSubmitTime'] && moment(params['maxSubmitTime']).format('YYYY-MM-DD 23:59:59'),
        }
        const res: any = await agent.post('/web/verifier/valid/invoiceDetail/queryInvoiceDetailPage', params, this);
        if (res.err) {
            return;
        } else {
            this.setState({
                pageMeta: res.res.pageMeta,
                list: res.res.items
            });
        }
    }
    onDeny = () => {
        this.setState({
            showModal: true,
            denyList: [...this.state.selectedRowKeys]
        })
    }
    onExport = async () => {
        const params = {
            ...this.state.params,
            ...this.state.pageMeta,
        }; 
        // const res: any = await DigitalAssetVerification.server.post(`${DigitalAssetVerification.prefix_path}/web/verifier/report/exportInvoiceDetail`, params).reqFs(DigitalAssetVerification.server.reqFs.filter(v => v !== DigitalAssetVerification.serviceTools.addContentType)).resFs([]).responseType('blob').end(null);;
        const res: any = await DigitalAssetVerification.server.post(`${DigitalAssetVerification.prefix_path}/web/verifier/report/exportInvoiceDetail`, params).end(null);;
        if (res.err) {
            return;
        } else {
            if(res.res){  
                Modal2.info({
                    title: '数据导出中',
                    content: <div style={{textAlign: 'center'}}>导出为异步操作，请稍后查看</div>,
                    onOk: () => {
                        this.props.history.push({ pathname: '/task/list/export', state: {fileType: 'GOODS_RECORD'} })
                    },
                    okType: 'link',
                    okText: '查看导出记录',
                    closable: true,     // 显示右上角关闭按钮
                });
            } else {
                message.error('导出失败')
            }
            // const blob = res.res.body;
            // let url = URL.createObjectURL(blob);
            // let link = document.createElement('a');
            // link.style.display = 'none';
            // link.href = url;
            // link.setAttribute('download', `资产核验商品明细-${moment(new Date()).format('YYYYMMDDHHmmss')}.xlsx`);
            // link.click();
            // link = null;
        }
    }
    closeModal = () => {
        this.setState({
            showModal: false,
            denyList: []
        })
    }
    successModal = () => {
        this.onRefresh();
        this.closeModal();
    }
    setDataSource = (data) => {
        const keys = Sort.filter(this.state.columnsMok, data) || [];
        const checkedKeys = keys.map((item) => {
            return {
                key: item.key,
                checked: true
            }
        })
        this.setState({
            sortDataSource: checkedKeys
        })
        window.localStorage.setItem('masterproduct', JSON.stringify(data))
    }
    getLocalSort = () => {
        const d = window.localStorage.getItem('masterproduct');
        let checkedKeys = []
        if (d) {
            checkedKeys = JSON.parse(d);
            this.setDataSource(checkedKeys);
        } else {
            checkedKeys = this.state.columns.map((item) => {
                return {
                    key: item.key,
                    checked: true
                }
            })
        }
        this.setState({
            sortDataSource: checkedKeys
        })

    }
    render() {
        const dataSource = this.state.list;
        const { pageMeta, selectedRowKeys, lineUuid, sortDataSource } = this.state;
        const columns = Sort.filter(this.state.columns, this.state.sortDataSource) || [];
        const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                this.setState({
                    selectedRowKeys
                });
            },
            getCheckboxProps: (record) => ({
                disabled: record.effectiveStatus !== 1
            }),
        }
        return (
            <div style={{ height: 'calc(100vh - 97px)', display: 'flex', flexDirection: 'column' }}>
                <div style={{ flex: 'none', position: 'relative', zIndex: 1 }}>
                    <PageHeaderFoot
                        expandLeft={this.topExpand()}
                        expandRight={[
                            <Button key='0' type="primary" onClick={this.onExport}>导出商品信息</Button>,
                            <Button disabled={selectedRowKeys.length === 0 ? true : false} key='1' type="primary" onClick={this.onDeny}>批量拒绝</Button>,
                            <Sort
                                key="2"
                                columns={this.state.columnsMok}
                                dataSource={sortDataSource}
                                onChange={this.setDataSource}
                                mustShows={['verifiedParty', 'salerName', 'buyerName', 'effectiveStatus', 'goodsName', 'specificationModel',]}
                            >
                                <Button icon={<SettingOutlined />} />
                            </Sort>
                        ]}
                        onRefresh={this.onRefresh}
                    >

                    </PageHeaderFoot>
                </div>
                <AutoTableContainer style={{ flex: 1, padding: '0 20px', background: '#F4F4F4' }} >
                    <TableManual
                        id='masterproduct'
                        className='fixheight'
                        dataSource={dataSource}
                        columns={[...columns, ...this.columnAction] as any}
                        bordered={true}
                        rowSelection={rowSelection}
                        scroll={{ y: 'max-content' }}
                        pagination={false}
                        rowKey='id'
                    />
                </AutoTableContainer>
                {pageMeta && <Pagination onChange={this.onPageChange} showTotal={(total, range) => `第 ${range[0]}-${range[1]} 条,  共有 ${total} 条`} style={{ padding: '16px 0', flex: 'none', background: 'white', textAlign: 'center' }} total={pageMeta.total} pageSize={pageMeta.pageSize} current={pageMeta.pageNum} showSizeChanger={true} />}
                {
                    this.state.showModal && <AddModal list={this.state.denyList} onClose={this.closeModal} onSuccess={this.successModal} />
                }
                {
                    lineUuid && <VerifyList onClose={this.closeVerify} lineUuid={lineUuid} />
                }
            </div>
        );
    }
}
export default withRouter(UIComponents as any)