import React,{Component,Fragment} from 'react'
import PropTypes from 'prop-types'
import {Page,Validator,Notification,FormItem,DatePickerItem,TextAreaItem,CheckboxItem,Checkbox,
    InputItem,Input,Bind,SelectItem,Button,Label,Image} from '@/components/Common-Library'
import Api from '@/service/api'
import mGitsel from '../model'
import CodeTableFactory from '@/components/CodeTable'
import "./index.less"
import { inject, observer } from 'mobx-react'
import { action, observable,runInAction } from 'mobx'
import Business from '@/views/Public/Business'
import { Link, withRouter } from 'react-router-dom'
import { Row, Col, Tooltip, Modal, Spin, Table } from 'antd';
import moment from 'moment'

const CodeTable = CodeTableFactory.getInstance()

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

    constructor(props)
    {
        super(props)
		this.model = new mGitsel()    
		this.bind = Bind.bind(this)
		this.model.gitmod_selflg = props.flg
		this.state = {
			selectedInr:""
		}
    }
    onTabFocus(){
      this.setState({selectedInr:""}) //切换页签时重置行选中样式
    }

    componentDidMount() {
        
        super.componentDidMount()
        if (this.props.flg == "0") {
            this.gitmod_gidlstHeader.push(
                {
                    title: <Label itext="operate" />,
                    width: 60,
                    key: "operation",
                    render: (val, row, index) => {
                        return (
                          <a onClick={()=>{this.link('gitame',row.inr)}}>修改</a>
                        )
                    }

                }

            )
        }
        else if (this.props.flg == "1") {
            this.gitmod_gidlstHeader.push(
                {
                    title: <Label itext="operate" />,
                    width: 60,
                    key: "operation",
                    render: (val, row, index) => {
                        return (
                          <a onClick={()=>{this.link('gitcrq',row.inr)}}>索赔登记</a>
                        )
                    }

                })
        }
        else if (this.props.flg == "2") {
            this.gitmod_gidlstHeader.push(
                {
                    title: <Label itext="operate" />,
                    width: 60,
                    key: "operation",
                    render: (val, row, index) => {
                        return (
                          <a onClick={()=>{this.link('gitset',row.inr)}}>赔付</a>
                        )
                    }

                })
        }
        else if (this.props.flg == "3") {
            this.gitmod_gidlstHeader.push(
                {
                    title: <Label itext="operate" />,
                    width: 60,
                    key: "operation",
                    render: (val, row, index) => {
                        return (
                          <a onClick={()=>{this.link('gitcan',row.inr)}}>闭卷</a>
                        )
                    }

                })
        }
         else  if (this.props.flg == "4") {
             this.gidinr="0"
             this.model.inr="0"
             }
    }

    async link(pathname, inr){
      if(inr){
        this.gidinr = inr
      }
      const rtnmsg = await Api.post('gitsel/cfgfil_isnext', { data: this.model, params: { objinr:this.gidinr, objtyp:"gid"} })
      if (rtnmsg.retcod == SUCCESS) {
        this.props.history.push({ pathname, query: { gidinr:this.gidinr} });
      }else{
        Notification.error({ message: `${rtnmsg.retmsg}` })
      }
    }


    gitmod_gidlstHeader=[
        {
            title:<Label itext="Reference" />, 
            dataIndex:"ownref",
            key:"ownref",
            width:100,
            sorter: (r1,r2)=>ColSorter(r1.ownref,r2.ownref),
        },
        {
            title:<Label itext="Name" />, 
            dataIndex:"nam",
            key:"nam",
            width:100,
            sorter: (r1,r2)=>ColSorter(r1.nam,r2.nam),
        },
        {
            title:<Label itext="Opened" />, 
            dataIndex:"opndat",
            key:"opndat",
            width:100,
            sorter: (r1,r2)=>ColSorter(r1.opndat,r2.opndat),
			render:(val)=>{
              if(val)
              return moment(val).format('YYYY-MM-DD')
            }
        },
        {
            title:<Label itext="Closed" />, 
            dataIndex:"clsdat",
            key:"clsdat",
            width:100,
            sorter: (r1,r2)=>ColSorter(r1.clsdat,r2.clsdat),
			render:(val)=>{
              if(val)
              return moment(val).format('YYYY-MM-DD')
            }
        },
        {
            title:<Label itext="Handing Type" />, 
            dataIndex:"hndtyp",
            key:"hndtyp",
            width:100,
            sorter: (r1,r2)=>ColSorter(r1.hndtyp,r2.hndtyp),
            render:(val, row, index)=>{
                let text = val
                let em = CodeTable.hndtyp.find(item=>item.value==val)
                if(em)
                    text= em.label
                return text
            }
        },
        {
            title:<Label itext="User" />, 
            dataIndex:"ownusr",
            key:"ownusr",
            width:100,
            sorter: (r1,r2)=>ColSorter(r1.ownusr,r2.ownusr),
        },
    ]
       
    onGitmod_sel= async()=>{
        this.formBlur=true  //已触发表单提交处理

        const rtnmsg = await Api.post('gitsel/sellst', { data: this.model })
        if (rtnmsg.retcod == SUCCESS) {
            this.model.gitmod_gidlst = rtnmsg.data['gitmod_gidlst'];

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

    async onSelcon(gidinr){
        this.formBlur=true  //已触发表单提交处理
        this.setState({selectedInr:gidinr}) //获取选中行的inr,用于改变选中行样式
        this.gidinr=gidinr;
        this.model.inr=gidinr;
        if(this.props.flg == "4"){
          // const rtnmsg = await Api.post('gitsel/selcon',{ params: { gidinr:gidinr }, data:{} })
          
        }
    }

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

    //交易内实现
    renderPage(){
        const bind = this.bind
        const {i18n} = this.props
             
        return (
            <div style={{ position: 'relative' }}>
                <Business wrappedComponentRef={ref => (this.com = ref)} extra={this.props.extra} model={this.model} />
                <Row className="row">
                    <Col span={10} offset={1}>
                        <Col span={6}>
                           <Label itext="Guarantee Reference" trn="gitsel" />  
                        </Col>
                        <Col span={10}>
                           <InputItem InputProps={bind("gitmod_ownref")}  maxLength={16}  desp="保函编号" path="/gitmod/ownref" />
                        </Col>
                        <Col span={4} offset={2}>
                            <Button  type="primary" size="small" icon="search" onClick={this.onGitmod_sel} desp="查询" path="/sellst">
                                <Label   itext="Query"/>
                            </Button>
                        </Col>
                    </Col>
                </Row>
                <Row style={{ marginTop: 30 }}>
                    <Col span={24} >
                        <Table  
                          rowKey="inr"  size="middle"
                          onRow={ row=>({onClick:()=>this.onSelcon(row.inr)}) } 
                          columns={this.gitmod_gidlstHeader} 
                          dataSource={this.model.gitmod_gidlst}
                          rowClassName={this.rowClass}
                        />
                    </Col>
                </Row>
                {this.props.flg=="4"?
                <div style={{ textAlign: "center", marginTop: 30 }}>
                    <Row>
                        <Col>
                            <Button style={{ marginLeft: 10, marginRight: 10 }} disabled={this.model.inr=="0"?true:false}type="primary" size="small" onClick={()=>{this.link("gitadd")}}>
                                 <Label itext="进口保函编号修改" />
                             </Button>
                             <Button style={{ marginLeft: 10, marginRight: 10 }} disabled={this.model.inr=="0"?true:false}type="primary" size="small" onClick={()=>{this.link("gitatt")}}>
                                 <Label itext="进口保函报文绑定" />
                             </Button>
                             <Button style={{ marginLeft: 10, marginRight: 10 }} disabled={this.model.inr=="0"?true:false}type="primary" size="small" onClick={()=>{this.link("gitcom")}}>
                                 <Label itext="进口保函保费收取" />
                            </Button> 
                            <Button style={{ marginLeft: 10, marginRight: 10 }} disabled={this.model.inr=="0"?true:false}type="primary" size="small" onClick={()=>{this.link("gitcrj")}}>
                                <Label itext="进口保函拒付" />
                            </Button>
                            <Button style={{ marginLeft: 10, marginRight: 10 }} disabled={this.model.inr=="0"?true:false} type="primary" size="small" onClick={()=>{this.link("giteng")}}>
                                <Label itext=" 进口保函保证金调整" />
                            </Button>
                            <Button style={{ marginLeft: 10, marginRight: 10 }} disabled={this.model.inr=="0"?true:false} type="primary" size="small" onClick={()=>{this.link("gitfee")}}>
                                <Label itext=" 进口保函收费" />
                            </Button>
                        </Col>
                    </Row>
                    <Row style={{marginTop:12}}>
                        <Col>
                            <Button style={{ marginLeft: 10, marginRight: 10 }} disabled={this.model.inr=="0"?true:false} type="primary" size="small" onClick={()=>{this.link("gitfre")}}>
                                <Label itext=" 进口保函自由报文" />
                            </Button>
                            <Button style={{ marginLeft: 10, marginRight: 10 }} disabled={this.model.inr=="0"?true:false} type="primary" size="small" onClick={()=>{this.link("gitpca")}}>
                                <Label itext=" 进口保函预撤销" />
                            </Button>
                            <Button style={{ marginLeft: 10, marginRight: 10 }} disabled={this.model.inr=="0"?true:false} type="primary" size="small" onClick={()=>{this.link("gitplb")}}>
                                <Label itext=" 进口保函效期更改" />
                            </Button>
                            <Button style={{ marginLeft: 10, marginRight: 10 }} disabled={this.model.inr=="0"?true:false} type="primary" size="small" onClick={()=>{this.link("gitrop")}}>
                                <Label itext=" 进口保函重开" />
                            </Button>
                            <Button style={{ marginLeft: 10, marginRight: 10 }} disabled={this.model.inr=="0"?true:false} type="primary" size="small" onClick={()=>{this.link("gitten")}}>
                                <Label itext=" 进口保函表外调整" />
                            </Button>
                        </Col>
                    </Row>
                </div>
                :null
                }
            </div>
        )
    }
}
