import React, { Component, Fragment } from 'react'
import {
    Page, Validator, Notification, FormItem, BottomBtn,
    InputItem, Input, Bind, SelectItem, Button, Label, DatePickerItem, Section, ConfirmButton, Steps, CheckboxItem, TextAreaItem, Table
} from '@/components/Common-Library'
import Api from '@/service/api'
import CodeTableFactory from '@/components/CodeTable'
import "./index.less"
import { inject, observer } from 'mobx-react'
import { action, observable, autorun } from 'mobx'
import { Row, Col, Tooltip, Modal, Spin } from 'antd';
import { Link, withRouter } from 'react-router-dom'
import Ptspta1 from '@/views/Public/Ptspta1'
import Business from '@/views/Public/Business'
import Ditdck from '../model';
import moment from 'moment';


const { Pre, Next, StepWrapper } = Steps
const CodeTable = CodeTableFactory.getInstance()
const confirm = Modal.confirm

@withRouter
@inject('UserContext')
@inject('i18n')
@observer
export default class BasicScreen extends Page {
    @observable
    formBlur = false

    constructor(props) {
        super(props)
        this.model = props.model
        this.bind = Bind.bind(this)
    }


    //交易描述赋值
    componentDidMount() {
        super.componentDidMount()
        this.autoDispose = autorun(() => {
            //计算计息天数
            if (this.model.expdat && this.model.opndat) {
                let expdat = new Date(this.model.expdat)
                let opndat = new Date(this.model.opndat)
                if (expdat > opndat) {
                    this.model.intday = ((expdat - opndat) / (24 * 3600 * 1000)).toString()
                }
                else {
                    this.model.intday = "0"
                }


            }

            let ffttyp = CodeTable.ffttyp.find(item => {
                if (item.value == this.model.ffttyp) {
                    return item
                }
            })
            ffttyp = ffttyp.label;
            this.model.nam = `${ffttyp} ${this.model.max_cur}   ${this.model.max_amt}   ${this.model.pts1_namcn}`
            //     this.model.intday = (Number(this.model.expdat)-Number(this.model.opndat)).toString()
            if(this.model.max_amt){
                this.model.basrat=(this.model.max_amt * 100 / this.model.docamt).toFixed(2)
              }else{
                this.model.basrat="0"
              }
        })
    }
    componentWillUnmount() {
        this.autoDispose && this.autoDispose()
    }

    //按钮事件 获取业务编号
    onGetref = async () => {
        // this.model.ditmod_clsflg ? this.model.ditmod_clsflg = 'X' : this.model.ditmod_clsflg = null   //勾选
        const rtnmsg = await Api.post(this.props.extra.inifrm + '/getref', { data: this.model })
        if (rtnmsg.retcod == SUCCESS) {
            // Notification.success({ message: 'cptopn/mtabut/getref数据提交成功!' })
            this.model.ownref = rtnmsg.data.ownref;
        }
        else {
            Notification.error({ message: '请求失败!' })
        }
        //余下逻辑处理
    }

    dateDisabled = (time) => {

        return time && time < moment().subtract(1, "days")// 大于当前日期不能选

    }



