import React, { Component, Fragment } from 'react'
import {Page, Validator, Notification, FormItem,InputItem, Input, Bind, SelectItem, Button, Label, DatePickerItem, Section, ConfirmButton, Steps, 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,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 mBptsel from '../model'
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 DetpScreen extends Page 
{
	@observable
	formBlur = false

	constructor(props) {
		super(props)
		this.model = new mBptsel();
    this.bind = Bind.bind(this)
  }
  
  bptp_bpdlstHeader=[
    // {
    // 	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:70,
      sorter: (r1,r2)=>ColSorter(r1.ownref,r2.ownref),
    },
    {
      title:<Label itext="描述" />, 
      dataIndex:"nam",
      key:"nam",
      width:240,
      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:"intday",
      key:"intday",
      width:80,
      sorter: (r1,r2)=>ColSorter(r1.intday,r2.intday),
    },
    {
      title:<Label itext="融资到期日" />, 
      dataIndex:"expdat",
      key:"expdat",
      width:90,
      sorter: (r1,r2)=>ColSorter(r1.expdat,r2.expdat),
      render:(val)=>{
        if(val)
        return moment(val).format('YYYY-MM-DD')
      }
    },
    {
      title:<Label itext="融资比例" />, 
      dataIndex:"pctfin",
      key:"pctfin",
      width:80,
      sorter: (r1,r2)=>ColSorter(r1.pctfin,r2.pctfin),
    },
    {
      title:<Label itext="融资利率" />, 
      dataIndex:"basrat",
      key:"basrat",
      width:80,
      sorter: (r1,r2)=>ColSorter(r1.basrat,r2.basrat),
    },
    {
      title:<Label itext="融资类型" />, 
      dataIndex:"fintyp",
      key:"fintyp",
      width:90,
      sorter: (r1,r2)=>ColSorter(r1.fintyp,r2.fintyp),
      render:(val,row,index)=>{
        let obj=CodeTable.fintyp.find((item)=>{
          if(item.value==val) return item;
        })
        return obj.label
      }
    },
    {
      title:<Label itext="操作" />,
      dataIndex:"操作",
      key:"操作",
      width:80,
      render:(val,row,index)=>{
        if(this.props.flag=="1"){
          return <Link to={{pathname:'bptexd',query:{inr:row.inr}}}>融资展期</Link>
        }else{
          return <Link to={{pathname:'bptset',query:{inr:row.inr}}}>融资还款</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_bpdsel',{data:this.model})
              if(rtnmsg.retcod == SUCCESS)
              {
                // Notification.success({message:'数据提交成功!'})
                this.model.bptp_bpdlst=rtnmsg.data.bptp_bpdlst
              }
              else
              {
                Notification.error({message:'服务端请求失败!'})
              }
              //余下逻辑处理
                  
      })
  }

	//交易内实现
	renderPage() {
		const bind = this.bind
		const { i18n } = this.props
    const { ownbch } = this.props.extra
		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_bpdref")} maxLength={16}  desp="融资业务编号" />
              </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_bpdlstHeader}
              dataSource={this.model.bptp_bpdlst}
              pagination={{hideOnSinglePage:true}}
            />
          </Col>
        </Row>

			</div>
		)
	}
}
