import React, { Component, Fragment } from 'react'
import {
    Page, Validator, Notification, FormItem,
    InputItem, Input, Bind, SelectItem, Button, Label, DatePickerItem, Section, ConfirmButton, Steps, CheckboxItem, 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 } from 'mobx'
import { Row, Col, Popconfirm, Modal, Spin, Tooltip, Table } 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 { YwbhPicker1, YwbhPicker2 } from '@/components/Business-Library'
import mDitsel 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 DanjuScreen extends Page {
    @observable
    formBlur = false

    constructor(props) {
        super(props)
        this.model = new mDitsel()
        this.bind = Bind.bind(this)
        this.model.selflg = props.flg
        this.state={
          selectedInr:""
        }
    }

    componentDidMount() {
        super.componentDidMount()
        if (this.props.flg == "1") {
            this.bdtmod_bddlstHeader.push(
                {
                    title: <Label itext="操作" />,
                    width: 60,
                    key: "operation",
                    render: (val, row, index) => {
                        return (
                          <a onClick={()=>{this.link("bdtdcr",row.inr)}}>拒付</a>
                        )
                    }

                }

            )
        }
        else if (this.props.flg == "2") {
            this.bdtmod_bddlstHeader.push(
                {
                    title: <Label itext="操作" />,
                    width: 60,
                    key: "operation",
                    render: (val, row, index) => {
                        return (
                          <a onClick={()=>{this.link("bdtacc",row.inr)}}>承兑</a>
                        )
                    }

                })
        }
        else if (this.props.flg == "3") {
            this.bdtmod_bddlstHeader.push(
                {
                    title: <Label itext="操作" />,
                    width: 60,
                    key: "operation",
                    render: (val, row, index) => {
                        return (
                          <a onClick={()=>{this.link("bdtset",row.inr)}}>付款</a>
                        )
                    }

                })
        }
        else if (this.props.flg == "6") {
            this.bddinr = "0"
            this.model.inr1 = "0"


        }
        else if (this.props.flg == "7") {
            this.bdtmod_bddlstHeader.push(
                {
                    title: <Label itext="操作" />,
                    width: 60,
                    key: "operation",
                    render: (val, row, index) => {
                        return (
                          <a onClick={()=>{this.link("bdtrtn",row.inr)}}>退单</a>
                        )
                    }

                })
        }
    }

    //交易跳转函数，若参数inr存在，则赋值给this.bddinr
    //调用后台查询是否符合跳转前提（前手交易是否复核），根据返回值决定是否带参跳转至pathname交易
    async link(pathname, inr){
      if(inr){
        this.bddinr = inr
      }
     // const rtnmsg = await Api.post('ditsel/cfgfil_isnext', { data: this.model, params: { objinr:this.bddinr, objtyp:"bdd"} })
      const rtnmsg = await Api.post('ditsel/ sysmod_isnext', { data: this.model, params: { objinr:this.bddinr, objtyp:"bdd"} })
      if (rtnmsg.retcod == SUCCESS) {
        this.props.history.push({ pathname, query: { bddinr:this.bddinr} });
      }else{
        Notification.error({ message: `${rtnmsg.retmsg}` })
      }
    }

    onSellst = async () => {
        this.formBlur = true  //已触发表单提交处理
        const rtnmsg = await Api.post('ditsel/sellst', { data: this.model })
        if (rtnmsg.retcod == SUCCESS) {
            this.model.bdtmod_bddlst = rtnmsg.data['bdtmod_bddlst'];

        }
        else {
            Notification.error({ message: '查询失败!' })
        }
        //余下逻辑处理


    }

    async onSelcon(bddinr) {
        this.formBlur = true  //已触发表单提交处理
        this.setState({selectedInr:bddinr}) //获取选中行的inr,用于改变选中行样式
        this.bddinr = bddinr;
        this.model.inr1 = bddinr;
    }

    bdtmod_bddlstHeader = [
        {
            title: <Label itext="业务编号" />,
            dataIndex: "ownref",
            key: "ownref",
            width: 100,
            sorter: (r1, r2) => ColSorter(r1.ownref, r2.ownref),
        },
        {
            title: <Label itext="概要描述" />,
            dataIndex: "nam",
            key: "nam",
            width: 190,
            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: "tenmaxday",
            key: "tenmaxday",
            width: 50,
            sorter: (r1, r2) => ColSorter(r1.tenmaxday, r2.tenmaxday),
        },
        {
            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: "clsdat",
            key: "clsdat",
            width: 90,
            sorter: (r1, r2) => ColSorter(r1.clsdat, r2.clsdat),
            render:(val)=>{
              if(val)
              return moment(val).format('YYYY-MM-DD')
            }
        },
        {
            title: <Label itext="远期付款指示" />,
            dataIndex: "payinf",
            key: "payinf",
            width: 100,
            sorter: (r1, r2) => ColSorter(r1.payinf, r2.payinf),
        },
    ]

    rowClass = (row, index)=>{
      //表格选中行变色
      if(this.props.flg == 6 &&  row.inr == this.state.selectedInr){
        return "selectedStyle"
      }
      //单双行样式
      if(index %2)
      {
        return "tableEvenStyle"
      }
      return "tableOddStyle"
    }

    onTabFocus(){
      this.setState({selectedInr:""}) //切换页签时重置行选中样式
    }

    //交易内实现
    renderPage() {
        const bind = this.bind
        const { i18n } = this.props
        const { bchlevelLst } = this.props.extra
        //const {next,pre} = this.props.steps

        return (
            <div style={{ position: 'relative' }}>
                <Business wrappedComponentRef={ref => (this.com = ref)} extra={this.props.extra} model={this.model} />
                {/* 第一行 */}
                <Row>
                    <Col span={24}>
                        <Row className="row">
                            <Col span={2} >
                                <Label itext="信用证编号" trn="ditsel" />
                            </Col>
                            <Col span={3} >
                                <InputItem InputProps={{ ...bind("ditmod_diref"), onPressEnter: this.onSellst }} maxLength={16} desp="信用证编号" path="/ditmod/diref" />
                            </Col>

                            <Col span={2} offset={1}>
                                <Label itext="单据编号" trn="ditsel" />
                            </Col>
                            <Col span={3} >
                                <InputItem InputProps={bind("bdtmod_bdref")} maxLength={16} desp="单据编号" path="/bdtmod/bdref" />
                            </Col>


                            <Col span={6} offset={1}>
                                <Button type="primary" icon="search" size="small" onClick={this.onSellst} desp="查询" path="/sellst">
                                    <Label itext="查询" />
                                </Button>
                            </Col>
                        </Row>
                    </Col>

                </Row>
                <Row style={{ marginTop: 30 }}>
                    <Col span={24} >
                        <Table rowKey="inr" size="middle"
                          onRow={row => ({ onClick: () => this.onSelcon(row.inr) })}  
                          columns={this.bdtmod_bddlstHeader} 
                          dataSource={this.model.bdtmod_bddlst}
                          rowClassName={this.rowClass}
                        />
                    </Col>
                </Row>


                {this.props.flg == "6" ?
                    <div style={{ textAlign: "center", marginTop: 30 }}>

                        <Button style={{ marginLeft: 10, marginRight: 10 }} disabled={this.model.inr1 == "0" ? true : false} type="primary" size="small" onClick={()=>{this.link("bdtame")}}>
                            <Label itext=" 单据修改" />
                        </Button>
                        <Button style={{ marginLeft: 10, marginRight: 10 }} disabled={this.model.inr1 == "0" ? true : false} type="primary" size="small" onClick={()=>{this.link("bdtfre")}}>
                            <Label itext="自由报文" />
                        </Button>
                        <Button style={{ marginLeft: 10, marginRight: 10 }} disabled={this.model.inr1 == "0" ? true : false} type="primary" size="small" onClick={()=>{this.link("bdtfee")}}>
                            <Label itext=" 收费" />
                        </Button>
                    </div>
                    : null}

            </div >
        )
    }
}
