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


const CodeTable = CodeTableFactory.getInstance()


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

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

		this.dataType = {
			WAT: true,
			PEN: true,
			INC: true,
			COR: true,
			DIA: true,
			BAT: true,
			THD: true,
		}
	}

	componentWillUnmount() {
	}

	@observable
	dataSource = []
	onSelectDataSource = (type, value) => {
		this.formBlur = true  //已触发表单提交处理
		this.model.offp_todotyp = "ALL";
		Validator.validate(this.model, this.model.descriptor, async (errors, values) => {
			if (errors)
				return
			const rtnmsg = await Api.post('office/offp_todo', { data: this.model })
			if (rtnmsg.retcod == SUCCESS) {
				// Notification.success({ message: '数据提交成功!' })
				this.model.offp_todolst = rtnmsg.data.offp_todolst;
			}
			else {
				Notification.error({ message: '服务端请求失败!' })
			}
			//余下逻辑处理
			// this.dataSource = [];
			let templist = []
			this.dataType[type] = value;
			// 遍历数组
			for (let item of this.model.offp_todolst) {
				// 属性名
				let temp = item.typ;
				// 如果属性名在dataTy中是为真就添加到dataSource进行显示
				if (this.dataType[temp] == true) {
					// this.dataSource.push(item);
					templist.push(item);
				}
			}
			this.dataSource = templist;
		})


	}



	offp_todolstHeader = [
		{
			title: <Label i18nId="OFFP_TH000048" />,
			dsp: `操作类型`,
			dataIndex: "typ",
			key: "typ",
      width: 80,
			render: (val, row, index) => {
				let text = val
				let em = CodeTable.oratyp.find(item => item.value == val)
				if (em)
					text = em.label
				return text
			}
		},
		{
			title: <Label i18nId="交易名称" />,
			dsp: `交易名称`,
			dataIndex: "inifrm",
			key: "inifrm",
      width: 100,
      render:(val)=>{
        let str = val.slice(7);
        return str
      }
		},
		{
			title: <Label i18nId="OFFP_TH000050" />,
			dsp: `业务编号`,
			dataIndex: "ownref",
			key: "ownref",
      width: 80,
		},
		{
			title: <Label i18nId="OFFP_TH000051" />,
			dsp: `概要描述`,
			dataIndex: "nam",
			key: "nam",
      width: 240,
		},
		{
			title: <Label i18nId="OFFP_TH000052" />,
			dsp: `经办柜员`,
			dataIndex: "usr",
			key: "usr",
      width: 70,
		},
		{
			title: <Label i18nId="OFFP_TH000053" />,
			dsp: `币种`,
			dataIndex: "cur",
			key: "cur",
      width: 50,
		},
		{
			title: <Label i18nId="OFFP_TH000054" />,
			dsp: `金额`,
			dataIndex: "amt",
			key: "amt",
      width: 80,
			render: (val, row, index) => {
				return <AmountLabel cur={row.cur} amt={val} />
			},
    },
	]
	offp_xrtlstHeader = [
		{
			title: <Label itext="币种" />,
			dataIndex: "cur",
			key: "cur",
			width: 100,
			//sorter: (r1,r2)=>ColSorter(r1.cur,r2.cur),
			// 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 itext="买入价" />,
			dataIndex: "buyrat",
			key: "buyrat",
			width: 100,
			//sorter: (r1,r2)=>ColSorter(r1.buyrat,r2.buyrat),
		},
		{
			title: <Label itext="中间价" />,
			dataIndex: "midrat",
			key: "midrat",
			width: 100,
			//sorter: (r1,r2)=>ColSorter(r1.midrat,r2.midrat),
		},
		{
			title: <Label itext="卖出价" />,
			dataIndex: "selrat",
			key: "selrat",
			width: 100,
			//sorter: (r1,r2)=>ColSorter(r1.selrat,r2.selrat),
		},
	]

	offp_iralstHeader = [
		{
			title: <Label itext="币种" />,
			dataIndex: "cur",
			key: "cur",
			width: 100,
			// sorter: (r1,r2)=>ColSorter(r1.cur,r2.cur),
		},
		{
			title: <Label itext="类型" />,
			dataIndex: "iratyp",
			key: "iratyp",
			width: 100,
			// sorter: (r1,r2)=>ColSorter(r1.iratyp,r2.iratyp),
		},
		{
			title: <Label itext="期限" />,
			dataIndex: "due",
			key: "due",
			width: 100,
			// sorter: (r1,r2)=>ColSorter(r1.due,r2.due),
		},
		{
			title: <Label itext="利率" />,
			dataIndex: "basrat",
			key: "basrat",
			width: 100,
			// sorter: (r1,r2)=>ColSorter(r1.basrat,r2.basrat),
		},
	]

	//当前系统状态码表
	syssta = [
		{ label: "营业准备", value: "CLSD" },
		{ label: "日间", value: "ACTV" },
		{ label: "业务截止", value: "SUSP" },
		{ label: "日终处理", value: "CLSG" },
	]

	//线上清算开关码表
	onlnst = [
		{ label: "开启", value: "ENBL" },
		{ label: "关闭", value: "DSBL" },
	]

	//机构登陆状态码表
	logtyp = [
		{ label: "登录", value: "LGDD" },
		{ label: "退出", value: "LGDU" },
		{ label: "禁止登录", value: "LGDN" },
	]

	async componentWillMount() {
		const rtnmsg = await Api.post('office/init', { data: {} })
		if (rtnmsg.retcod == SUCCESS) {
			this.model.inf_infmsg = rtnmsg.data.inf_infmsg;
			Object.assign(this.model, rtnmsg.data)
			this.props.UserContext.bchnam = this.model.bch_namcn
			this.props.UserContext.usrnam = this.model.usr_dspnam

			let bchsta_loginsta = [{ label: "", value: "" },]
			if(this.model.syssta_sysdat){
				let syssta_sysdat = moment(this.model.syssta_sysdat).format('YYYY-MM-DD')
				this.props.UserContext.syssta_sysdat = syssta_sysdat		//当前系统日期
			}

			if(this.model.bchsta_loginsta!==null){
				let bchsta_loginsta = this.logtyp.find(item=>item.value==this.model.bchsta_loginsta)
				//this.props.UserContext.bchsta_loginsta = bchsta_loginsta.label		//机构登陆状态
			}
			else
			{
				this.props.UserContext.bchsta_loginsta =null
			}

			if(this.model.syssta_online){
				let syssta_online = this.onlnst.find(item=>item.value==this.model.syssta_online)
				this.props.UserContext.syssta_online = syssta_online.label		//线上清算开关
			}

			if(this.model.syssta_syssta){
				let syssta_syssta = this.syssta.find(item=>item.value==this.model.syssta_syssta)
				this.props.UserContext.syssta_syssta = syssta_syssta.label		//当前系统状态
			}
		}
		else {
			Notification.error({ message: '服务端请求失败!' })
		}
		this.onSelectDataSource();
		//	const res = await ApiMock.getdata('/apiTest/lvaHomelistdata')
		//	console.log(res)
	}

  toDoEvent = async(row)=>{
	  let objtyp =row.objtyp
	  let objinr =row.objinr
	const rtnmsg = await Api.post('office/sysmod_isnext',{params:{objtyp,objinr}})
	if (rtnmsg.retcod == SUCCESS&&rtnmsg.retmsg=='success') 
	{
    let pathname = row.inifrm.slice(0,6)
    switch (row.objtyp){
      case 'spt':
        this.props.history.push({ pathname, query: { sptinr: row.objinr, from: "sptsel" } })
        break
      case 'trn':
        this.props.history.push({ pathname:'trndet', state: { 'trninr': row.objinr } })
        break
      case 'dia':
        this.props.history.push({ pathname, query: { diainr: row.objinr } })
        break
	}
   }
   else{
	Notification.error({ message: rtnmsg.retmsg }) 
   }
  }

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

		return (

			<Row className="height100">
				{/* 主页右侧公告栏 */}

				<Col span={19} className="height100">
					<Card title="待办事项" size="small" className="transTitle">
					{this.model.usr_etyextkey!=='ELCS'?
						<Row className="row">
							<Col span={3}>
								<CheckboxItem defaultChecked={true} InputProps={bind("offp_todotyp")} onChange={(value) => { this.onSelectDataSource("WAT", value) }}>待复核</CheckboxItem>
							</Col>
							<Col span={3}>
								<CheckboxItem defaultChecked={true} InputProps={bind("offp_todotyp")} onChange={(value) => this.onSelectDataSource("PEN", value)}>暂存</CheckboxItem>
							</Col>
							<Col span={3} >
								<CheckboxItem defaultChecked={true} InputProps={bind("offp_todotyp")} onChange={(value) => this.onSelectDataSource("INC", value)}>来报</CheckboxItem>
							</Col>
							<Col span={3}>
								<CheckboxItem defaultChecked={true} InputProps={bind("offp_todotyp")} onChange={(value) => this.onSelectDataSource("COR", value)}>退回</CheckboxItem>
							</Col>
							<Col span={3}>
								<CheckboxItem defaultChecked={true} InputProps={bind("offp_todotyp")} onChange={(value) => this.onSelectDataSource("DIA", value)}>备忘录</CheckboxItem>
							</Col>
						</Row>:null}
						<Col>
              <Table rowKey="inr"
                pagination={{ pageSize: 20, hideOnSinglePage: true }}  
                columns={this.offp_todolstHeader} 
                dataSource={this.dataSource} 
                onRow={row=>({
                  onDoubleClick:()=>this.toDoEvent(row)
                })}
              />
						</Col>
					</Card>
				</Col>


				<Col span={5} style={{ backgroundColor: 'transparent', display: 'flex', flexDirection: 'column' }} className="height100">
					
					<Card style={{ marginLeft: '5px', marginRight: '5px' }} title="人行公告栏" justify="center" size="small" className="transTitle gonggaolan firstCard" >
					{/* extra={<a href="#">More</a>} */}
						<div style={{ height: '10em', overflowY: 'auto', padding: '5px 16px', textIndent: '2em' }}>
							<Section className="BulletinBoard" {...bind("inf_infmsg")}  ></Section>
						</div>
						<div style={{ backgroundColor: '#fff', opacity: '0.7', position: 'absolute', bottom: 0, height: '1.9em', width: '100%' }}></div>
					</Card>

					<Card style={{ marginLeft: '5px', marginRight: '5px', marginTop: '5px' }} title="本机构公告栏" justify="center" size="small" className="transTitle gonggaolan firstCard">
						<div style={{ height: '10em', overflowY: 'auto', padding: '5px 16px', textIndent: '2em' }}>
							<Section className="BulletinBoard" {...bind("infbch_infmsg")}  ></Section>
						</div>
						<div style={{ backgroundColor: '#fff', opacity: '0.7', position: 'absolute', bottom: 0, height: '1.9em', width: '100%' }}></div>
					</Card>

				</Col>
			</Row>
		)
	}
}
