import React, { Component, Fragment } from 'react'
import {
	Page, Validator, Notification, FormItem, Table,
	InputItem, Input, Bind, SelectItem, Button, Label, DatePickerItem, Section, 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 ,Spin} from 'antd';
import { Link, withRouter } from 'react-router-dom'
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)
  }
  
  bptp_doclstHeader=[
    // {
    // 	title:<Label itext="索引" />, 
    // 	dataIndex:"inr",
    // 	key:"inr",
    // 	width:100,
    // 	sorter: (r1,r2)=>ColSorter(r1.inr,r2.inr),
    // },
    {
      title:<Label itext="单据编号" />, 
      dataIndex:"ownref",
      key:"ownref",
      width:50,
      sorter: (r1,r2)=>ColSorter(r1.ownref,r2.ownref),
    },
    {
      title:<Label itext="单据类型" />, 
      dataIndex:"objtyp",
      key:"objtyp",
      width:70,
      sorter: (r1,r2)=>ColSorter(r1.objtyp,r2.objtyp),
      render:(val, row, index)=>{
        val=val.toUpperCase()   //码表存储的是大写，后端传递的是小写
        let code=CodeTable.doctyp.find(item=>item.value==val)
        if(code){
          return code.label
        }
      }
    },
    {
      title:<Label itext="描述" />, 
      dataIndex:"nam",
      key:"nam",
      width:250,
      sorter: (r1,r2)=>ColSorter(r1.nam,r2.nam),
    },
    {
      title:<Label itext="到单日期" />, 
      dataIndex:"opndat",
      key:"opndat",
      width:90,
      sorter: (r1,r2)=>ColSorter(r1.opndat,r2.opndat),
      render:(val)=>{
        if(val)
        return moment(val).format('YYYY-MM-DD')
      }
    },
    {
      title:<Label itext="期限" />, 
      dataIndex:"tenor",
      key:"tenor",
      width:60,
      sorter: (r1,r2)=>ColSorter(r1.tenor,r2.tenor),
    },
    {
      title:<Label itext="到期日" />, 
      dataIndex:"matdat",
      key:"matdat",
      width:90,
      sorter: (r1,r2)=>ColSorter(r1.matdat,r2.matdat),
      render:(val)=>{
        if(val)
        return moment(val).format('YYYY-MM-DD')
      }
    },
    {
      title:<Label itext="承兑到期日" />, 
      dataIndex:"accdat",
      key:"accdat",
      width:90,
      sorter: (r1,r2)=>ColSorter(r1.accdat,r2.accdat),
      render:(val)=>{
        if(val)
        return moment(val).format('YYYY-MM-DD')
      }
    },
    {
      title:<Label itext="操作" />, 
      dataIndex:"操作",
      key:"操作",
      width:100,
      render:(val,row,index)=>{
        return <Link to={{pathname:'bptopn',query:{inr:row.inr,objtyp:row.objtyp}}}>融资放款</Link>
      }
    },
  ]


  //按钮事件
  onSel= ()=>{
      this.formBlur=true  //已触发表单提交处理
      Validator.validate(this.model,this.model.descriptor,async(errors,values)=>{
              if(errors)
                  return 
              const rtnmsg = await Api.post('bptsel/bptp_docsel',{data:this.model})
              if(rtnmsg.retcod == SUCCESS)
              {
                  // Notification.success({message:'数据提交成功!'})
                this.model.bptp_doclst=rtnmsg.data.bptp_doclst
              }
              else
              {
                Notification.error({message:'服务端请求失败!'})
              }
              //余下逻辑处理
                  
      })
  }

	//交易内实现
	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} extra={this.props.extra}  model={this.model} />
        <Row>
          <Col span={12}>
            <Row className="row">
              <Col span={4}>
                <Label itext="单据编号" trn="bptsel" />
              </Col>
              <Col span={6}>
                <InputItem InputProps={bind("bptp_bmdref")}  maxLength={16}  desp="单据编号" path="/bptp/ownref" />
              </Col>
              <Col span={6} offset={2}>
                <Button  type="primary" icon="search" onClick={this.onSel} desp="查询" path="/sel">
                  <Label itext="查询"/>
                </Button>
              </Col>
            </Row>
          </Col>
        </Row>

        <Row style={{marginTop:30}}>
          <Col span={24}>
            <Table rowKey="inr"
              columns={this.bptp_doclstHeader}
              dataSource={this.model.bptp_doclst}
              pagination={{hideOnSinglePage:true}}
            />
          </Col>
        </Row>

			</div>
		)
	}
}
