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



@inject('UserContext')
@inject('i18n')
@observer
export default class QueselScreen extends Page {
	@observable
	formBlur = false
	@observable
	codetable={}
	constructor(props) {
		super(props)
		this.model = new mQuesel()
		// this.model.openValidate() //开启校验
		this.bind = Bind.bind(this)
	}
	async componentWillMount() {
		/*
		*添加初始化代码
		*/
		const rtnmsg = await Api.post('quesel/init', { data: this.model })
		if (rtnmsg.retcod == SUCCESS) {
			const { data ,codetable} = rtnmsg
			runInAction(() => {
				Object.assign(this.model, data);
				Object.assign(this.codetable,codetable);
			})
		}
		//快照模式下，不必开启校验，否则，静默校验，和记录变动
		!this.loadDisplay() && this.model.openMonitor && this.model.openMonitor() //开启校验	
	}
	componentWillUnmount() {
		this.model.stopMonitor && this.model.stopMonitor()//关闭校验
	}

	quelstHeader = [
		{
			title: <Label itext="等级" />,
			dataIndex: "proity",
			key: "proity",
			width: 60,
			sorter: (r1, r2) => ColSorter(r1.proity, r2.proity),
		},
		{
			title: <Label itext="类型" />,
			dataIndex: "cla",
			key: "cla",
			width: 100,
			sorter: (r1, r2) => ColSorter(r1.cla, r2.cla),
			render: (val, row, index) => {
				let text = val
				let em = CodeTable.cla.find(item => item.value == val)
				if (em)
					text = em.label
				return text
			}
		},
		{
			title: <Label itext="交易" />,
			dataIndex: "frm",
			key: "frm",
			width: 90,
			sorter: (r1, r2) => ColSorter(r1.frm, r2.frm),
		},
		{
			title: <Label itext="业务编号" />,
			dataIndex: "objref",
			key: "objref",
			width: 100,
			sorter: (r1, r2) => ColSorter(r1.objref, r2.objref),
		},
		{
			title: <Label itext="币种" />,
			dataIndex: "relcur",
			key: "relcur",
			width: 60,
			sorter: (r1, r2) => ColSorter(r1.relcur, r2.relcur),
		},
		{
			title: <Label itext="金额" />,
			dataIndex: "relamt",
			key: "relamt",
			width: 100,
			sorter: (r1, r2) => ColSorter(r1.relamt, r2.relamt),
		},
		{
			title: <Label itext="分配柜员" />,
			dataIndex: "wrkusr",
			key: "wrkusr",
			width: 100,
			sorter: (r1, r2) => ColSorter(r1.wrkusr, r2.wrkusr),
		},
		{
			title: <Label itext="业务日期" />,
			dataIndex: "tskdattim",
			key: "tskdattim",
			width: 100,
			sorter: (r1, r2) => ColSorter(r1.tskdattim, r2.tskdattim),
		},
		{
			title: <Label itext="状态" />,
			dataIndex: "sta",
			key: "sta",
			width: 60,
			sorter: (r1, r2) => ColSorter(r1.sta, r2.sta),
		},
	]

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

			}
			else {
				Notification.error({ message: '服务端请求失败!' })
			}
			//余下逻辑处理

		})
	}


	//交易内实现
	renderPage() {
		const bind = this.bind
		const { i18n } = this.props
		const CodeTable = CodeTableFactory.getInstance()

		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 itext="单证中心" />
										</Col>
										<Col span={14}>
											<SelectItem InputProps={bind("tfccod")} code={this.codetable.tfccod} desp="单证中心" path="/tfccod" />
										</Col>
									</Row>
								</Col>
								<Col span={12}>
									<Row className='row'>
										<Col span={5} offset={2}>
											<Label itext="组别" />
										</Col>
										<Col span={14}>
											<SelectItem InputProps={bind("usg")} code={this.codetable.usg} desp="组别" path="/usg" />
										</Col>
									</Row>
								</Col>
							</Row>
							<Row>
								<Col span={12}>
									<Row className='row'>
										<Col span={5} offset={2}>
											<Label itext="类型" />
										</Col>
										<Col span={14}>
											<SelectItem InputProps={bind("cla")} code={CodeTable.clatyp} desp="类型" path="/cla" />
										</Col>
									</Row>
								</Col>
								<Col span={12}>
									<Row className='row'>
										<Col span={5} offset={2}>
											<Label itext="日期" />
										</Col>
										<Col span={14}>
											<DatePickerItem InputProps={bind("tardat")} desp="日期" path="/tardat" />
										</Col>
									</Row>
								</Col>
							</Row>
							<Row>
								<Col span={12}>
									<Row className='row'>
										<Col span={5} offset={2}>
											<Label itext="状态" />
										</Col>
										<Col span={14}>
											<SelectItem InputProps={bind("questa")} code={CodeTable.questa} desp="状态" path="/questa" />
										</Col>
									</Row>
								</Col>
							</Row>
						</Col>
					</Row>
					<div style={{ textAlign: "right" }}>
						<Button type="primary" icon="search" onClick={this.onButsel}>
							<Label value="搜索" />
						</Button>
					</div>
					<Row>
						<Col span={23} style={{ marginLeft: 40 }}>
							<Table columns={this.quelstHeader} source={this.model.quelst} />
						</Col>
					</Row>

					<Row type="flex" justify="space-around">

						<Button type="primary" icon="search" onClick={this.onButsel} desp="搜索" path="/butsel">
							<Label itext="查询" />
						</Button>
						<Button type="primary" onClick={this.onGetone} desp="获取" path="/getone">
							<Label itext="获取" />
						</Button>
						<Button type="primary" onClick={this.onTake} desp="任务处理" path="/take">
							<Label itext="任务处理" />
						</Button>
						<Button type="primary" onClick={this.onButman} desp="手工分配" path="/butman">
							<Label itext="手工分配" />
						</Button>
						<Button type="primary" onClick={this.onButret} desp="重新分配" path="/butret">
							<Label itext="重新分配" />
						</Button>
						<Button type="primary" onClick={this.onButbak} desp="退回分配" path="/butbak">
							<Label itext="退回分配" />
						</Button>
						<Button type="primary" onClick={this.onButrtn} desp="退回收单" path="/butrtn">
							<Label itext="退回收单" />
						</Button>
						<Button type="primary" onClick={this.onButtfc} desp="调整中心" path="/buttfc">
							<Label itext="调整中心" />
						</Button>
					</Row>
				</div>
			</Card>
		)
	}
}
