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 "./index.less"
import { inject, observer } from 'mobx-react'
import { action, observable } from 'mobx'
import { Row, Col, Tooltip, Modal, Spin, Table } from 'antd';
import { Link, withRouter } from 'react-router-dom'
import mDetsel from '../model'
import moment from 'moment'

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

    constructor(props) {
        super(props)
        this.model = new mDetsel()
        this.bind = Bind.bind(this)
        this.model.selflg = props.flg
        this.state={
          selectedInr:""
        }
    }
    
    //根据flg动态生成表头
    getTableHeader=()=>{
      let tableHeader=this.bmtmod_bmdlstHeader.concat()

      //根据flg生成操作字段
      if( this.props.flg !== "6" ){
        tableHeader.push(
          {
            title:<Label itext="操作" />,
            dataIndex:"操作", 
            key:"操作",
            width:100,
            render:(val,row,index)=>{
              switch (this.props.flg){
                case "1":
                  return <a onClick={()=>{this.link("bmtdrj",row.inr)}}>拒付</a>
                case "2":
                  return <a onClick={()=>{this.link("bmtacc",row.inr)}}>承兑通知</a>
                case "3":
                  return <a onClick={()=>{this.link("bmtset",row.inr)}}>收款</a>
              }
            }
          }
        )
        return tableHeader
      }else{
        return tableHeader
      }

      //根据flg截取不需要的表头字段
      // switch( this.props.flg ){
      //   case "1" :
      //     tableHeader.splice(5,2)
      //     return tableHeader
      //   case "2" :
      //     tableHeader.splice(5,2)
      //     return tableHeader
      //   case "3" :
      //     tableHeader.splice(6,1)
      //     return tableHeader
      //   default :
      //     return tableHeader
      // }
    }

    //切换标签，立即重置inr的值
    onTabFocus() {
      // console.log('#我被选中#')
      this.model.inr=""
      this.setState({selectedInr:""}) //重置行选中样式
      this.danjuUpdate=true
    }

    bmtmod_bmdlstHeader=[
    	{
    		title:<Label itext="业务编号" />, 
    		dataIndex:"ownref",
    		key:"ownref",
    		width:60,
    		sorter: (r1,r2)=>ColSorter(r1.ownref,r2.ownref),
    	},
    	{
    		title:<Label itext="概要描述" />, 
    		dataIndex:"nam",
    		key:"nam",
    		width:220,
    		sorter: (r1,r2)=>ColSorter(r1.nam,r2.nam),
    	},
    	{
    		title:<Label itext="交单日期" />, 
    		dataIndex:"predat",
    		key:"predat",
    		width:80,
        sorter: (r1,r2)=>ColSorter(r1.predat,r2.predat),
        render:(val)=>{
          if(val)
          return moment(val).format('YYYY-MM-DD')
        }
    	},
    	{
    		title:<Label itext="装运日期" />, 
    		dataIndex:"shpdat",
    		key:"shpdat",
    		width:80,
        sorter: (r1,r2)=>ColSorter(r1.shpdat,r2.shpdat),
        render:(val)=>{
          if(val)
          return moment(val).format('YYYY-MM-DD')
        }
    	},
    	{
    		title:<Label itext="到期日" />, 
    		dataIndex:"matdat",
    		key:"matdat",
    		width:80,
        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:80, 
        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:100,
    		sorter: (r1,r2)=>ColSorter(r1.clsdat,r2.clsdat),
    	},
		]
   
    //查询获取表格数据
    onSellst = async () => {
      this.formBlur = true  //已触发表单提交处理
      const rtnmsg = await Api.post('detsel/sellst', { data: this.model })
      if (rtnmsg.retcod == SUCCESS) {
        this.model.bmtmod_bmdlst = rtnmsg.data.bmtmod_bmdlst;
      }
      else {
          Notification.error({ message: '查询失败!' })
      }
      //余下逻辑处理
    }

    //控制单据修改按钮是否可点击
    @observable
    danjuUpdate=true

    onSelcon=(row)=>{
      if(row.inr){
        this.model.inr=row.inr
        this.setState({selectedInr:row.inr})
        if(!row.clsdat){
          this.danjuUpdate=false;
        }else{
          this.danjuUpdate=true;
        }
      }else{
        this.danjuUpdate=true;
      }
    }

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

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

    //交易内实现
    renderPage() {
        const bind = this.bind
        
        return (
            <div style={{ position: 'relative' }}>
              <Row>
                <Col span={24}>
                  <Row className="row">
                    <Col span={2}>
                      <Label itext="通知业务编号" />
                    </Col>
                    <Col span={3}>
                      <InputItem InputProps={{...bind("detmod_deref"),onPressEnter:this.onSellst}} maxLength={16} desp="信用证编号" path="/bmtmod/bmref" />
                    </Col>
                    <Col span={2} offset={1}>
                      <Label itext="单据编号" trn="ditsel" />
                    </Col>
                    <Col span={3}>
                      <InputItem InputProps={{...bind("bmtmod_bmref"),onPressEnter:this.onSellst}} maxLength={16} desp="单据编号" path="/bdtmod/bdref" />
                    </Col>
                    <Col span={3} 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)}) } 
                    columns={this.getTableHeader()}
                    dataSource={this.model.bmtmod_bmdlst} 
                    pagination={{hideOnSinglePage:true}}
                    rowClassName={this.rowClass}
                  />
                </Col>
              </Row>

              {
                this.props.flg=="6" ? (
                  <Row type="flex" justify="center">
                    <Col>
                      <div className="button0">
                        <div className='button2'>
                          <Button type="primary" onClick={()=>{this.link("bmtfee")}} disabled={!this.model.inr}>
                            <Label i18nId="收费" />
                          </Button>
                        </div>
                        <div className='button2'>
                          <Button type="primary" onClick={()=>{this.link("bmtfre")}} disabled={!this.model.inr}>
                            <Label i18nId="自由报文" />
                          </Button>
                        </div>
                        <div className='button2'>
                          <Button type="primary" onClick={()=>{this.link("bmtneg")}} disabled={!this.model.inr}>
                            <Label i18nId="单据议付" />
                          </Button>
                        </div>
                        <div className='button2'>
                          <Button type="primary" onClick={()=>{this.link("bmtrfc")}} disabled={this.danjuUpdate}>
                            <Label i18nId="单据修改" />
                          </Button>
                        </div>
                      </div>
                    </Col>
                  </Row>
                ): null
              }
            </div >
        )
    }
}
