import * as React from 'react';
import { PageHeaderFoot, Button, message, Table, Tag, PageHeaderTop } from 'kts-xui';
import { Descriptions, Tooltip, Menu, } from 'kts-components-antd-x4';
import { taskStatusEnum, findLabel } from '../../CommonComponents/FiledsEnum';
import agent from '../../Server';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import InvoiceList from './invoicelist'
import './index.less';
import moment from 'moment';
import ConnectHeader from './ConnectHeader';
import OriginalDrawer from './OriginalDrawer'
/** Props接口 */
interface IProps {
    onSuccess: () => void;
}
export default class UIComponents extends React.Component<any, any> {
    constructor(props: IProps) {
        super(props);
        this.state = {
            data: {},
            taskUuid: this.props.match.params.id,
            originalModal: false
        };
    }
    componentDidMount() {
        this.getData();
    }
    onDelete = (keys: string[]) => {
        const { list } = this.state;
        const newList = list.filter((item) => {
            return keys.every(element => element !== item.key);
        })
        this.setState({
            list: newList
        });
    }
    getData = async () => {
        const res: any = await agent.post('/web/verifierTask/getDetail', { taskUuid: this.state.taskUuid }, this);
        if (res.er) {
            return;
        } else {
            this.setState({
                data: res.res || {}
            });
        }
    }
    send = () => {

    }

    onSuccess = (list: any[]) => {
        console.log(list);
    }
    refreshInvoice = () => {

    }
    changeView = (radio: string) => {
        this.setState({
            selectedRadio: radio
        })
    }
    deleteTask = async () => {
        const res: any = await agent.post('/web/verifierTask/deleteTask', { taskUuid: this.state.taskUuid }, this);
        if (res.er) {
            return;
        } else if (res.res) {
            message.success('操作成功');
            this.props.history.goBack();
        }
    }
    onViewAll = () => {
        this.setState({
            originalModal: true
        })
    }
    closeOriginal = () => {
        this.setState({
            originalModal: false
        })
    }
    showoriginalDocList = () => {
        const { data } = this.state;
        const list = data.originalDocList?.slice(0, 1);
        const length = data.originalDocList?.length;
        return <span>
            {list && list.map((item, key) => {
                return <>{item.originalDocument}<br /></>
            })}
            {length > 1 && <a onClick={this.onViewAll}>查看全部</a>}
        </span>
    }
    toRisk = () => {
        const { data } = this.state;
        this.props.history.push({ pathname: '/task/list/echart', search: 'radio=customer', state: { taskNo: data.taskNo } })
    }
    render() {
        const { data, taskUuid, originalModal } = this.state;
        return (
            <div style={{ position: 'relative', background: 'white' }}>
                <div style={{ zIndex: 3, width: '100%', background: 'white' }}>
                    <PageHeaderTop
                        title="数字资产核验方"
                        help=""
                    />
                    <PageHeaderFoot
                        title={<ConnectHeader data={data} />}
                        expandRight={[
                            data.status === 1 && <Button key="0" type="primary" onClick={this.deleteTask}>删除</Button>,
                            // data.status === 2 && <Button key="1" type="primary" onClick={this.send}>提交</Button>,
                            <Button key='2' onClick={() => { this.props.history.goBack(); }}>返回</Button>,
                        ]}
                    />
                </div>
                <div style={{ padding: '20px 20px 0' }} className="content">
                    <Descriptions layout="vertical">
                        <Descriptions.Item label="核验方">{data.verifierParty}</Descriptions.Item>
                        <Descriptions.Item label="采集方">{data.verifiedParty}</Descriptions.Item>
                        <Descriptions.Item label="任务截止日期">{data.taskEndDate && moment(data.taskEndDate).format('YYYY-MM-DD')}</Descriptions.Item>
                        <Descriptions.Item label="任务创建人">{data.creator}</Descriptions.Item>
                        <Descriptions.Item label="关联单据">
                            {this.showoriginalDocList()}
                        </Descriptions.Item>
                        <Descriptions.Item label="核验日期范围">{data.effectiveStart && <span>{moment(data.effectiveStart).format('YYYY-MM-DD')}～{moment(data.effectiveEnd).format('YYYY-MM-DD')}</span>}</Descriptions.Item>
                        <Descriptions.Item label="备注">{data.remark}</Descriptions.Item>
                        <Descriptions.Item label="风险等级">
                            {data.riskGrade === 10 && <span style={{ color: 'red' }} >高 <a style={{ color: '#0074ff' }} onClick={this.toRisk}>查看详情</a></span>}
                            {data.riskGrade === 20 && <span style={{ color: 'orange' }} >中 <a style={{ color: '#0074ff' }} onClick={this.toRisk}>查看详情</a></span>}
                            {data.riskGrade === 30 && <span style={{ color: '#0074ff' }} >低 <a style={{ color: '#0074ff' }} onClick={this.toRisk}>查看详情</a></span>}
                        </Descriptions.Item>

                    </Descriptions>

                </div>
                {originalModal && <OriginalDrawer onClose={this.closeOriginal} data={data} />}
                <InvoiceList taskUuid={taskUuid} />
            </div>
        );
    }

}