import React,{ Component } from 'react';
import {Button, DatePicker, Select, Table, Input, Modal, Spin, message} from "antd";
import moment from "moment";
import $ from "jquery";

const { Option } = Select

class PatentSchedule extends Component{
    constructor(props) {
        super(props);
        this.state={
            columns: [
                {
                    title: '批次',
                    dataIndex: 'key',
                    key: 'key',
                },
                {
                    title: '专利号',
                    dataIndex: 'patentNo',
                    key: 'patentNo',
                    render: (text, record) => {
                        return !record.isChange ? text : <Input
                            size={'small'}
                            style={{
                                width: '100px'
                            }}
                            onChange={(e)=>{
                            this.changeEvidence(e.target.value,record.key,'patentNo')
                        }}/>
                    }
                },
                {
                    title: '专利名称',
                    dataIndex: 'patentName',
                    key: 'patentName',
                    render: (text, record) => {
                        return !record.isChange ? text : <Input style={{
                            width: '100px'
                        }} size={'small'} onChange={(e)=>{
                            this.changeEvidence(e.target.value,record.key,'patentName')
                        }}/>
                    }
                },
                {
                    title: '受理时间',
                    dataIndex: 'acceptTimes',
                    key: 'acceptTimes',
                    render: (text, record) => {
                        return !record.isChange ? text : <DatePicker
                            size={'small'}
                            style={{
                                marginTop: '4px',
                                width: '100px'
                            }}
                            showTime
                            format="YYYY-MM-DD"
                            onChange={(data, dataString) => {
                                this.changeEvidence(dataString,record.key,'acceptTimes')
                            }}
                        />
                    }
                },
                {
                    title: '授权时间',
                    dataIndex: 'authorizeTimes',
                    key: 'authorizeTimes',
                    render: (text, record) => {
                        return !record.isChange ? text : <DatePicker
                            size={'small'}
                            style={{
                                marginTop: '4px',
                                width: '100px'
                            }}
                            showTime
                            format="YYYY-MM-DD"
                            onChange={(data, dataString) => {
                                this.changeEvidence(dataString,record.key,'authorizeTimes')
                            }}
                        />
                    }
                },
                {
                    title: '下证时间',
                    dataIndex: 'licenceTimes',
                    key: 'licenceTimes',
                    render: (text, record) => {
                        return !record.isChange ? text : <DatePicker
                            size={'small'}
                            style={{
                                marginTop: '4px',
                                width: '100px'
                            }}
                            showTime
                            format="YYYY-MM-DD"
                            onChange={(data, dataString) => {
                                this.changeEvidence(dataString,record.key,'licenceTimes')
                            }}
                        />
                    }
                },
                {
                    title: '通过/驳回',
                    dataIndex: 'status',
                    key: 'status',
                    render: (text, record) => {
                        return !record.isChange ? text === 1 ? '通过' : '驳回' : <Select size={'small'} onChange={(v)=>{
                            this.changeEvidence(v,record.key,'status')
                        }}>
                            <Option value={1}>通过</Option>
                            <option value={2}>驳回</option>
                        </Select>
                    }
                },
                {
                    title: '操作',
                    dataIndex: 'h',
                    key: 'h',
                    render: (text, record) => {
                        return (
                            <span>
                                <Button
                                    size={'small'}
                                    style={{
                                        marginRight:'10px',
                                        color: '#ffffff',
                                        background: '#f00',
                                        border: 'none',
                                    }}
                                    onClick={()=>{
                                        let _this = this;
                                        if(record.isChange){
                                            this.state.dataSource.splice(record.key-1,1)
                                            this.setState({
                                                dataSource: this.state.dataSource
                                            })
                                        }else{
                                            confirm({
                                                title: '提醒',
                                                content: '确定要删除吗?',
                                                onOk() {
                                                    _this.delectTaskProgress(record.id)
                                                }
                                            })
                                        }
                                    }}
                                >
                                    删除
                                </Button>
                                {record.isChange &&<Button size={'small'} type='primary' onClick={()=>{
                                    this.createTaskProgress(record);
                                    console.log(record)
                                }}>保存</Button> }
                            </span>
                        )
                    }
                }
            ],
            dataSource: [],
            visible: false,
            columnsA: [
                {
                    title: '时间',
                    dataIndex: 'h',
                    key: 'h',
                },
                {
                    title: '操作类型',
                    dataIndex: 'h',
                    key: 'h',
                    render: (text, record) => {
                        return text === 0 ? '新增' : '删除'
                    }
                },
                {
                    title: '专利号',
                    dataIndex: 'h',
                    key: 'h',
                }
            ],
            dataSourceA: [],
            progressLogLoading: false,
        };
        this.changeEvidence = this.changeEvidence.bind(this);
        this.createTaskProgress = this.createTaskProgress.bind(this);
        this.selectTaskProgressLog = this.selectTaskProgressLog.bind(this);
        this.delectTaskProgress = this.delectTaskProgress.bind(this);
    }

