import React, { Component, Fragment } from 'react'
import {
	Page, Validator, Notification, FormItem, BottomBtn,
	InputItem, Input, Bind, SelectItem, Button, Label, DatePickerItem, Section, ConfirmButton, Steps, TextAreaItem
} 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, Popconfirm, Modal, Spin } 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 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 OvwpScreen extends Page {
	@observable
	formBlur = false

	constructor(props) {
		super(props)
		this.model = props.model
		this.bind = Bind.bind(this)
	}
	//交易描述赋值
	componentDidMount() {
		super.componentDidMount()
		this.autoDispose = autorun(() => {
			this.model.nam = `${this.model.nom1_cur}   ${this.model.max_amt}   ${this.model.pts3_namcn || ""}`
			this.model.max_amt = (this.model.nom1_amt * (1 + this.model.nomtop / 100)).toFixed(2) //最大金额计算
      if (this.model.avbby == 'SIGT') {
				this.model.tenmaxday = ''
			}else{
				if(this.model.tenmaxday>366){
					this.model.tenmaxday='366';
				}
			}
		})
	}
	componentWillUnmount() {
		this.autoDispose && this.autoDispose()
	}

	//按钮事件 获取业务编号
	onGetref = async () => {
		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: '请求失败!' })
		}
		//余下逻辑处理
	}
	
  dateChange=(date)=>{
    let opndat=new Date(date);
    let expdat=this.model.expdat;
    expdat=new Date(expdat);
    if(!date){
      this.model.expdat=""
    }else if(opndat >= expdat){
      this.model.expdat=""
    }
  }

	//交易内实现
	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)} page={this} extra={this.props.extra} steps={this.props.steps} model={this.model} />
				{/* 第一行 */}
				<Row>
					<Col span={12}>
						<Row className="row">
							<Col span={5} offset={2}>
								{/* 业务编号 */}
								<Label itext="业务编号" />
							</Col>
							<Col span={10}>
								<InputItem InputProps={bind("ownref")} maxLength={16} disabled={true} desp="业务编号" path="/didgrp/rec/ownref" />
							</Col>
							<Col span={4} offset={1}>
								<Button type="primary" onClick={this.onGetref} desp="Get Ref." path="/mtabut/getref" disabled={this.model.ownref}>
									<Label itext="获取" />
								</Button>
							</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="概要描述" path="/didgrp/rec/nam" />
							</Col>
						</Row>
					</Col>

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

							</Row>
						</Col>
						<Col span={24}>
							<Row className="row">
								<Col span={5} offset={2}>
									{/* 归属机构*/}
									<Label itext="客户经理" />
								</Col>
								<Col span={14}>
									<InputItem InputProps={bind("accusr")} maxLength={8} desp="客户经理" path="/didgrp/rec/accusr" />
								</Col>
							</Row>
						</Col>
						<Col span={24}>
							<Row className="row">
								<Col span={5} offset={2}>
									{/* 清算路径 */}
									<Label itext="开立日期" />
								</Col>
								<Col span={10}>
									<DatePickerItem InputProps={{...bind("opndat"),onAfterChange:this.dateChange}} desp="开立日期" path="/didgrp/rec/opndat"  dateDisabled={(time)=>time && time > moment()} />
								</Col>
							</Row>
						</Col>
					</Col>
					<Col span={12}>
						<Ptspta1 model={this.model} argArr={{ desc: "申请人", prefix: 'pts3', url: 'ditreg/aplp_ptysel', flg: 'C', datakey: '\\ditp\\aplp\\ptslst' }} />
					</Col>

				</Row>
				{/* 第三行 */}
				<Row>
					<Col span={12}>
            <Row className="row">
							<Col span={24}>
								<Col span={5} offset={2}>
									{/* 有效日期 */}
									<Label itext="有效日期" />
								</Col>
								<Col span={14}>
									<DatePickerItem InputProps={bind("expdat")} desp="有效日期" path="/didgrp/rec/expdat" disabled={!this.model.opndat} />
								</Col>
							</Col>
						</Row>
					</Col>
					<Col span={12}>
						<Row className="row">
							<Col span={5} offset={2}>
								{/* 申请人账号 */}
								<Label itext="申请人账号" />
							</Col>
							<Col span={14}>
								<InputItem InputProps={bind("pts3_extact")} maxLength={32} desp="结算账号" path="/didgrp/apl/pts/extact" />
							</Col>
						</Row>
					</Col>
				</Row>

				<Row>
					<Col span={12}>
            <Col span={24}>
              <Row className="row" >
                <Col span={5} offset={2}>
                  {/* 信用证金额 */}
                  <Label itext="信用证金额" />
                </Col>
                <Col span={6}>
                  <SelectItem InputProps={{
                    ...bind("nom1_cur"), onChange: val => {
                      this.model.nom1_cur = val
                      this.model.liqtyp = ""
                      this.model.swftyp = ""
                    }
                  }}
                    disabled={true} code={CodeTable.curtxt} />
                </Col>
                <Col span={7} offset={1}>
                  {/* <InputItem InputProps={bind("nom1_amt")} /> */}
                  <InputItem   InputProps={ {...bind("nom1_amt"), type:"amount", cur:this.model.nom1_cur} } />
                </Col>
              </Row>
            </Col>
						<Col span={24}>
							<Row className="row">
								<Col span={5} offset={2}>
									{/* 上下浮动比例+/-% */}
									<Label itext="上下浮动比例+/-%" />
								</Col>
								<Col span={6}>
									<InputItem InputProps={bind("nomtop")} desp="上浮" path="/didgrp/rec/nomtop" />
								</Col>
								<Col span={1} offset={1}>
									<Label itext="/" />
								</Col>
								<Col span={6}>
									<InputItem InputProps={bind("nomton")} desp="下浮" path="/didgrp/rec/nomton" />
								</Col>
							</Row>
						</Col>
						<Col span={24}>
							<Row className="row">
								<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 InputProps={bind("max_amt")} /> */}
									<InputItem   InputProps={ {...bind("max_amt"), type:"amount", cur:this.model.max_cur} } disabled={true} />
								</Col>
							</Row>
						</Col>
					</Col>
					<Col span={12}>
						<Ptspta1 model={this.model} argArr={{ desc: "受益人", prefix: 'pts4', url: 'ditreg/benp_ptysel', flg: 'C', datakey: '\\ditp\\benp\\ptslst' }} />
					</Col>
				</Row >
					{/* 第四行 */}
					<Row>
						<Col span={12}>
							<Row className="row">
								<Col span={5} offset={2}>
									<Label itext="开证类型" />
								</Col>
								<Col span={14}>
                  <SelectItem InputProps={{...bind("isstyp"),
                    onAfterChange:(val)=>{
                      if(val=='OWIS' || !val){
												this.model.pts2_extkey="";
												this.model.pts2_namcn="";
												this.model.pts2_adrcn="";
											}
                    }}} 
                    code={CodeTable.isstyp} desp="开证类型" path="/didgrp/rec/isstyp" 
                  />
								</Col>
							</Row>
						</Col>
						<Col span={12}>
							<Row className="row">
								<Col span={5} offset={2}>
									{/* 收益人账号 */}
									<Label itext="受益人账号" />
								</Col>
								<Col span={14}>
									<InputItem InputProps={bind("pts4_extact")} maxLength={32} desp="结算账号" path="/didgrp/ben/pts/extact" />
								</Col>
							</Row>
						</Col>
					</Row>
					{/* 第五行 */}
					<Row>
						<Col span={12}>
              <Col span={24}>
                <Row className="row" >
                  <Col span={5} offset={2}>
                    {/* 贸易方式 */}
                    <Label itext="贸易方式" />
                  </Col>
                  <Col span={14}>
                    <SelectItem InputProps={bind("trdtyp")} code={CodeTable.trdtyp} desp="贸易方式" path="/didgrp/rec/trdtyp" />
                  </Col>
                </Row>
              </Col>
							<Col span={24}>
								<Row className="row">
									<Col span={5} offset={2}>
										<Label itext="最迟货物装运日期" />
									</Col>
									<Col span={6}>
										<DatePickerItem InputProps={bind("shpdat")} desp="最迟货物装运/服务提供日期 " path="/didgrp/rec/shpdat" />
									</Col>
								</Row>
							</Col>
							<Col span={24}>
								<Row className="row">
									<Col span={5} offset={2}>
										{/* 信用证兑付方式 */}
										<Label itext="信用证兑付方式" />
									</Col>
									<Col span={7}>
										<SelectItem InputProps={bind("avbby")} code={CodeTable.avbby} desp="信用证兑付方式" path="/didgrp/rec/avbby" />
									</Col>
									<Col span={4} offset={1}>
										<InputItem InputProps={bind("tenmaxday")} disabled={this.model.avbby == 'SIGT' ? true : false}
											desp="期限" path="/didgrp/rec/tenmaxday" />
									</Col>
									<Col span={4} offset={1}>
										<Label itext="天" />
									</Col>
								</Row>
							</Col>
						</Col>
						<Col span={12}>
							<Ptspta1 model={this.model} argArr={{ desc: "通知行", prefix: 'pts1', url: 'ditreg/advp_ptysel', flg: 'B', datakey: '\\ditp\\advp\\ptslst' }} />
						</Col>
					</Row>

					<Row>
						<Col span={12}>
							<Row className="row">
								<Col span={5} offset={2}>
									{/* 远期付款指示 */}
									<Label itext="远期付款指示" />
								</Col>
								<Col span={14}>
                  <InputItem InputProps={bind("defdet")}  maxLength={60} desp="远期付款指示" path="/didgrp/rec/tenmaxday" />
								</Col>
							</Row>
						</Col>
					</Row>

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