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

import { TableExpansion } from '@/components/Business-Library'

const CodeTable = CodeTableFactory.getInstance()


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

	constructor(props) {
		super(props)
		// this.model = new mDbitsk()
		this.model = this.props.model;
		// this.model.openValidate() //开启校验
		this.bind = Bind.bind(this);
		this.codetable = this.props.codetable;
	}
	componentWillUnmount() {
		// this.model.closeValite()//关闭校验
	}
	// async componentWillMount() {
	// 	if (this.props.location.state) {
	// 		let selflg = this.props.location.state.selflg
	// 		if (selflg)
	// 			this.onSel()
	// 	} else {
	// 		const rtnmsg = await Api.post('dbitsk/init', {})
	// 		if (rtnmsg.retcod == SUCCESS) {
	// 			Object.assign(this.model, rtnmsg.data)
	// 			this.bchlevelLst = rtnmsg.codetable['bclp_bchkey'];
	// 		}
	// 		else {
	// 			Notification.error({ message: '服务端请求失败!' })
	// 		}
	// 	}
	// }
	usrlin = [];
	usrlod = [];
	usrlodHeader = [
		{
			title: <Label value="选中" />,
			dataIndex: "_auto0",
			key: "_auto0",
			width: 40,
			render: (text, row, record) => {
				this.usrlod[record] = this.usrlod[record] || false;
				return <Checkbox checked={this.usrlod[record]} onChange={(val) => {
					this.usrlod[record] = val;
					this.setState({})
				}} />
			}
		},
		{
			title: <Label value="用户" />,
			dataIndex: "nam",
			key: "nam",
			width: 60,
		},
		{
			title: <Label value="用户名" />,
			dataIndex: "dspnam",
			key: "dspnam",
			width: 100,
		},
		{
			title: <Label value="组别" />,
			dataIndex: "usg",
			key: "usg",
			width: 80,
		},
		{
			title: <Label value="分配状态" />,
			dataIndex: "tsksta",
			key: "tsksta",
			width: 80,
			render: (val, row, index) => {
				let text = val
				let em = CodeTable.Tsksta && CodeTable.Tsksta.find(item => item.value == val)
				if (em)
					text = em.value
				return text
			}
		},
		{
			title: <Label value="状态" />,
			dataIndex: "wrksta",
			key: "wrksta",
			width: 100,
			render: (val, row, index) => {
				let text = val
				let em = CodeTable.wrksta && CodeTable.wrksta.find(item => item.value == val)
				if (em)
					text = em.value
				return text
			}
		},
	]
	usrlinHeader = [
		{
			title: <Label value="选中" />,
			dataIndex: "_auto0",
			key: "_auto0",
			width: 40,
			render: (text, row, record) => {
				this.usrlin[record] = this.usrlin[record] || false;
				return <Checkbox checked={this.usrlin[record]} onChange={(val) => {
					this.usrlin[record] = val;
					this.setState({})
				}} />
			}
		},
		{
			title: <Label value="用户" />,
			dataIndex: "nam",
			key: "nam",
			width: 60,
		},
		{
			title: <Label value="用户名" />,
			dataIndex: "dspnam",
			key: "dspnam",
			width: 80,
		},
		{
			title: <Label value="组别" />,
			dataIndex: "usg",
			key: "usg",
			width: 60,
		},
		{
			title: <Label value="分配状态" />,
			dataIndex: "tsksta",
			key: "tsksta",
			width: 100,
			render: (val, row, index) => {
				let text = val
				let em = CodeTable.Tsksta && CodeTable.Tsksta.find(item => item.value == val)
				if (em)
					text = em.value
				return text
			},

		},
		{
			title: <Label value="状态" />,
			dataIndex: "wrksta",
			key: "wrksta",
			width: 100,
			render: (val, row, index) => {
				let text = val
				let em = CodeTable.wrksta && CodeTable.wrksta.find(item => item.value == val)
				if (em)
					text = em.value
				return text
			},
			type: {
				edit: { type: "select", code: CodeTable.wrksta }
			}
		},
		{
			title: <Label value="阈值" />,
			dataIndex: "bustsd",
			key: "bustsd",
			width: 40,
			type: {
				edit: { type: "input" }
			}
		},
	]


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

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

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

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

		})
	}
	// >>向右边移动   左边的是lod 右边的是lin
	handleSwitch1 = () => {
		let sourceTemp = [...this.model.usrlod];
		let targetTemp = [...this.model.usrlin];
		let j = 0;
		for (let i = 0; i < this.model.usrlod.length; i++) {
			if (this.usrlod[j] == false) {

			} else if (this.usrlod[j] == true) {
				this.usrlin.push(this.usrlod[j]);
				this.usrlod.splice(j, 1);
				sourceTemp[j].tsksta = "Y";
				targetTemp.push(sourceTemp[j])
				sourceTemp.splice(j, 1)
				j--
			}
			j++;
		}
		this.model.usrlod = sourceTemp;
		this.model.usrlin = targetTemp;
	}
	// <<向左边移动    左边的是lod 右边的是lin
	handleSwitch2 = () => {
		let sourceTemp = [...this.model.usrlin];
		let targetTemp = [...this.model.usrlod];
		let j = 0;
		for (let i = 0; i < this.model.usrlin.length; i++) {
			if (this.usrlin[j] == false) {

			} else if (this.usrlin[j] == true) {
				this.usrlod.push(this.usrlin[j]);
				this.usrlin.splice(j, 1);
				sourceTemp[j].tsksta = "";
				targetTemp.push(sourceTemp[j])
				sourceTemp.splice(j, 1)
				j--
			}
			j++;
		}
		this.model.usrlin = sourceTemp;
		this.model.usrlod = targetTemp;
	}
	onSavlin = async () => {
		// let usrlin=this.model.usrlin;
		// this.model.usrlin=this.model.usrlod;
		// this.model.usrlod=this.model.usrlin;
		const rtnmsg = await Api.post('dbitsk/savlin', { data: this.model })
		if (rtnmsg.retcod == SUCCESS) {
			Notification.success({ message: '数据提交成功!' })
			Object.assign(this.model, rtnmsg.data)
		}
		else {
			Notification.error({ message: '服务端请求失败!' })
		}
		//余下逻辑处理


		// const rtnmsg = await Api.post('dbitsk/savlin', { data: this.model })
		// if (rtnmsg.retcod == SUCCESS) {
		// 	Notification.success({ message: '数据提交成功!' })
		// 	Object.assign(this.model, rtnmsg.data)
		// }
		// 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={5}>
										<InputItem InputProps={bind("bch_branch")} maxLength={8} desp="机构编码" path="/sysmod/bch/branch" />
									</Col>
									<Col span={8} offset={1}>
										<InputItem InputProps={bind("bch_namcn")} maxLength={40} desp="中文名称" path="/sysmod/bch/namcn" />
									</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>
					</Col>
				</Row>

				<Row>
					<Col span={9}>
						<TableExpansion onChange={(val) => { this.model.usrlod = val }} rowKey="inr" columns={this.usrlodHeader} dataSource={this.model.usrlod} path="/usrlod" />
					</Col>
					<Col span={1} >
						<Button style={{ marginLeft: 10, marginRight: 10 }} onClick={() => this.handleSwitch1()} desp="加入分配" path="/addbut">
							<Label itext=">" />
						</Button>
						<Button style={{ marginTop: 10, marginLeft: 10, marginRight: 10 }} onClick={() => this.handleSwitch2()} desp="推出分配" path="/delbut">
							<Label itext="<" />
						</Button>
					</Col>
					<Col span={10}>
						<TableExpansion onChange={(val) => { this.model.usrlin = val }} rowKey="inr" columns={this.usrlinHeader} dataSource={this.model.usrlin} path="/usrlin" />
					</Col>
				</Row>
				<div style={{ textAlign: "center", marginTop: 12 }}>
					{/* <Button style={{ marginLeft: 10, marginRight: 10 }} type="primary" onClick={this.onAddbut}>
						<Label i18nId="DBITSK_BT000018" />
					</Button>
					<Button style={{ marginLeft: 10, marginRight: 10 }} icon="delete" onClick={this.onDelbut}>
						<Label i18nId="DBITSK_BT000019" />
					</Button> */}


					<Button style={{ marginLeft: 10, marginRight: 10 }} type="primary" onClick={this.onModlin} desp="修改" path="/modlin">
						<Label itext="修改" />
					</Button>
					<Button style={{ marginLeft: 10, marginRight: 10 }} type="primary" icon="save"
						onClick={this.onSavlin} desp="保存" path="/savlin">
						<Label itext="保存" />
					</Button>
					<Button style={{ marginLeft: 10, marginRight: 10 }} type="primary" onClick={this.onExt} desp="exit" path="/ext">
						<Label itext="退出" />
					</Button>
				</div>


			</div>
			// </Card>
		)
	}
}