    //交易内实现
    renderPage() {
        const bind = this.bind
        const { i18n } = this.props
        const { ownbch, ffttyp } = this.props.extra
        //const {next,pre} = this.props.steps
        if (this.props.flag == true) {
            return <Spin style={{ width: "100%", justifyContent: "center" }} spinning={this.props.flag} />
        }
        return (
            <div style={{ position: 'relative' }}>
                <Business  wrappedComponentRef={ref => (this.com = ref)} page={this} steps={this.props.steps} extra={this.props.extra}  model={this.model} />
                {/* 第一行 */}
                <Row>
                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                {/*关联单据编号*/}
                                <Label itext="关联单据编号" trn="fptopn" />
                            </Col>
                            <Col span={10}>
                                <InputItem InputProps={bind("pntref")} disabled={true} maxLength={16} desp="关联单据编号" path="/fpdgrp/rec/pntref" />
                            </Col>

                        </Row>
                    </Col>
                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                {/* 关联单据描述 */}
                                <Label itext="关联单据描述" trn="fptopn" />
                            </Col>
                            <Col span={14}>
                                <InputItem InputProps={bind("pntnam")} disabled={true} maxLength={100} desp="关联单据描述" path="/fpdgrp/rec/pntnam" />
                            </Col>
                        </Row>
                    </Col>

                </Row>
                {/* 第二行 */}
                <Row>
                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                {/* 业务编号 */}
                                <Label itext="业务编号" trn="fptopn" />
                            </Col>
                            <Col span={10}>
                                <InputItem disabled={true} InputProps={bind("ownref")} maxLength={16} desp="福费廷编号" path="/fpdgrp/rec/ownref" />
                            </Col>
                            <Col span={4} offset={1}>
                                <Button type="primary" onClick={this.onGetref} desp="Get Ref." path="/mtabut/getref">
                                    <Label itext="获取" />
                                </Button>
                            </Col>

                        </Row>
                    </Col>

                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                {/* 描述 */}
                                <Label itext="描述" />
                            </Col>
                            <Col span={14}>
                                <InputItem disabled={true} InputProps={bind("nam")} code={CodeTable.ffttyp} maxLength={100} desp="描述" path="/fpdgrp/rec/nam" />
                            </Col>
                        </Row>
                    </Col>

                </Row>
                {/* 第二行 */}
                <Row>
                    <Col span={12}>
                        <Col span={24}>
                            <Row className="row">
                                <Col span={5} offset={2}>
                                    {/*信用证编号*/}
                                    <Label itext="信用证编号" trn="fptopn" />
                                </Col>
                                <Col span={10}>
                                    <InputItem disabled={true} InputProps={bind("lcref")} maxLength={16} desp="信用证编号" path="/fpdgrp/rec/lcref" />
                                </Col>
                            </Row>
                        </Col>
                        <Col span={24}>
                            <Row className="row">
                                <Col span={5} offset={2}>
                                    {/* 福费廷类型 */}
                                    <Label itext="福费廷类型" trn="fptopn" />
                                </Col>
                                <Col span={6}>
                                    <SelectItem InputProps={bind("ffttyp")} code={CodeTable.ffttyp} disabled={true} />
                                </Col>
                            </Row>
                        </Col>

                        <Col span={24}>
                            <Row className="row">
                                <Col span={5} offset={2}>
                                    {/* 信用证金额 */}
                                    <Label itext="信用证金额" trn="fptopn" />
                                </Col>
                                <Col span={6}>
                                    <SelectItem InputProps={{
                                        ...bind("maxlca_cur"), onChange: val => {
                                            this.model.maxlca_cur = val
                                            this.model.liqtyp = ""
                                            this.model.swftyp = ""
                                        }
                                    }}
                                        disabled={true}
                                        code={CodeTable.curtxt} />
                                </Col>
                                <Col span={7} offset={1}>
                                    <InputItem disabled={true} InputProps={{ ...bind("maxlca_amt"), type: "amount", cur: this.model.maxlca_cur }} />
                                </Col>
                            </Row>
                        </Col>
                    </Col>



                    <Col span={12}>

                        <Ptspta1 model={this.model} argArr={{ desc: "转卖方", prefix: 'pts1', url: 'fptopn/selp_ptysel', flg: 'B', datakey: '\\fptp\\selp\\ptslst' }} formBlur={this.formBlur}/>
                    </Col>

                </Row>
                {/* 第三行 */}
                <Row>
                    <Col span={12}>
                        <Col span={24}>
                            <Row className="row">
                                <Col span={5} offset={2}>
                                    {/* 信用证开立日期 */}
                                    <Label itext="信用证开立日期" trn="fptopn" />
                                </Col>
                                <Col span={6}>
                                    <DatePickerItem disabled={true} dateDisabled={this.dateDisabled} InputProps={bind("opndatlc")} desp="信用证开立日期" path="/fpdgrp/rec/opndatlc" />
                                </Col>



                                <Col span={24}>
                                    <Row className="row">
                                        <Col span={5} offset={2}>
                                            {/* 信用证失效日期 */}
                                            <Label itext="信用证失效日期" trn="fptopn" />
                                        </Col>
                                        <Col span={6}>
                                            <DatePickerItem disabled={true} InputProps={bind("expdatlc")} desp="信用证失效日期" path="/fpdgrp/rec/expdatlc" />
                                        </Col>
                                    </Row>
                                </Col>

                                <Col span={24}>
                                    <Row className="row">
                                        <Col span={5} offset={2}>
                                            {/* 承兑到期日 */}
                                            <Label itext="承兑到期日" trn="fptopn" />
                                        </Col>
                                        <Col span={6}>
                                            <DatePickerItem disabled={true} InputProps={bind("docmatdat")} desp="承兑到期日" path="/fpdgrp/rec/docmatdat" />
                                        </Col>
                                    </Row>
                                </Col>

                            </Row>

                        </Col>
                    </Col>
                    <Col span={12}>

                        <Ptspta1 model={this.model} argArr={{ desc: "开证行", prefix: 'pts', url: 'fptopn/invp_ptysel', flg: 'B', datakey: '\\fptp\\invp\\ptslst' }} formBlur={this.formBlur} />
                    </Col>

                </Row >
                {/* 第四行 */}
                
                <Row>
                    <Col span={12}>
                        <Row className="row" >
                            <Col span={5} offset={2}>
                                {/* 归属机构 */}
                                <Label itext="归属机构" trn="fptopn" />
                            </Col>
                            <Col span={14}>
                                <SelectItem InputProps={bind("ownbch")} code={ownbch} desp="归属机构" path="/fpdgrp/rec/ownbch" />
                            </Col>

                        </Row>

                    </Col>


                </Row >

                <Row>
                    <Col span={12}>
                        <Row className="row">

                            <Col span={5} offset={2}>
                                {/* 合同编号 */}
                                <Label itext="合同编号" trn="fptopn" />
                            </Col>
                            <Col span={14}>
                                <InputItem InputProps={bind("conno")} maxLength={32} desp="合同编号" path="/fpdgrp/rec/conno" />


                            </Col>
                        </Row>

                    </Col>
                    <Col span={12}>
                        <Row className="row">

                            <Col span={5} offset={2}>
                                {/* 发票号 */}
                                <Label itext="发票号" trn="fptopn" />
                            </Col>
                            <Col span={14}>
                                <InputItem InputProps={bind("invno")} maxLength={32} desp="发票编号" path="/fpdgrp/rec/invno" />
                            </Col>
                        </Row>
                    </Col>

                </Row >
                <Row>
                    <Col span={12}>
                        <Row className="row" type='flex'>

                            <Col span={5} offset={2}>
                                {/* 单据金额 */}
                                <Label itext="单据金额" trn="fptopn" />
                            </Col>
                            <Col span={6}>
                                <SelectItem InputProps={{
                                    ...bind("doccur"), onChange: val => {
                                        this.model.doccur = val
                                        this.model.liqtyp = ""
                                        this.model.swftyp = ""
                                    }
                                }}
                                    disabled={true} code={CodeTable.curtxt} />
                            </Col>
                            <Col span={7} offset={1}>
                                {/* <InputItem InputProps={bind("docamt")} desp="索偿金额" path="/bddgrp/rec/docamt" /> */}
                                <InputItem disabled={true} InputProps={{ ...bind("docamt"), type: "amount", cur: this.model.doccur }} />
                            </Col>
                        </Row>

                    </Col>
                    <Col span={12}>
                        <Row className="row" type='flex'>
                            <Col span={5} offset={2}>
                                {/* 福费廷利率 */}
                                <Label itext="福费廷利率（%）" trn="fptopn" />
                            </Col>
                            <Col span={14}>
                                <InputItem disabled={true} InputProps={bind("basrat")} desp="基准利率" path="/fpdgrp/rec/basrat" />
                            </Col>
                        </Row>
                    </Col>

                </Row >

                <Row>
                    <Col span={12}>
                        <Row className="row">

                            <Col span={5} offset={2}>
                                {/* 福费廷金额 */}
                                <Label itext="福费廷金额" trn="fptopn" />
                            </Col>
                            <Col span={6}>
                                <SelectItem InputProps={{
                                    ...bind("max_cur"), onChange: val => {
                                        this.model.max_cur = val
                                        this.model.liqtyp = ""
                                        this.model.swftyp = ""
                                    }
                                }}
                                    code={CodeTable.curtxt} />
                            </Col>
                            <Col span={7} offset={1}>
                                <InputItem InputProps={{ ...bind("max_amt"), type: "amount", cur: this.model.max_cur }} />
                            </Col>
                        </Row>

                    </Col>
                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                {/* 计息方式 */}
                                <Label itext="计息方式" trn="fptopn" />
                            </Col>
                            <Col span={14}>
                                <SelectItem InputProps={bind("iratyp")} code={CodeTable.iratyp} desp="计息方式" path="/fpdgrp/rec/iratyp" />
                            </Col>
                        </Row>
                    </Col>

                </Row >


                <Row>
                    <Col span={12}>
                        <Row className="row" >
                            <Col span={5} offset={2}>
                                {/* 起息日 */}
                                <Label itext="起息日" trn="fptopn" />
                            </Col>
                            <Col span={6}>
                                <DatePickerItem dateDisabled={this.dateDisabled} InputProps={bind("opndat")} desp="福费廷开立日期" path="/fpdgrp/rec/opndat" />
                            </Col>

                        </Row>

                    </Col>
                    <Col span={12}>
                        <Row className="row" >

                            <Col span={5} offset={2}>
                                {/* 宽限期 */}
                                <Label itext="宽限期（天）" trn="fptopn" />
                            </Col>
                            <Col span={14}>
                                <InputItem InputProps={bind("grcdys")} desp="宽限期" path="/fpdgrp/rec/grcdys" />
                            </Col>
                        </Row>
                    </Col>
                </Row >


                <Row>
                    <Col span={12}>
                        <Row className="row" >
                            <Col span={5} offset={2}>
                                {/* 到期日 */}
                                <Label itext="到期日" trn="fptopn" />
                            </Col>
                            <Col span={6}>
                                <DatePickerItem InputProps={bind("expdat")} desp="福费廷到期日" path="/fpdgrp/rec/expdat" />
                            </Col>
                        </Row>

                    </Col>
                    <Col span={12}>
                        <Row className="row" >
                            <Col span={5} offset={2}>
                                {/* 计息天数 */}
                                <Label itext="计息天数（天）" trn="fptopn" />
                            </Col>
                            <Col span={14}>
                                <InputItem InputProps={bind("intday")} desp="计息天数" path="/fpdgrp/rec/intday" />
                            </Col>
                        </Row>
                    </Col>
                </Row >

                {/* 底部按钮 */}
                <BottomBtn _this={this} />
            </div >
        )
    }
}
