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

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

import moment from 'moment';
  
@withRouter
@inject('UserContext')
@inject('i18n')
@observer
export default class LixiScreen extends Page 
{
	@observable
	formBlur = false

	constructor(props) {
		super(props)
		this.model = props.model
    this.bind = Bind.bind(this)
  }
  
  //利息明细页签被选中时请求后台数据
  async onTabFocus() {
    // console.log('#利息明细被选中#')
    this.com.wrappedInstance.wrappedInstance.onRecal();
  }

  acrmod_acrlstHeader=[
    {
      title:<Label itext="币种" />, 
      dataIndex:"cur",
      key:"cur",
      width:100,
      sorter: (r1,r2)=>ColSorter(r1.cur,r2.cur),
      render:(val, row, index)=>{
        let text = val
        let em = CodeTable.curtxt.find(item=>item.value==val)
        if(em)
          text= em.label
        return text
      }
    },
    {
      title:<Label itext="利率" />, 
      dataIndex:"basrat",
      key:"basrat",
      width:100,
      sorter: (r1,r2)=>ColSorter(r1.basrat,r2.basrat),
    },
    {
      title:<Label itext="起息日" />, 
      dataIndex:"begdat",
      key:"begdat",
      width:100,
      sorter: (r1,r2)=>ColSorter(r1.begdat,r2.begdat),
      render:(val)=>{
        if(val)
        return moment(val).format('YYYY-MM-DD')
      }
    },
    {
      title:<Label itext="到期日" />, 
      dataIndex:"enddat",
      key:"enddat",
      width:100,
      sorter: (r1,r2)=>ColSorter(r1.enddat,r2.enddat),
      render:(val)=>{
        if(val)
        return moment(val).format('YYYY-MM-DD')
      }
    },
    {
      title:<Label itext="最后计息日" />, 
      dataIndex:"acrdat",
      key:"acrdat",
      width:100,
      sorter: (r1,r2)=>ColSorter(r1.acrdat,r2.acrdat),
      render:(val)=>{
        if(val)
        return moment(val).format('YYYY-MM-DD')
      }
    },
    {
      title:<Label itext="收息方式" />, 
      dataIndex:"iratyp",
      key:"iratyp",
      width:100,
      sorter: (r1,r2)=>ColSorter(r1.iratyp,r2.iratyp),
      render:(val, row, index)=>{
        let text = val
        let em = CodeTable.iratyp.find(item=>item.value==val)
        if(em)
          text= em.label
        return text
      }
    },
    {
      title:<Label itext="预扣利息" />, 
      dataIndex:"intamt",
      key:"intamt",
      width:100,
      sorter: (r1,r2)=>ColSorter(r1.intamt,r2.intamt),
    },
    {
      title:<Label itext="已计提/摊销" />, 
      dataIndex:"actamt",
      key:"actamt",
      width:100,
      sorter: (r1,r2)=>ColSorter(r1.actamt,r2.actamt),
    },
  ]

  acrmod_acelstHeader=[
    {
      title:<Label itext="币种" />, 
      dataIndex:"cur",
      key:"cur",
      width:100,
      sorter: (r1,r2)=>ColSorter(r1.cur,r2.cur),
      render:(val, row, index)=>{
        let text = val
        let em = CodeTable.curtxt.find(item=>item.value==val)
        if(em)
          text= em.label
        return text
      }
    },
    {
      title:<Label itext="执行日期" />, 
      dataIndex:"acrdat",
      key:"acrdat",
      width:100,
      sorter: (r1,r2)=>ColSorter(r1.acrdat,r2.acrdat),
      render:(val)=>{
        if(val)
        return moment(val).format('YYYY-MM-DD')
      }
    },
    {
      title:<Label itext="业务本金" />, 
      dataIndex:"busamt",
      key:"busamt",
      width:100,
      sorter: (r1,r2)=>ColSorter(r1.busamt,r2.busamt),
    },
    {
      title:<Label itext="执行利率" />, 
      dataIndex:"acrrat",
      key:"acrrat",
      width:100,
      sorter: (r1,r2)=>ColSorter(r1.acrrat,r2.acrrat),
    },
    {
      title:<Label itext="计息天数" />, 
      dataIndex:"intday",
      key:"intday",
      width:100,
      sorter: (r1,r2)=>ColSorter(r1.intday,r2.intday),
    },
    {
      title:<Label itext="本期累计金额" />, 
      dataIndex:"newamt",
      key:"newamt",
      width:100,
      sorter: (r1,r2)=>ColSorter(r1.newamt,r2.newamt),
    },
    {
      title:<Label itext="上期累计金额" />, 
      dataIndex:"oldamt",
      key:"oldamt",
      width:100,
      sorter: (r1,r2)=>ColSorter(r1.oldamt,r2.oldamt),
    },
    {
      title:<Label itext="记账金额" />, 
      dataIndex:"difamt",
      key:"difamt",
      width:100,
      sorter: (r1,r2)=>ColSorter(r1.difamt,r2.difamt),
    },
    {
      title:<Label itext="是否记账" />, 
      dataIndex:"actflg",
      key:"actflg",
      width:100,
      sorter: (r1,r2)=>ColSorter(r1.actflg,r2.actflg),
    },
  ]
  
	//交易内实现
	renderPage() {
		const bind = this.bind
		const { i18n } = this.props
    const { ownbch } = this.props.extra
		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>
          <Label itext="利息明细" trn="bdtset" />	
          <Table rowKey="inr" 
            columns={this.acrmod_acrlstHeader}  
            dataSource={this.model.acrmod_acrlst} 
            pagination={{ pageSize: 10, hideOnSinglePage: true }}
          />
        </Row>

        <Row style={{marginTop:40}}>
          <Label itext="每日计提摊销明细" trn="bdtset" />	
          <Table rowKey="inr" 
            columns={this.acrmod_acelstHeader}  
            dataSource={this.model.acrmod_acelst} 
            pagination={{ pageSize: 10, hideOnSinglePage: true }}
          />
        </Row>
				
				{/* 底部按钮 */}
        <BottomBtn _this={this} />
			</div >
		)
	}
}
