import React, { Component, Fragment } from 'react'
import {
    Page, Validator, Notification, FormItem, DatePickerItem, Table, AmountLabel,
    InputItem, Input, Bind, SelectItem, Button, Label
} from '@/components/Common-Library'
import { Divider, Tooltip } from 'antd'
import ELCMessage from '@/components/Business-Library/ELCMessage'
import Api from '@/service/api'
import mSptsel from '../model'
import CodeTableFactory from '@/components/CodeTable'
import "./index.less"
import { inject, observer } from 'mobx-react'
import { action, observable } from 'mobx'
import { Col, Row, notification, Card, Modal } from 'antd'
import { Link } from 'react-router-dom'
import moment from 'moment'
import DateFormat from '@/utils/DateUtil'
const CodeTable = CodeTableFactory.getInstance()


@inject('UserContext')
@inject('i18n')

@observer
export default class SptselScreen extends Page {
    @observable
    formBlur = false

    constructor(props) {
        super(props)
        this.model = new mSptsel()
        this.model.openValidate() //开启校验
        this.bind = Bind.bind(this)
    }

    componentWillUnmount() {
        this.model.closeValidate()//关闭校验
    }

    async componentWillMount() {
      //this.model.relflg="W";
      //this.model.datsta=DateFormat();
      this.model.sptp_datsta = DateFormat();
      this.onSel(); //进入交易自动触发查询
    }

    lstHeader = [
        {
            title: <Label i18nId="交易名称" />,
            dataIndex: "frm",
            key: "frm",
            width: 120,
            render:(val)=>{
              if(val){
                let str = val.slice(7)
                return str
              }
            }
        },
        {
            title: <Label i18nId="SPTP_TH000024" />,
            dataIndex: "credattim",
            key: "credattim",
            width: 120,
            render:(val)=>{
              if(val)
              return moment(val).format('YYYY-MM-DD')
            }
        },

        {
            title: <Label i18nId="SPTP_TH000019" />,
            dataIndex: "objref",
            key: "objref",
            width: 120,
        },
        {
            title: <Label i18nId="SPTP_TH000008" />,
            dataIndex: "sta",
            key: "sta",
            width: 100,
            render: (val, row, index) => {
                let text = val
                let em = CodeTable.sptsta.find(item => item.value == val)
                if (em)
                    text = em.label
                return text
            }
        },
        {
            title: <Label i18nId="SPTP_TH000020" />,
            dataIndex: "creusr",
            key: "creusr",
            width: 80,
        },
        {
            title: <Label i18nId="SPTP_TH000021" />,
            dataIndex: "relcur",
            key: "relcur",
            width: 90,
        },
        {
            title: <Label i18nId="SPTP_TH000022" />,
            dataIndex: "relamt",
            key: "relamt",
            width: 100,
            render: (val, row, index) => {
                return <AmountLabel cur={row.relcur} amt={val} />
            },
        },
        {
            title: <Label i18nId="SPTP_TH000025" />,
            dataIndex: "ownbchkey",
            key: "ownbchkey",
            width: 90,
        },
        {
            title: '操作',
            dataIndex: "op",
            key: "op",
            width: 180,
            render: (val, row, index) => {
              if(row.frm){
                let pathname = row.frm.slice(0,6)
                return (
                  <div>
                    <Link to={{ pathname, query: { sptinr: row.inr, from: "sptsel" } }}>处理</Link>
                    <Divider type="vertical" />
                    <a href="javascript:void(0)" onClick={() => this.onSptp_del(row)}>删除</a>
                    <Divider type="vertical" />
                    {
                      row.smhinr && 
                      <a href="javascript:void(0)" onClick={() => this.onTrndoc_butshw(row)}>显示报文</a>
                    }
                  </div>
                )
              }else{
                return (
                  <div>
                    <a href="javascript:void(0)" onClick={() => this.onSptp_del(row)}>删除</a>
                    <Divider type="vertical" />
                    {
                      row.smhinr && 
                      <a href="javascript:void(0)" onClick={() => this.onTrndoc_butshw(row)}>显示报文</a>
                    }
                  </div>
                )
              }
            }
        },
    ]

