import React, { Component, Fragment } from 'react'
import {
    Page, Validator, Notification, FormItem,
    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 } from 'mobx'
import { Row, Col, Popconfirm, Modal, Spin, Tooltip } from 'antd';
import { PtyPicker } from '@/components/Business-Library'
import { Link, withRouter } from 'react-router-dom'
import Ptspta1 from '@/views/Public/Ptspta1'
import Business from '@/views/Public/Business'
import { YwbhPicker1, YwbhPicker2 } from '@/components/Business-Library'
import Xyzpicker from './Xyzpicker'
import Djpicker from './Djpicker'

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

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

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


    onRefClear = () => {
        if (!this.model.ownref1) {
            this.model.clear()
            this.props.initTrans()
        }
    }

    onDocRefClear = () => {
        if (!this.model.ownref) {
            Validator.validate(this.model, this.model.descriptor, async (errors, values) => {
                if (errors)
                    return
                const rtnmsg = await Api.post("ditsel/bdtmod_clrbdd", { params: { didinr: this.model.inr1 } })
                Object.assign(this.props.model, rtnmsg.data);

            })
        }

    }

    onDitmod_sel = () => {
        this.model.ditmod_clsflg ? this.model.ditmod_clsflg = 'X' : this.model.ditmod_clsflg = null
        console.log(this.model.ditmod_clsflg)
        this.formBlur = true  //已触发表单提交处理
        Validator.validate(this.model, this.model.descriptor, async (errors, values) => {
            if (errors)
                return
            const rtnmsg = await Api.post('ditsel/ditmod_sel', { data: this.model })
            if (rtnmsg.retcod == SUCCESS) {
                Notification.success({ message: '数据提交成功!' })

            }
            else {
                Notification.error({ message: '服务端请求失败!' })
            }
            //余下逻辑处理

        })
    }
    link = (path) => {
        this.props.history.push({ pathname: path, query: { bddinr: this.model.inr } });

    }

    cfgfil_cfgaHeader = [
        {
            title: <Label itext="交易码" />,
            dataIndex: "frm",
            key: "frm",
            width: 100,
            sorter: (r1, r2) => ColSorter(r1.frm, r2.frm),
        },
        {
            title: <Label itext="交易名称" />,
            dataIndex: "frmnam",
            key: "frmnam",
            width: 100,
            sorter: (r1, r2) => ColSorter(r1.frmnam, r2.frmnam),
        },
        {
            title: <Label itext="允许标志" />,
            dataIndex: "alwflg",
            key: "alwflg",
            width: 100,
            sorter: (r1, r2) => ColSorter(r1.alwflg, r2.alwflg),
        },
        {
            title: <Label itext="原因" />,
            dataIndex: "res",
            key: "res",
            width: 100,
            sorter: (r1, r2) => ColSorter(r1.res, r2.res),
        },
    ]
    cfgfil_cfgbHeader = [
        {
            title: <Label itext="交易名称" />,
            dataIndex: "frmnam",
            key: "frmnam",
            width: 100,
            render: (val, row) => {
                if (row.alwflg == 0) {
                    return (<a href='javascript:;' onClick={() => { this.link(row.frm) }} >{val}</a>)
                } else if (row.alwflg == 1) {
                    return (<Tooltip title={row.res}>
                        <span style={{ cursor: 'pointer', color: '#999' }}>{val}</span>
                    </Tooltip>)
                }
            }
        },
    ]

    //交易内实现
    renderPage() {
        const bind = this.bind
        const { i18n } = this.props
        const { bchlevelLst } = 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)} extra={this.props.extra} model={this.model} />
                {/* 第一行 */}
                <Row>
                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                {/* 业务编号 */}
                                <Label itext="业务编号" />
                            </Col>
                            <Col span={6}>
                                <InputItem InputProps={{ ...bind("ownref1"), onBlur: this.onRefClear }} maxLength={16} desp="业务编号" path="/didgrp/rec/ownref" />
                            </Col>
                            <Col span={4} offset={1}>
                                <Xyzpicker size='small' type="primary" model={this.model}>

                                </Xyzpicker>
                            </Col>
                            <Col span={1} offset={0}><CheckboxItem InputProps={bind("ditmod_clsflg")} desp="闭卷业务" path="/ditmod/clsflg" /> </Col>
                            <Col span={4} offset={0}>
                                {/* 闭卷业务 */}
                                <Label itext="闭卷业务" />
                            </Col>
                        </Row>
                    </Col>
                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                {/* 概要描述 */}
                                <Label itext="概要描述" />
                            </Col>
                            <Col span={14}>
                                <InputItem InputProps={bind("nam1")} disabled={true} maxLength={40} desp="概要描述" path="/didgrp/rec/nam" />
                            </Col>
                        </Row>
                    </Col>

                </Row>
                <Row>
                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                {/* 单据编号 */}
                                <Label itext="单据编号" />
                            </Col>
                            <Col span={6}>
                                <InputItem InputProps={{ ...bind("ownref"), onBlur: this.onDocRefClear }} maxLength={16} desp="Own Reference BR Number" path="/bddgrp/rec/ownref" />
                            </Col>
                            <Col span={4} offset={1}>
                                <Djpicker size='small' type="primary" model={this.model}>

                                </Djpicker>
                            </Col>
                            <Col span={1} offset={0}><CheckboxItem InputProps={bind("bdtmod_clsflg")} desp="闭卷业务" path="/bdtmod/clsflg" /> </Col>
                            <Col span={4} offset={0}>
                                {/* 闭卷业务 */}
                                <Label itext="闭卷业务" />
                            </Col>
                        </Row>
                    </Col>
                    <Col span={12}>
                        <Row className="row">
                            <Col span={5} offset={2}>
                                {/* 概要描述 */}
                                <Label itext="概要描述" />
                            </Col>
                            <Col span={14}>
                                <InputItem InputProps={bind("nam")} disabled={true} maxLength={40} desp="Name of Bill Contract" path="/bddgrp/rec/nam" />
                            </Col>
                        </Row>
                    </Col>

                </Row>
                {/* 第二行 */}
                <Row>
                    <Col span={12}>
                        <Row className="row" type='flex'>
                            <Col span={5} offset={2}>
                                {/* 到单金额 */}
                                <Label itext="到单金额" />
                            </Col>
                            <Col span={6}>
                                <SelectItem InputProps={{
                                    ...bind("max_cur"), onChange: val => {
                                        this.model.max_cur = val
                                        this.model.liqtyp = ""
                                        this.model.swftyp = ""
                                    }
                                }}
                                    disabled={true} code={CodeTable.curtxt} />
                            </Col>
                            <Col span={7} offset={1}>
                                <InputItem disabled={true} InputProps={bind("max_amt")} />
                            </Col>


                        </Row>

                    </Col>
                    <Col span={12}>
                        <Col span={5} offset={2}>
                            {/* 申请人名称 */}
                            <Label itext="申请人名称" />
                        </Col>
                        <Col span={14}>
                            <InputItem InputProps={bind("pts1_namcn")} disabled={true} maxLength={100} desp="客户中文名称" path="/didgrp/apl/pts/namcn" />
                        </Col>


                    </Col>

                </Row>
                {/* 第三行 */}
                <Row>
                    <Col span={12}>
                        <Row className="row" type='flex'>
                            <Col span={5} offset={2}>
                                {/* 未付款金额 */}
                                <Label itext="未付款金额" />
                            </Col>
                            <Col span={6}>
                                <SelectItem InputProps={{
                                    ...bind("opn1_cur"), onChange: val => {
                                        this.model.opn1_cur = val
                                        this.model.liqtyp = ""
                                        this.model.swftyp = ""
                                    }
                                }}
                                    disabled={true} code={CodeTable.curtxt} />
                            </Col>
                            <Col span={7} offset={1}>
                                <InputItem InputProps={bind("opn1_amt")} disabled={true} desp="Balance" path="/bddgrp/cbs/opn1/amt" />
                            </Col>
                        </Row>

                    </Col>
                    <Col span={12}>
                        <Col span={5} offset={2}>
                            {/* 受益人名称 */}
                            <Label itext="受益人名称" />
                        </Col>
                        <Col span={14}>
                            <InputItem InputProps={bind("pts2_namcn")} disabled={true} maxLength={100} desp="客户中文名称" path="/didgrp/ben/pts/namcn" />
                        </Col>
                    </Col>

                </Row >
                {/* 第四行 */}
                <Row>
                    <Col span={12}>
                        <Row className="row" type='flex'>
                            <Col span={5} offset={2}>
                                {/* 到单日期 */}
                                <Label itext="到单日期" />
                            </Col>
                            <Col span={10}>
                                <DatePickerItem InputProps={bind("opndat")} disabled={true} desp="Date of Opening" path="/bddgrp/rec/opndat" />
                            </Col>

                        </Row>

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



                        <Col span={5} offset={2}>
                            {/* 通知行名称 */}
                            <Label itext="通知行名称" />
                        </Col>
                        <Col span={14}>
                            <InputItem InputProps={bind("pts_namcn")} disabled={true} maxLength={100} desp="客户中文名称" path="/didgrp/adv/pts/namcn" />
                        </Col>
                    </Col>

                </Row >

                <Row>
                    <Col span={12}>
                        <Row className="row" type='flex'>
                            <Col span={5} offset={2}>
                                {/* 单据期限 */}
                                <Label itext="单据期限" />
                            </Col>
                            <Col span={10}>
                                <DatePickerItem InputProps={bind("matdat")} disabled={true} desp="Maturity Date" path="/bddgrp/rec/matdat" />
                            </Col>
                            <Col span={7}>

                            </Col>
                        </Row>

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



                        <Col span={5} offset={2}>
                            {/* 单据类型 */}
                            <Label itext="单据类型" />
                        </Col>
                        <Col span={14}>
                            <SelectItem InputProps={bind("docflg")} disabled={true} code={CodeTable.doc} desp="单据类型" path="/bddgrp/rec/docflg" />
                        </Col>
                    </Col>

                </Row >

                <Row>
                    <Col span={12}>
                        <Row className="row" type='flex'>
                            <Col span={5} offset={2}>
                                {/* 提运单号 */}
                                <Label itext="提运单号" />
                            </Col>
                            <Col span={10}>
                                <InputItem InputProps={bind("billno")} disabled={true} maxLength={20} desp="提运单号" path="/bddgrp/rec/billno" />
                            </Col>
                            <Col span={7}>

                            </Col>
                        </Row>

                    </Col>
                    <Col span={12}>
                        <Col span={5} offset={2}>
                            {/* 承兑到期日 */}
                            <Label itext="承兑到期日" />
                        </Col>
                        <Col span={14}>
                            <DatePickerItem InputProps={bind("accdat")} disabled={true} desp="Acceptance Date" path="/bddgrp/rec/accdat" />
                        </Col>
                    </Col>

                </Row >



                <Row style={{ marginTop: 30 }}>
                    <Col span={12}>

                      
                    <Col span={19} offset={2} >
                          
                        <pre>{this.model.bdtmod_othinf}</pre>
                       </Col>
                    </Col>

                    <Col span={10} offset={1}>
                        <Table rowKey="inr" columns={this.cfgfil_cfgbHeader} dataSource={this.model.cfgfil_cfgb} path="/cfgfil/cfgb" /></Col>

                </Row >


            </div >
        )
    }
}
