import React, { Component, Fragment } from 'react'
import {
    Page, Validator, Notification, FormItem,
    InputItem, Input, Bind, SelectItem, Button, Label, Table, Section
} from '@/components/Common-Library'
import { Divider } from 'antd'
import Api from '@/service/api'
import mDblpty from '../model'
import CodeTableFactory from '@/components/CodeTable'
import "./index.less"
import { inject, observer } from 'mobx-react'
import { action, observable } from 'mobx'
import { Col, Row,Card } from 'antd'
import { Link } from 'react-router-dom'

const CodeTable = CodeTableFactory.getInstance()

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

    constructor(props) {
        super(props)
        this.model = new mDblpty()
        this.bind = Bind.bind(this)
    }

	componentWillMount() {
    //快照模式下，不必开启校验，否则，静默校验，和记录变动
		!this.loadDisplay() && this.model.openMonitor && this.model.openMonitor() //开启校验
	}

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

    ptylstHeader = [
        {
            title: <Label i18nId="PTYP_TH000184" />,
            dataIndex: "extkey",
            key: "extkey",
            width: 100,
        },

        {
            title: <Label i18nId="PTYP_TH000183" />,
            dataIndex: "namcn",
            key: "namcn",
            width: 150,
        },

        {
            title: <Label i18nId="PTYP_TH000186" />,
            dataIndex: "nam1",
            key: "nam1",
            width: 150,
        },

        {
            title: <Label i18nId="PTYP_TH000193" />,
            dataIndex: "ptytyp",
            key: "ptytyp",
            width: 100,
            render: (val, row, index) => {
                let text = val
                let em = CodeTable.ptytyp.find(item => item.value == val)
                if (em)
                    text = em.label
                return text
            }
        },
        {
            title: <Label i18nId="PTYP_TH000194" />,
            dataIndex: "loccty",
            key: "loccty",
            width: 60,
        },

        {
            title: <Label i18nId="PTYP_TH000198" />,
            dataIndex: "swfno",
            key: "swfno",
            width: 100,
        },
        // {
        //     title: <Label i18nId="PTYP_TH000199" />,
        //     dataIndex: "bchkeyinr",
        //     key: "bchkeyinr",
        //     width: 100,
        // },
        {
            title: <Label i18nId="PTYP_TH000037" />,
            dataIndex: "sta",
            key: "sta",
            width: 60,
            render: (val, row, index) => {
                let text = val
                let em = CodeTable.sta.find(item => item.value == val)
                if (em)
                    text = em.label
                return text
            }
        },
        {
            title: '操作',
            dataIndex: "op",
            key: "op",
            width: 120,
            render: (val, row, index) => {
                return (
                    <div>
                        <Link to={{ pathname: 'dbepty', query: { inr: row.inr } }}>修改</Link>
                        <Divider type="vertical" />
                        <Link to={{ pathname: 'dbipty', query: { inr: row.inr } }}>明细</Link>
                        <Divider type="vertical" />
                        <Link to={{ pathname: 'dbdpty', query: { inr: row.inr } }}>删除</Link>
                    </div>
                )
            }
        },
    ]

    onAdd = () => {
        this.props.history.push('dbapty')
    }
    onPiliang=()=>{
        this.props.history.push('ptybat')
    }

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

        })
    }

    //通过数据变化，控制客户编号栏位的检核重新执行，给出正确提示
    namChg=()=>{
      let ptyp_extkey = this.model.ptyp_extkey
      this.model.ptyp_extkey = " "
      this.model.ptyp_extkey = ptyp_extkey
    }

    //通过数据变化，控制客户名称栏位的检核重新执行，给出正确提示
    extkeyChg=()=>{
      let ptyp_chnnam = this.model.ptyp_chnnam
      this.model.ptyp_chnnam = " "
      this.model.ptyp_chnnam = ptyp_chnnam
    }


    //交易内实现
    renderPage() {
        const bind = this.bind
        const { i18n } = this.props
        return (
		     <Card title="客户管理" size="small" className="transTitle">
            <div style={{ position: 'relative' }}>

                <Row>
                    <Col span={20}>

                        <Row>
                            <Col span={12}>
                                <Row className='row'>
                                    <Col span={5} offset={2}>
                                        <Label i18nId={"PTYP_LT000058"} />
                                    </Col>
                                    <Col span={14}>
                                        <SelectItem InputProps={bind("ptyp_sta")} code={CodeTable.sta} />
                                    </Col>
                                </Row>
                            </Col>
                            <Col span={12}>
                                <Row className='row'>
                                    <Col span={5} offset={2}>
                                        <Label i18nId={"PTYP_LT000059"} />
                                    </Col>
                                    <Col span={14}>
                                        <InputItem InputProps={{...bind("ptyp_chnnam"), onBlur:this.namChg}} />
                                    </Col>
                                </Row>
                            </Col>
                        </Row>

                        <Row>
                            <Col span={12}>
                                <Row className='row'>
                                    <Col span={5} offset={2}>
                                        <Label i18nId={"PTYP_LT000162"} />
                                    </Col>
                                    <Col span={14}>
                                        <InputItem InputProps={{...bind("ptyp_extkey"),onBlur:this.extkeyChg}} />
                                    </Col>
                                </Row>
                            </Col>
                        </Row>


                    </Col>
                </Row>

                <div className='button0'>
                    <div className='button2'>
                        <Button type="primary" icon="search" onClick={this.onSel}>
                            <Label i18nId="MTABUT_BT000022" />
                        </Button>
                    </div>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <div className='button2'>
                        <Button type="primary" onClick={this.onPiliang}>
                            <Label value="批量新增" />
                        </Button>
                    </div>
					 <div className='button2'>
                        <Button type="primary" onClick={this.onAdd}>
                            <Label i18nId="MTABUT_BT000182" />
                        </Button>
                    </div>
                   
                </div>
                <Row >
                    <Col span={23} style={{ marginLeft: 40 }}>
                        <Table pagination={{ pageSize: 10, hideOnSinglePage: true }} columns={this.ptylstHeader} key={'inr'} dataSource={this.model.ptyp_ptylst} />
                    </Col>
                </Row>
            </div>
			</Card>
        )
    }
}