    onDetail = (inr, frm) => {
        this.props.history.push(frm + '/' + inr);
    }
    //按钮事件
    onReset = () => {
        this.model.clear();
    }
    onSel = () => {
        this.formBlur = true  //已触发表单提交处理
        Validator.validate(this.model, this.model.descriptor, async (errors, values) => {
            if (errors)
                return
            const rtnmsg = await Api.post('sptsel/sel', { data: this.model })
            if (rtnmsg.retcod == SUCCESS) {
                //Notification.success({ message: '数据提交成功!' })
                this.model.sptp_lst = rtnmsg.data['sptp_lst'];
            }
            else {
                Notification.error({ message: '服务端请求失败!' })
                if (rtnmsg.retcod == 'L0003')
                    this.props.history.replace("/login")
            }
            //余下逻辑处理

        })
    }
    onSptp_del = (row) => {
        this.formBlur = true  //已触发表单提交处理
        Validator.validate(this.model, this.model.descriptor, async (errors, values) => {
            if (errors)
                return
            let sptinr = row.inr
            const rtnmsg = await Api.post('sptsel/sptp_del', { params: { sptinr }, data: this.model })
            if (rtnmsg.retcod == SUCCESS) {
                //Notification.success({message:'数据提交成功!'})
                this.model.sptp_lst = rtnmsg.data['sptp_lst'];
            }
            else {
                Notification.error({ message: '服务端请求失败!' })
            }
            //余下逻辑处理

        })
    }
    onTrndoc_butshw = async (row) => {
        this.formBlur = true  //已触发表单提交处理

        let smhinr = row.smhinr;
        rtnmsg = await Api.post('sptsel/inc', { params: { smhinr } })
        if (rtnmsg.retcod == SUCCESS) {
          Modal.info({
            title: '电证报文', content: <div style={{ height: 400, overflow: 'auto' }}><ELCMessage mty={rtnmsg.data["mtabut_msgtyp"]} message={rtnmsg.data["mtabut_docinf"]} /></div>,
            width: 1000,
          })
        }
        else {
            Notification.error({ message: '服务端请求失败!' })
        }
    }
    //交易内实现
    renderPage() {
        const bind = this.bind
        const { i18n } = this.props

        return (
            <Card title="经办夹" size="small" className="transTitle">
                <div style={{ position: 'relative' }}>

                    <Row gutter={16} >
                        <Col span={12} className='item' >
                            <Col span={4}>
                                <Label value="交易名" />
                            </Col>
                            <Col span={12} >
                                <InputItem InputProps={bind("sptp_frm")} />
                            </Col>
                        </Col>
                        <Col span={12} className='item' >
                            <Col span={4}>
                                <Label value="参考号" />
                            </Col>
                            <Col span={12} >
                                <InputItem InputProps={bind("sptp_objref")} />
                            </Col>
                        </Col>
                    </Row>
                    <Row gutter={16} >
                        <Col span={12} className='item' >
                            <Col span={4}>
                                <Label value="经办柜员" />
                            </Col>
                            <Col span={12} >
                                <InputItem InputProps={bind("sptp_usr")} />
                            </Col>
                        </Col>
                        <Col span={12} className='item' >
                            <Col span={4}>
                                <Label value="状态" />
                            </Col>
                            <Col span={12} >
                                <SelectItem InputProps={bind("sptp_sta")} code={CodeTable.sptsta} />
                            </Col>
                        </Col>
                    </Row>
                    <Row gutter={16} >
                        <Col span={12} className='item' >
                            <Col span={4}>
                                <Label i18nId={"SPTP_LT000016"} />
                            </Col>
                            <Col span={6} >
                                <DatePickerItem InputProps={bind("sptp_datsta")} placeholder='开始日期' />
                            </Col>
                            <Col span={1} >
                                <Label value="至" />
                            </Col>
                            <Col span={6} >
                                <DatePickerItem InputProps={bind("sptp_datend")} placeholder='结束日期' />
                            </Col>
                        </Col>
                    </Row>

                    <Row className='btnbox' >
                        <Button type="primary" icon="search" onClick={this.onSel} style={{ 'marginRight': '10px' }}>
                            <Label i18nId="MTABUT_BT000022" />
                        </Button>
                        <Button type="primary" onClick={this.onReset}>
                            <Label i18nId="MTABUT_BT000023" />
                        </Button>
                    </Row>

                    <Table pagination={{ pageSize: 10, hideOnSinglePage: true }} rowKey="inr" columns={this.lstHeader} dataSource={this.model.sptp_lst} />
                </div>
            </Card>
        )
    }
}
