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, Tooltip, Modal, Spin, Table } from 'antd';
import { Link, withRouter } from 'react-router-dom'
import mDetsel 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 OvwpScreen 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.detmod_dedlstHeader.concat()

      //根据flg生成操作字段，并根据flg截取不需要的表头字段，返回
      if( this.props.flg !== "5" ){
        tableHeader.push(
          {
            title:<Label itext="操作" />, 
            dataIndex:"操作",
            key:"操作",
            width:60,
            sorter: (r1,r2)=>ColSorter(r1.ownref,r2.ownref),
            render:(val,row,index)=>{
              return this.props.flg=="0" ? (
                <a onClick={()=>{this.link("bmtrgf",row.inr)}}>寄单</a>) : (
                <a onClick={()=>{this.link("detcan",row.inr)}}>闭卷</a>
              )
            }
          }
        )
        // tableHeader.splice(8,1)
        return tableHeader
      }else{
        return tableHeader
      }
    }

    detmod_dedlstHeader=[
    	{
    		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:300,
    		sorter: (r1,r2)=>ColSorter(r1.nam,r2.nam),
    	},
    	{
    		title:<Label itext="开立日期" />, 
    		dataIndex:"opndat",
    		key:"opndat",
    		width:80,
        sorter: (r1,r2)=>ColSorter(r1.opndat,r2.opndat),
        render:(val)=>{
          if(val)
          return moment(val).format('YYYY-MM-DD')
        }
    	},
    	{
    		title:<Label itext="开证类型" />, 
    		dataIndex:"isstyp",
    		key:"isstyp",
    		width:100,
    		sorter: (r1,r2)=>ColSorter(r1.isstyp,r2.isstyp),
    		render:(val, row, index)=>{
    			let text = val
    			let em = CodeTable.isstyp.find(item=>item.value==val)
    			if(em)
    				text= em.label
    			return text
    		}
    	},
    	{
    		title:<Label itext="贸易方式" />, 
    		dataIndex:"trdtyp",
    		key:"trdtyp",
    		width:80,
    		sorter: (r1,r2)=>ColSorter(r1.trdtyp,r2.trdtyp),
    		render:(val, row, index)=>{
    			let text = val
    			let em = CodeTable.trdtyp.find(item=>item.value==val)
    			if(em)
    				text= em.label
    			return text
    		}
    	},
    	{
    		title:<Label itext="失效日期" />, 
    		dataIndex:"expdat",
    		key:"expdat",
    		width:80,
        sorter: (r1,r2)=>ColSorter(r1.expdat,r2.expdat),
        render:(val)=>{
          if(val)
          return moment(val).format('YYYY-MM-DD')
        }
    	},
    	{
    		title:<Label itext="兑付方式" />, 
    		dataIndex:"avbby",
    		key:"avbby",
    		width:80,
    		sorter: (r1,r2)=>ColSorter(r1.avbby,r2.avbby),
    		render:(val, row, index)=>{
    			let text = val
    			let em = CodeTable.avbby.find(item=>item.value==val)
    			if(em)
    				text= em.label
    			return text
    		}
    	},
    	{
    		title:<Label itext="效期(天)" />, 
    		dataIndex:"tenmaxday",
    		key:"tenmaxday",
    		width:80,
    		sorter: (r1,r2)=>ColSorter(r1.tenmaxday,r2.tenmaxday),
    	},
    	{
    		title:<Label itext="闭卷日期" />, 
    		dataIndex:"clsdat",
    		key:"clsdat",
    		width:80,
        sorter: (r1,r2)=>ColSorter(r1.clsdat,r2.clsdat),
        render:(val)=>{
          if(val)
          return moment(val).format('YYYY-MM-DD')
        }
    	},
    	{
    		title:<Label itext="用户" />, 
    		dataIndex:"ownusr",
    		key:"ownusr",
    		width:60,
    		sorter: (r1,r2)=>ColSorter(r1.ownusr,r2.ownusr),
      },
		]

    //查询获取表格数据
    onSellst = async () => {
      this.formBlur = true  //已触发表单提交处理
      const rtnmsg = await Api.post('detsel/sellst', { data: this.model })
      if (rtnmsg.retcod == SUCCESS) {
        this.model.detmod_dedlst = rtnmsg.data.detmod_dedlst;
      }
      else {
          Notification.error({ message: '查询失败!' })
      }
      //余下逻辑处理
    }

    //控制信用证修改按钮是否可点击
    @observable
    xyzUpdate=true

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

    onSelcon=(row)=>{
      if(row.inr){
        this.model.inr=row.inr;
        this.setState({selectedInr:row.inr})
        if(!row.clsdat){
          this.xyzUpdate=false; //下方按钮是否可用
        }else{
          this.xyzUpdate=true;
        }
      }else{
        this.xyzUpdate=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:"ded"} })  
        const rtnmsg = await Api.post('detsel/sysmod_isnext', { data: this.model, params: { objinr:this.model.inr, objtyp:"ded"} })
      if (rtnmsg.retcod == SUCCESS) {
        this.props.history.push({ pathname, query: { dedinr:this.model.inr} });
      }else{
        Notification.error({ message: `${rtnmsg.retmsg}` })
      }
    }

    rowClass = (row, index)=>{
      //表格选中行变色
      if(this.props.flg == 5 &&  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={12}>
                  <Row className="row">
                    <Col span={4}>
                      <Label itext="通知业务编号" />
                    </Col>
                    <Col span={6}>
                      <InputItem InputProps={{...bind("detmod_deref"),onPressEnter:this.onSellst}} maxLength={16} desp="信用证编号" path="/detmod/deref" />
                    </Col>
                    <Col span={6} offset={2}>
                      <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.detmod_dedlst}
                    pagination={{hideOnSinglePage:true}}
                    rowClassName={this.rowClass}
                  />
                </Col>
              </Row>

              {
                this.props.flg=="5" ? (
                  <Row type="flex" justify="center">
                    <Col>
                      <div className="button0">
                        <div className='button2'>
                          <Button type="primary" onClick={()=>{this.link("detfee")}} disabled={!this.model.inr}>
                            <Label i18nId="收费" />
                          </Button>
                        </div>
                        <div className='button2'>
                          <Button type="primary" onClick={()=>{this.link("detfre")}} disabled={!this.model.inr}>
                            <Label i18nId="自由报文" />
                          </Button>
                        </div>
                        <div className='button2'>
                          <Button type="primary" onClick={()=>{this.link("detame")}} disabled={this.xyzUpdate}>
                            <Label i18nId="信用证修改" />
                          </Button>
                        </div>
                      </div>
                    </Col>
                  </Row>
                ): null
              }
            </div >
        )
    }
}
