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 { Link, withRouter } from 'react-router-dom'
import Business from '@/views/Public/Business'
import mGetsel from '../model'
import moment from 'moment';

const CodeTable = CodeTableFactory.getInstance()

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

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

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

                }

            )
        }
        else if (this.props.flg == "1") {
            this.getmod_gidlstHeader.push(
                {
                    title: <Label itext="操作" />,
                    width: 60,
                    key: "operation",
                    render: (val, row, index) => {
                        return (
                            <a onClick={() => { this.link("getcrq", row.inr) }}>索赔</a>
                        )
                    }

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

                })
        }
        else if (this.props.flg == "3") {
            this.getmod_gidlstHeader.push(
                {
                    title: <Label itext="操作" />,
                    width: 60,
                    key: "operation",
                    render: (val, row, index) => {
                        return (
                            <a onClick={() => { this.link("getcan", row.inr) }}>闭卷</a>
                        )
                    }
                })
        }
		else if (this.props.flg == "4") {
            this.gidinr = "0"
            this.model.inr = "0"
        }
    }

    //交易跳转函数，若参数inr存在，则赋值给this.gidinr
    //调用后台查询是否符合跳转前提（前手交易是否复核），根据返回值决定是否带参跳转至pathname交易
    async link(pathname, inr) {
        if (inr) {
            this.gidinr = inr
        }
        const rtnmsg = await Api.post('getsel/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}` })
        }
    }

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

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


    }
    onGetmod_sel = async() => {
        this.formBlur = true  //已触发表单提交处理
        const rtnmsg = await Api.post('getsel/sellst', { data: this.model })
        if (rtnmsg.retcod == SUCCESS) {
            this.model.getmod_gidlst = rtnmsg.data['getmod_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('getsel/selcon',{ params: { gidinr:gidinr }, data:{} })
          
        }
    }

    getmod_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: "credat",
            key: "credat",
            width: 100,
            sorter: (r1, r2) => ColSorter(r1.credat, r2.credat),
			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),
        },
    ]

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

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

    //交易内实现
    renderPage() {
        const bind = this.bind

        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="getsel" />
						</Col>
						<Col span={10} >
							<InputItem InputProps={bind("getmod_ownref")} maxLength={20} desp="保函编号" path="/getmod/ownref" />
						</Col>
						<Col span={4} offset={2}>
							<Button type="primary" size="small" icon="search" onClick={this.onGetmod_sel} desp="查询" path="/getmod/sel">
								<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.getmod_gidlstHeader}
                            dataSource={this.model.getmod_gidlst}
                            rowClassName={this.rowClass}
                        />
                    </Col>
                </Row>
                {this.props.flg == "4" ?
                    <div style={{ textAlign: "center", marginTop: 30 }}>
                        <Button style={{ marginLeft: 10, marginRight: 10 }} disabled={this.model.inr == "0" ? true : false} type="primary" size="small" onClick={() => { this.link("getamc") }}>
                            <Label itext=" 出口保函保兑" />
                        </Button>
                        <Button style={{ marginLeft: 10, marginRight: 10 }} disabled={this.model.inr == "0" ? true : false} type="primary" size="small" onClick={() => { this.link("getfee") }}>
                            <Label itext="出口保函收费" />
                        </Button>
                        <Button style={{ marginLeft: 10, marginRight: 10 }} disabled={this.model.inr == "0" ? true : false} type="primary" size="small" onClick={() => { this.link("getfre") }}>
                            <Label itext="出口保函自由报文" />
                        </Button>
                    </div>
                    : null}

            </div >
        )
    }
}