    changeEvidence(value,index,key){
        this.state.dataSource[index-1][key] = value;
        this.setState({
            dataSource: this.state.dataSource
        })
    }

    //新增申报进度
    createTaskProgress(record) {
        delete record.isChange;
        delete record.key;
        record.taskId = this.props.taskId;
        record.alreadyNumber = 1;
        $.ajax({
            method: 'post',
            dataType: 'json',
            crossDomain: false,
            url: globalConfig.context + '/api/admin/orderProject/createTaskProgress',
            data: record,
            success: function (data) {
                if (data.error.length) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message)
                    }
                }else{
                    message.success('添加成功');
                }
            }.bind(this),
        }).always(
            function () {
                this.setState({
                    loading: false,
                })
            }.bind(this)
        )
    }

    //申报进度日志
    selectTaskProgressLog() {
        this.setState({
            loading: true,
        })
        $.ajax({
            method: 'get',
            dataType: 'json',
            crossDomain: false,
            url: globalConfig.context + '/api/admin/orderProject/selectTaskProgressLog',
            data: {
                tid: this.props.taskId,
            },
            success: function (data) {
                let theArr = []
                if (data.error.length || data.data.list === '') {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message)
                    }
                } else {
                    for (let i = 0; i < data.data.length; i++) {
                        let thisdata = data.data[i];
                        thisdata.key = i;
                        theArr.push(thisdata)
                    }
                }
                this.setState({
                    dataSourceA: theArr,
                })
            }.bind(this),
        }).always(
            function () {
                this.setState({
                    loading: false,
                })
            }.bind(this)
        )
    }

    // 删除申报进度
    delectTaskProgress(id) {
        this.setState({
            loading: true,
        })
        $.ajax({
            method: 'post',
            dataType: 'json',
            crossDomain: false,
            url: globalConfig.context + '/api/admin/orderProject/delectTaskProgress',
            data: {
                id
            },
            success: function (data) {
                if (data.error.length) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message)
                    }
                }else{
                    message.success('删除成功');
                }
            }.bind(this),
        }).always(
            function () {
                this.setState({
                    loading: false,
                })
            }.bind(this)
        )
    }

    componentDidMount() {

    }

    render() {
        return (
            <div>
                <div style={{
                    display:'flex',
                    alignItems:'center',
                    paddingLeft: '7%',
                    paddingRight: '10%',
                    color: '#000',
                    fontWeight: 400,
                }}>
                    <div style={{paddingRight:'10px'}}>派单项目数:20</div>
                    <div style={{paddingRight:'10px'}}>受理数:20</div>
                    <div style={{paddingRight:'10px'}}>下证数(即授权数):20</div>
                    <div>驳回数:20</div>
                    <div style={{display:'flex',alignItems:'center',marginLeft:'auto'}}>
                        <Button
                            type="primary"
                            style={{ marginRight: '15px' }}
                            onClick={()=>{
                                this.state.dataSource.push({
                                    key: this.state.dataSource.length+1,
                                    isChange: true,
                                })
                                this.setState({
                                    dataSource: this.state.dataSource
                                })
                            }}
                        >
                            增加专利信息
                        </Button>
                        <Button
                            type="primary"
                            onClick={()=>{
                                this.selectTaskProgressLog();
                                this.setState({
                                    visible: true
                                })
                            }}
                        >
                            操作日志
                        </Button>
                    </div>
                </div>
                <div style={{
                    paddingLeft: '7%',
                    paddingRight: '10%',
                    paddingTop:'10px'
                }}>
                    <Spin spinning={this.state.progressLogLoading}>
                        <Table
                            columns={this.state.columns}
                            scroll={{ x: 'max-content', y: 0 }}
                            dataSource={this.state.dataSource}
                            pagination={false}
                            bordered
                            size={'small'}
                        />
                    </Spin>
                </div>
                {this.state.visible ? <Modal
                    width="800px"
                    visible={this.state.visible}
                    onCancel={()=>{
                        this.setState({
                            visible: false
                        })
                    }}
                    title="操作日志"
                    footer=""
                    className="admin-desc-content"
                >
                    <div className="patent-table patent-table-center">
                        <Spin spinning={this.state.loading}>
                            <Table
                                columns={this.state.columnsA}
                                dataSource={this.state.dataSourceA}
                                pagination={false}
                                bordered
                                size="small"
                            />
                        </Spin>
                    </div>
                </Modal> : null}
            </div>
        )
    }
}

export default PatentSchedule;
