import React, { Component, Fragment } from 'react'
import {
	Page, Validator, Notification, FormItem, BottomBtn,
	InputItem, Input, Bind, SelectItem, Button, Label, DatePickerItem, Section, Table, TextArea, ConfirmButton, Steps
} 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 } from 'antd';
import { ButtonModal, ModalTest } from '@/components/Business-Library'
import { Link, withRouter } from 'react-router-dom'
import { height } from 'window-size';
import Business from '@/views/Public/Business'
import { TableExpansion } from '@/components/Business-Library'


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

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

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

	async componentWillMount() {
	}

	onTabFocus = async () => {
    this.com.wrappedInstance.wrappedInstance.onRecal2();
  }
  
  //输入变动金额之后，更新最终金额
  onAfterChange = (row)=>{
    console.log(row)
    if(!row.oldamt) row.oldamt = "0"
    if(row.chgamt){
      row.amt = row.chgamt
    }else{
      row.amt = "0"
      row.chgamt = "0"
    }
  }

  chgamtEvent = async()=>{
    const rtnmsg = await Api.post('ditopn/liaccv_recalccv',{data:this.model})
    if(rtnmsg.retcod == SUCCESS){
      this.model.liaccv_pctresamt = rtnmsg.data.liaccv_pctresamt
      this.model.liaccv_relcshpct = rtnmsg.data.liaccv_relcshpct
      this.model.liaccv_totcovamt = rtnmsg.data.liaccv_totcovamt
    }
  }

    liaccv_liaccvgHeader=[
    	{
    		title:<Label itext="币种" />, 
    		dataIndex:"cur",
    		key:"cur",
    		width:100,
    		render:(val, row, index)=>{
    			let text = val
    			let em = CodeTable.curtxt.find(item=>item.value==val)
    			if(em)
    				text= em.label
    			return text
        },
        type:{
          // edit: { type: 'select',code:CodeTable.curtxt },
				  add: { type: 'select',code:CodeTable.curtxt },
        },
        defaultVal:"CNY",
        isDisabled:true
    	},
    	{
    		title:<Label itext="原始金额" />, 
    		dataIndex:"oldamt",
    		key:"oldamt",
    		width:100,
        isDisabled:true
    	},
    	{
    		title:<Label itext="变动金额" />, 
    		dataIndex:"chgamt",
    		key:"chgamt",
    		width:100,
        type:{
          edit: { type: 'input' },
        },
        onAfterChange:(row)=>this.onAfterChange(row),
        onAfterBlur:()=>this.chgamtEvent()
    	},
    	{
    		title:<Label itext="金额" />, 
    		dataIndex:"amt",
    		key:"amt",
    		width:100,
        isDisabled:true
      },
      {
    		title:<Label itext="结算账号" />, 
    		dataIndex:"cusact",
    		key:"cusact",
    		width:100,
        type:{
          edit: { type: 'input' },
        }
    	},
    	{
    		title:<Label itext="保证金账号" />, 
    		dataIndex:"ccvact",
    		key:"ccvact",
    		width:100,
        type:{
          edit: { type: 'input' },
        }
    	},
    	// {
    	// 	title:<Label itext="业务币种" />, 
    	// 	dataIndex:"covcur",
    	// 	key:"covcur",
    	// 	width:100,
    	// },
    	// {
    	// 	title:<Label itext="转换金额" />, 
    	// 	dataIndex:"covamt",
    	// 	key:"covamt",
    	// 	width:100,
    	// },
    	// {
    	// 	title:<Label itext="汇率" />, 
    	// 	dataIndex:"rat",
    	// 	key:"rat",
    	// 	width:100,
    	// },
    	// {
    	// 	title:<Label itext="保证金类型" />, 
    	// 	dataIndex:"ccvtyp",
    	// 	key:"ccvtyp",
    	// 	width:100,
    	// 	render:(val, row, index)=>{
    	// 		let text = val
    	// 		let em = CodeTable.ccvtyp.find(item=>item.value==val)
    	// 		if(em)
    	// 			text= em.label
    	// 		return text
    	// 	}
    	// },
    	{
    		title:<Label itext="记账" />, 
    		dataIndex:"gleflg",
    		key:"gleflg",
    		width:100,
    		render:(val, row, index)=>{
    			let text = val
    			let em = CodeTable.onsel.find(item=>item.value==val)
    			if(em)
    				text= em.label
    			return text
        },
        type:{
          edit: { type: 'select',code:CodeTable.onsel },
				  add: { type: 'select',code:CodeTable.onsel },
        }
    	},
    ]
    

    liaall_liaallgHeader=[
    	{
    		title:<Label itext="业务种类" />, 
    		dataIndex:"bussec",
    		key:"bussec",
    		width:100,
    		render:(val, row, index)=>{
    			let text = val
    			let em = CodeTable.bussec.find(item=>item.value==val)
    			if(em)
    				text= em.label
    			return text
    		},
    	},
    	{
    		title:<Label itext="表外类型" />, 
    		dataIndex:"liatyp",
    		key:"liatyp",
    		width:100,
    		render:(val, row, index)=>{
    			let text = val
    			let em = CodeTable.liatyp.find(item=>item.value==val)
    			if(em)
    				text= em.label
    			return text
    		}
    	},
    	{
    		title:<Label itext="币种" />, 
    		dataIndex:"cur",
    		key:"cur",
    		width:100,
    	},
    	{
    		title:<Label itext="原金额" />, 
    		dataIndex:"oldamt",
    		key:"oldamt",
    		width:100,
    	},
    	{
    		title:<Label itext="变动金额" />, 
    		dataIndex:"chgamt",
    		key:"chgamt",
    		width:100,
    	},
    	{
    		title:<Label itext="金额" />, 
    		dataIndex:"amt",
    		key:"amt",
    		width:100,
    	},
    	{
    		title:<Label itext="表外账号" />, 
    		dataIndex:"acc",
    		key:"acc",
    		width:100,
    	},
    ]

    

	//交易内实现
	renderPage() {
		const bind = this.bind
		const { i18n } = this.props
		if (this.props.flag && 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)}  steps={this.props.steps}  extra={this.props.extra} model={this.model} />
				{/* 表格 */}
				<Row>
					<Col>
            <Row>
              <Label itext="表外明细" trn="ditopn" />	
              <Table rowKey="inr"
                pagination={{ pageSize: 10,hideOnSinglePage:true }}
                columns={this.liaall_liaallgHeader}
                dataSource={this.model.liaall_liaallg}
                scroll={{ x: 420 }}
              />
						</Row>
          </Col>
        </Row>

      {
        this.props.fcdflg=='DE' ? null : (
        
        <div>
          <br/><br/><br/>
          
          <Row>
            <Col>
              <Row>
                <Label itext="保证金明细" trn="ditopn" />
              </Row>

              <Row>
                <Col span={12}>
                  <Row className="row" >
                    <Col span={5} >
                      <Label itext="业务余额" trn="ditopn" />	
                    </Col>
                    <Col span={6}>
                      <SelectItem InputProps={bind("liaccv_concur")} disabled={true} code={CodeTable.curtxt} />
                    </Col>
                    <Col span={7} offset={1}>
                      <InputItem InputProps={{...bind("liaccv_newamt"), type:"amount", cur:this.model.liaccv_concur} } disabled={true} />
                    </Col>
                  </Row>
                </Col>
                <Col span={12}>
                  <Row className="row">
                    <Col span={5} offset={2}>
                      <Label itext="保证金应收比例（%）" trn="ditopn" />
                    </Col>
                    <Col span={14}>
                      <InputItem InputProps={{...bind("liaccv_cshpct"),onBlur:()=>{this.chgamtEvent()}}} />
                    </Col>
                  </Row>
                </Col>
              </Row>

              <Row>
                <Col span={12}>
                  <Row className="row" >
                    <Col span={5} >
                      <Label itext="变动金额" trn="ditopn" />
                    </Col>
                    <Col span={6}>
                      <SelectItem InputProps={bind("liaccv_concur")} disabled={true}code={CodeTable.curtxt} />
                    </Col>
                    <Col span={7} offset={1}>
                      <InputItem InputProps={{...bind("liaccv_chgamt"), type:"amount", cur:this.model.liaccv_concur}} disabled={true} />
                    </Col>
                  </Row>
                </Col>
                <Col span={12}>
                  <Row className="row">
                    <Col span={5} offset={2}>
                      <Label itext="保证金实收比例（%）" trn="ditopn" />
                    </Col>
                    <Col span={14}>
                      <InputItem disabled={true} InputProps={bind("liaccv_relcshpct")} />
                    </Col>
                  </Row>
                </Col>
              </Row>

              <Row>
                <Col span={12}>
                  <Row className="row" >
                    <Col span={5} >
                      <Label itext="应收/支保证金" trn="ditopn" />
                    </Col>
                    <Col span={6}>
                      <SelectItem InputProps={bind("liaccv_concur")} disabled={true}code={CodeTable.curtxt} />
                    </Col>
                    <Col span={7} offset={1}>
                      <InputItem InputProps={{...bind("liaccv_pctresamt"), type:"amount", cur:this.model.liaccv_concur}} disabled={true} />
                    </Col>
                  </Row>
                </Col>
              </Row>
        
              <Row>
                <TableExpansion rowKey="inr" delete={true}
                  pagination={{ pageSize: 10, hideOnSinglePage: true }} 
                  columns={this.liaccv_liaccvgHeader} 
                  dataSource={this.model.liaccv_liaccvg}
                  onChange={(val) => { this.model.liaccv_liaccvg = val}}
                  OkEvent={()=>{this.chgamtEvent()}}
                />
              </Row>

              <Row>
                <Col span={12}>
                  <Row className="row" >
                    <Col span={5} >
                      <Label itext="保证金合计" trn="ditopn" />
                    </Col>
                    <Col span={6}>
                      <SelectItem InputProps={bind("liaccv_concur")} disabled={true} code={CodeTable.curtxt} />
                    </Col>
                    <Col span={7} offset={1}>
                      <InputItem InputProps={{...bind("liaccv_totcovamt"), type:"amount", cur:this.model.liaccv_concur}} disabled={true} />
                    </Col>
                  </Row>
                </Col>
              </Row>
            </Col>
          </Row>
        </div>
      )}
				{/* 底部按钮 */}
        <BottomBtn _this={this} />
			</div >
		)
	}
}
