import React, { Component, Fragment } from 'react'
import {
  Page, Validator, Notification, FormItem,ConfirmButton,
  InputItem, Input, Bind, SelectItem, Button, Label, TextArea, Section, Table, DatePickerItem
} from '@/components/Common-Library'
import Api from '@/service/api'
import mTrnrel from '../model'
import CodeTableFactory from '@/components/CodeTable'
import "./index.less"
import { inject, observer } from 'mobx-react'
import { action, observable } from 'mobx'
import { Row, Col, Spin, Modal } from 'antd'
import ELCMessage from '@/components/Business-Library/ELCMessage'
import { Card } from 'antd'

const CodeTable = CodeTableFactory.getInstance()

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

  constructor(props) {
    super(props)
    this.model = new mTrnrel()
    this.bind = Bind.bind(this)
    this.state = { flag: true }
  }

  componentWillUnmount() {
  
  }

  async componentWillMount() {
    if (this.props.location.state) {
      let trninr = this.props.location.state.trninr
      const rtnmsg = await Api.post('trnrel/init', { params: { trninr } })
      if (rtnmsg.retcod == SUCCESS) {
        //Notification.success({ message: '数据提交成功!' })
        Object.assign(this.model, rtnmsg.data)
        this.setState({ flag: false })
      }
      else {
        Notification.error({ message: '服务端请求失败!' })
      }
    }
  }

  trslstHeader = [
    {
      title: <Label i18nId="TRNP_TH000242" />,
      dataIndex: "",
      key: "seq",
      width: 100,
      render: (val, rowData, index) => {
        return (index + 1) + ""
      }
    },
    {
      title: <Label i18nId="TRNP_TH000243" />,
      dataIndex: "usr",
      key: "usr",
      width: 100,
    },
    {
      title: <Label i18nId="TRNP_TH000244" />,
      dataIndex: "dattim",
      key: "dattim",
      width: 100,
    },
    {
      title: <Label i18nId="TRNP_TH000245" />,
      dataIndex: "sigidx",
      key: "sigidx",
      width: 100,
    },
  ]
  smhlstHeader = [
    {
      title: <Label i18nId="接收方" />,
      dataIndex: "apf",
      key: "apf",
      width: 100,
      render: (val, row, index) => {
        let text = val
        let em = CodeTable.rol && CodeTable.rol.find(item => item.value == val)
        if(em){
          text = em.label
        }
        return text
      }
    },
    {
      title: <Label i18nId="TRNP_TH000240" />,
      dataIndex: "cortyp",
      key: "cortyp",
      width: 120,
      render: (val, row, index) => {
        let text = val
        let em = CodeTable.cortyp && CodeTable.cortyp.find(item => item.value == val)
        if(em){
          text = em.label
        }
        return text
      }
    },
    {
      title: <Label i18nId="TRNP_TH000241" />,
      dataIndex: "nam",
      key: "nam",
      width: 200,
    },
    {
      title: '操作',
      dataIndex: "op",
      key: "op",
      width: 80,
      render: (val, row, index) => {
        return (
          <div>
            <a href="javascript:void(0)" onClick={() => this.onRecpan_butshw(row)}>显示</a>
          </div>
        )
      }
    },
  ]
  recpan_wfelstHeader = [
    {
      title: <Label value="服务码" />,
      dsp: `服务码`,
      dataIndex: "srvsub",
      key: "srvsub",
      width: 100,
    },
    {
      title: <Label value="服务名" />,
      dsp: `服务名`,
      dataIndex: "srvnam",
      key: "srvnam",
      width: 100,
    },
    {
      title: <Label value="状态" />,
      dsp: `状态`,
      dataIndex: "sta",
      key: "sta",
      width: 100,
      render: (val, row, index) => {
        let text = val
        let em = CodeTable.sta && CodeTable.sta.find(item => item.value == val)
        if (em)
          text = em.label
        return text
      }
    },
    {
      title: <Label value="重调次数" />,
      dsp: `重调次数`,
      dataIndex: "rtycnt",
      key: "rtycnt",
      width: 100,
    },
    {
      title: <Label value="优先级" />,
      dsp: `优先级`,
      dataIndex: "lev",
      key: "lev",
      width: 100,
    },
    {
      title: <Label value="返回信息" />,
      dsp: `返回信息`,
      dataIndex: "txt",
      key: "txt",
      width: 100,
    },
  ]

  //交易快照按钮
  onDetail = () => {
    this.formBlur = true  //已触发表单提交处理
    //加载交易快照
    let trn_inr = this.model.trn_inr
    let trn_inifrm = this.model.trn_inifrm
    // let viewurl = `/E-Credit/?#/${this.props.i18n.lang ? this.props.i18n.lang + '/' : ''}display/${trn_inifrm}/${trn_inr}`
    let viewurl = `/?#/${this.props.i18n.lang ? this.props.i18n.lang + '/' : ''}display/${trn_inifrm}/${trn_inr}`
    window.open(viewurl, 'newwindow', 'height=1200,width=800,top=100,left=100,toolbar=no,resizable=no,menubar=no,location=no, status=no');
  }

  //退回按钮
  onReprow = () => {
    this.formBlur = true  //已触发表单提交处理
    Validator.validate(this.model, this.model.descriptor, async (errors, values) => {
      if (errors)
        return
      let trninr = this.model.trn_inr
      const rtnmsg = await Api.post('trnrel/reprow', { params: { 'trninr': trninr }, data: this.model })
      if (rtnmsg.retcod == SUCCESS) {
        Notification.success({ message: '退回成功!' })
        this.props.history.push("/business/trnrel");
      }
      else {
        Notification.error({ message: '服务端请求失败!' })
      }
      //余下逻辑处理

    })
  }

  //授权按钮
  onRelrow = () => {
    this.formBlur = true  //已触发表单提交处理
    Validator.validate(this.model, this.model.descriptor, async (errors, values) => {
      let trninr = this.model.trn_inr
      const rtnmsg = await Api.post('trnrel/relrow', { params: { 'trninr': trninr }, data: this.model })
      if (rtnmsg.retcod == SUCCESS) {
        Notification.success({ message: '复核成功!' })
        this.props.history.push("/business/trnrel");
      }
      else {
        this.model.recpan_wfelst=rtnmsg.data.recpan_wfelst;
        Notification.error({ message: rtnmsg.retmsg })
      }
      //余下逻辑处理

    })
  }

  //返回按钮
  onRtn = () => {
    this.formBlur = true  //已触发表单提交处理
    // this.props.history.push("/business/trnrel");
    this.props.history.push({
      pathname: "/business/trnrel",
      state: {
        testValue: "1212",
      }
    });
  }

  //报文/面涵展示按钮
  onRecpan_butshw = (row) => {
    this.formBlur = true  //已触发表单提交处理
    Validator.validate(this.model, this.model.descriptor, async (errors, values) => {
      if (errors)
        return
      let cortyp = row.cortyp
      let smhinr = row.inr
      const rtnmsg = await Api.post('trnrel/recpan_butshw', { params: { smhinr }, data: row })
      if (rtnmsg.retcod == SUCCESS) {
        if (cortyp == 'ELC') {
          Modal.info({
            title: '电证报文', content: <div style={{ height: 400, overflow: 'auto' }}><ELCMessage mty={row.msgtyp} message={rtnmsg.data["recpan_docinf"]} /></div>,
            width: 1000,
          })
        } 
        
        else {
          if(cortyp == 'SWT' || cortyp == 'FMT' || cortyp == 'CMT')
          {
            let viewurl="/psbcfront"+row.docpth;
            window.open(viewurl, 'newwindow', 'height=1200,width=800,top=100,left=100,toolbar=no,resizable=no,menubar=no,location=no, status=no');
          }
          else{
          let url = "/psbcfront" + row.docpth ;
          let viewurl = "/psbcfront/pdfjs/web/viewer.html";
          viewurl += "?file=" + url;
          window.open(viewurl, 'newwindow', 'height=1200,width=800,top=100,left=100,toolbar=no,resizable=no,menubar=no,location=no, status=no');
        }
        }
      }
      else {
        Notification.error({ message: '服务端请求失败!' })
      }
      //余下逻辑处理

    })
  }
  //交易内实现
  renderPage() {
    const bind = this.bind
    const { i18n } = this.props
    if (this.state.flag == true) {
      return <Spin style={{ width: "100%", justifyContent: "center" }} spinning={this.state.flag} />
    }
    return (
      <Card title="业务详情" size="small" className="transTitle">
        <div style={{ position: 'ceter', padding: 20 }}>
          {/*第一行*/}
          {/*<InputItem InputProps={bind("usr0")} />*/}
          <Row>
            <Col span={12}>
              <Row className='row'>
                <Col span={5} offset={2}>
                  {/* 业务参考号 */}
                  <Label i18nId={"TRNP_LT000050"} />
                </Col>
                <Col span={14}>
                  {/* 业务参考号 输入框 */}
                  <InputItem InputProps={bind("trn_ownref")} disabled={true} />
                </Col>
              </Row>
            </Col>
            <Col span={12}>
              <Row className='row'>
                <Col span={5} offset={2}>
                  {/* 业务流水号 */}
                  <Label i18nId={"TRNP_LT000051"} />
                </Col>
                <Col span={14}>
                  {/* 业务流水号 输入框 */}
                  <InputItem InputProps={bind("trn_inr")} disabled={true} />
                </Col>
              </Row>
            </Col>
          </Row>
          {/* 第二行 */}
          <Row>
            <Col span={12}>
              <Row className='row'>
                <Col span={5} offset={2}>
                  {/* 交易编码 */}
                  <Label i18nId={"TRNP_LT000053"} />
                </Col>
                <Col span={14}>
                  {/* 交易编码 输入框 */}
                  <InputItem InputProps={bind("trn_inifrm")} disabled={true} />
                </Col>
              </Row>
            </Col>
            <Col span={12}>
              <Row className='row'>
                <Col span={5} offset={2}>
                  {/* 业务币种金额 */}
                  <Label i18nId={"TRNP_LT000058"} />
                </Col>
                <Col span={5}>
                  {/* 业务币种金额 币种 选择输入框 */}
                  <SelectItem InputProps={bind("trn_reloricur")} code={CodeTable.curtxt} disabled={true} />
                </Col>
                <Col span={8} offset={1}>
                  {/* 业务币种金额 数量 输入框 */}
                  <InputItem InputProps={bind("trn_reloriamt")} disabled={true} />
                </Col>
              </Row>
            </Col>
          </Row>
          {/* 第三行 */}
          <Row>
            <Col span={12}>
              <Row className='row'>
                <Col span={5} offset={2}>
                  {/* 交易描述： */}
                  <Label i18nId={"TRNP_LT000063"} />
                </Col>
                <Col span={14}>
                  {/* 交易描述： 输入框 */}
                  <InputItem InputProps={bind("trn_objnam")} disabled={true} />
                </Col>
              </Row>
            </Col>
            <Col span={12}>
              <Row className='row'>
                <Col span={5} offset={2}>
                  {/* 交易状态 */}
                  <Label i18nId={"TRNP_LT000064"} />
                </Col>
                <Col span={14}>
                  {/* 交易状态 选择输入框 */}
                  <SelectItem InputProps={bind("trn_relflg")} code={CodeTable.relflg} disabled={true} />
                </Col>
              </Row>
            </Col>
          </Row>
          {/* 第四行 */}
          <Row>
            <Col span={12}>
              <Row className='row'>
                <Col span={5} offset={2}>
                  {/* 经办柜员 */}
                  <Label i18nId={"TRNP_LT000065"} />
                </Col>
                <Col span={14}>
                  {/* 经办柜员 输入框 */}
                  <InputItem InputProps={bind("trn_usr")} disabled={true} />
                </Col>
              </Row>
            </Col>
            <Col span={12}>
              <Row className='row'>
                <Col span={5} offset={2}>
                  {/* 柜员组别 */}
                  <Label i18nId={"TRNP_LT000067"} />
                </Col>
                <Col span={14}>
                  {/* 柜员组别 选择输入框 */}
                  <SelectItem InputProps={bind("trn_usg")} code={CodeTable.usg} disabled={true} />
                </Col>
              </Row>
            </Col>
          </Row>
          {/* 第五行 */}
          <Row>
            <Col span={12}>
              <Row className='row'>
                <Col span={5} offset={2}>
                  {/* 提交时间 */}
                  <Label i18nId={"TRNP_LT000068"} />
                </Col>
                <Col span={14}>
                  {/* 提交时间 选择输入框 */}
                  <DatePickerItem InputProps={bind("cretrs_dattim")} disabled={true} />
                </Col>
              </Row>
            </Col>

            <Col span={12}>
              <Row className='row'>
                <Col span={14} offset={2}>
                </Col>
                <Col span={5}>
                  <Button type="primary" onClick={this.onDetail}>
                    <Label itext="交易快照" />
                  </Button>
                </Col>
              </Row>
            </Col>
          </Row>

          <br/>

          <Row>
            <Col span={21} offset={1}>
              <div className="TABLE">
                {/* 表格 smhlst */}
                <Table pagination={{ pageSize: 10, hideOnSinglePage: true }} rowKey="inr" columns={this.smhlstHeader} dataSource={this.model.recpan_smhlst} />
              </div>
            </Col>
          </Row>

          <br/>
          <br/>
          <br/>

          {/* 签名 */}
          {/* <Row style={{ marginTop: 50 }}>
            <Col span={24}>
              <Row >
                <Col span={2} offset={1}>
                  <Label i18nId={"TRNP_LT000060"} />
                </Col>
                <Col className='tex' span={15}>
                  <TextArea InputProps={bind("txt")} rows={4} style={{ resize: "none" }} />
                </Col>
              </Row>
            </Col>
          </Row> */}
          
          <Row>
            <Col span={21} offset={1}>
              {/* 表格trslst  */}
              <div className="TABLE">
                <Table title={() => "工作服务流程"} pagination={{ pageSize: 10, hideOnSinglePage: true }} rowKey="inr" columns={this.recpan_wfelstHeader} dataSource={this.model.recpan_wfelst} path="/recpan/wfelst" />
              </div>
            </Col>
          </Row>

          <br/>
          <br/>
          <br/>

          <Row>
            <Col span={21} offset={1}>
              {/* 表格trslst  */}
              <div className="TABLE">
                <Table pagination={{ pageSize: 10, hideOnSinglePage: true }} rowKey="inr" columns={this.trslstHeader} dataSource={this.model.recpan_trslst} />
              </div>
            </Col>
          </Row>

          <Row type="flex" justify="center">
            <Col>
              <div className='button0'>
                <div className='button2'>
                  <Button type="primary" onClick={this.onRtn}>
                    {/* 返回 */}
                    <Label i18nId="MTABUT_BT000020" />
                  </Button>
                </div>
                <div className='button2'>
                  <ConfirmButton
                    onOK={this.onReprow}
                    type="primary"
                    message="确定退回？"
                    disabled={this.model.trn_relflg!="W"}
                  >
                    <Label i18nId="TRNREL_FD000187" />
                  </ConfirmButton>
                </div>
                <div className='button2'>
                  <ConfirmButton
                    onOK={this.onRelrow}
                    type="primary"
                    message="确定授权？"
                    disabled={this.model.trn_relflg!="W"}
                  >
                    <Label i18nId="TRNP_BT000073" />
                  </ConfirmButton>
                </div>
              </div>
            </Col>
          </Row>
        </div >
      </Card>
    )
  }
}
