import React, { Component, Fragment } from 'react'
import {
	Page, Validator, Notification, FormItem, DatePickerItem,
	InputItem, Input, Bind, SelectItem, Button, Label, Image, Table
} from '@/components/Common-Library'
import Api from '@/service/api'
import mDblaut 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, Divider } from 'antd'
import { Link } from 'react-router-dom'

const CodeTable = CodeTableFactory.getInstance()


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

	@observable
	bchlevelLst: []

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

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


	async componentWillMount() {
		if (this.props.location.state) {
			let selflg = this.props.location.state.selflg
			if (selflg)
				this.onSel()
		} else {
			const rtnmsg = await Api.post('dblaut/init', {})
			if (rtnmsg.retcod == SUCCESS) {
				Object.assign(this.model, rtnmsg.data)
				this.bchlevelLst = rtnmsg.codetable['\\autgrp\\rec\\bchkey'];
			}
			else {
				Notification.error({ message: '服务端请求失败!' })
			}
		}
		//快照模式下，不必开启校验，否则，静默校验，和记录变动
		!this.loadDisplay() && this.model.openMonitor && this.model.openMonitor() //开启校验	
	}

	autp_autlstHeader = [
		{
			title: <Label value="机构编码" />,
			dsp: `机构编码`,
			dataIndex: "bchkey",
			key: "bchkey",
			width: 100,
		},
		{
			title: <Label value="交易码" />,
			dsp: `交易码`,
			dataIndex: "frm",
			key: "frm",
			width: 100,
		},
		{
			title: <Label value="交易名" />,
			dsp: `交易名`,
			dataIndex: "frmnam",
			key: "frmnam",
			width: 100,
		},
		{
			title: <Label value="自动经办" />,
			dsp: `自动经办`,
			dataIndex: "autspt",
			key: "autspt",
			width: 100,
			render: (val, row, index) => {
				let text = val
				let em = CodeTable.autflg.find(item => item.value == val)
				if (em)
					text = em.label
				return text
			}
		},
		{
			title: <Label value="自动复核" />,
			dsp: `自动复核`,
			dataIndex: "auttrn",
			key: "auttrn",
			width: 100,
			render: (val, row, index) => {
				let text = val
				let em = CodeTable.autflg.find(item => item.value == val)
				if (em)
					text = em.label
				return text
			}
		},
		{
			title: <Label value="自动经办客户限制" />,
			dsp: `自动经办客户限制`,
			dataIndex: "sptcuslmt",
			key: "sptcuslmt",
			width: 140,
			render: (val, row, index) => {
				let text = val
				let em = CodeTable.cuslim.find(item => item.value == val)
				if (em)
					text = em.label
				return text
			}
		},
		{
			title: <Label value="自动复核柜员限制" />,
			dsp: `自动复核柜员限制`,
			dataIndex: "trnusrlmt",
			key: "trnusrlmt",
			width: 140,
			render: (val, row, index) => {
				let text = val
				let em = CodeTable.cusflg.find(item => item.value == val)
				if (em)
					text = em.label
				return text
			}
		},
		{
			title: <Label value="币种" />,
			dsp: `币种`,
			dataIndex: "cur",
			key: "cur",
			width: 100,
			render: (val, row, index) => {
				let text = val
				let em = CodeTable.curtxt.find(item => item.value == val)
				if (em)
					text = em.label
				return text
			}
		},
		{
			title: <Label value="自动经办限额" />,
			dsp: `自动经办限额`,
			dataIndex: "sptamt",
			key: "sptamt",
			width: 120,
		},
		{
			title: <Label value="自动复核限额" />,
			dsp: `自动复核限额`,
			dataIndex: "trnamt",
			key: "trnamt",
			width: 120,
		},
		{
			title: <Label value="渠道" />,
			dsp: `渠道`,
			dataIndex: "channel",
			key: "channel",
			width: 100,
			render: (val, row, index) => {
				let text = val
				let em = CodeTable.autcal.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: 'dbeaut', query: { inr: row.inr } }}>修改</Link>
						<Divider type="vertical" />
						<Link to={{ pathname: 'dbiaut', query: { inr: row.inr } }}>明细</Link>
						<Divider type="vertical" />
						<Link to={{ pathname: 'dbdaut', query: { inr: row.inr } }}>删除</Link>
					</div>
				)
			}
		},
	]


	//按钮事件
	onAdd = () => {
		this.props.history.push('dbaaut')
	}

	onSel = () => {
		this.formBlur = true  //已触发表单提交处理
		Validator.validate(this.model, this.model.descriptor, async (errors, values) => {
			if (errors)
				return
			const rtnmsg = await Api.post('dblaut/sel', { data: this.model })
			if (rtnmsg.retcod == SUCCESS) {
				//Notification.success({message:'数据提交成功!'})
				this.model.autp_autlst = rtnmsg.data.autp_autlst;

			}
			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>
						<Col span={20}>
							<Row>
								<Col span={12}>
									<Row className='row'>
										<Col span={5} offset={2}>
											<Label value={"归属机构"} />
										</Col>
										<Col span={14}>
											<SelectItem InputProps={bind("autp_bchkey")} code={this.bchlevelLst} desp="归属机构" path="/autp/bchkey" />
										</Col>
									</Row>
								</Col>
							</Row>
						</Col>
					</Row>
					<div className='button0'>
						<div className='button2'>
							<Button type="primary" icon="search" onClick={this.onSel} desp="查询" path="/mtabut/sel">
								<Label value="查询" desp="查询" />
							</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.onAdd}>
								<Label i18nId="MTABUT_BT000182" />
							</Button>
						</div>
					</div>
					<Row >
						<Col span={23} style={{ marginLeft: 40 }}>
							<Table rowKey="inr" columns={this.autp_autlstHeader} dataSource={this.model.autp_autlst} path="/autp/autlst" />
						</Col>
					</Row>
				</div>
			</Card>
		)
	}
}
