import React,{Component,Fragment} from 'react'
import PropTypes from 'prop-types'
import {Page,Validator,Notification,FormItem,DatePickerItem,TextAreaItem,ConfirmButton,
    InputItem,Input,Bind,SelectItem,Button,Label,Image,Table} from '@/components/Common-Library'
import Api from '@/service/api'
import mElsinf 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, Popconfirm } from 'antd'
import moment from "moment"


const CodeTable = CodeTableFactory.getInstance()


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

    constructor(props)
    {
        super(props)
        this.model = new mElsinf()    
        this.bind = Bind.bind(this)
    }
	
	async componentWillMount() 
	{
		this.onSel()	//进入交易触发自动查询
		//快照模式下，不必开启校验，否则，静默校验，和记录变动
		!this.loadDisplay() && this.model.openMonitor && this.model.openMonitor() //开启校验	
	}
    componentWillUnmount()
    {
        this.model.stopMonitor&&this.model.stopMonitor()//关闭校验
    }

    infgrp_inflstHeader=[
    	{
    		title:<Label itext="发布者" />, 
    		dataIndex:"ownusr",
    		key:"ownusr",
    		width:100,
    		sorter: (r1,r2)=>ColSorter(r1.ownusr,r2.ownusr),
			},
			{
    		title:<Label itext="发布日期" />, 
    		dataIndex:"credattim",
    		key:"credattim",
    		width:100,
				sorter: (r1,r2)=>ColSorter(r1.credattim,r2.credattim),
				render:(val)=>{
          if(val)
          return moment(val).format('YYYY-MM-DD')
        }
    	},
    	{
    		title:<Label itext="公告信息" />, 
    		dataIndex:"infmsg",
    		key:"infmsg",
    		width:100,
    		sorter: (r1,r2)=>ColSorter(r1.infmsg,r2.infmsg),
			},
			{
    		title:<Label itext="操作" />, 
    		dataIndex:"op",
    		key:"op",
				width:30,
				render: (val, row, index) => {
					return (
						<Popconfirm title="确定删除?" onConfirm={() => this.onDel(row.inr)}>
              <span style={{color:"#1890ff",cursor:"pointer"}}>删除</span>
            </Popconfirm>
					)
				}
    	},
    ]


    //按钮事件
    onSav= ()=>{
				this.saving = true  //提交事件触发，提交按钮进入等待状态
        this.formBlur=true  //已触发表单提交处理
        Validator.validate(this.model,this.model.descriptor,async(errors,values)=>{
                if(errors)
                    return 
                const rtnmsg = await Api.post('elsinf/sav',{data:this.model})
                if(rtnmsg.retcod == SUCCESS)
                {
										Notification.success({message:'新公告发布成功!'})
										this.saving = false
                    this.model.infgrp_inflst = rtnmsg.data.infgrp_inflst
										this.model.infmsg = ""
                }
                else
                {
									Notification.error({message:'新公告发布失败!'})
									this.saving = false
                }
                //余下逻辑处理
                    
        })
		}
		
		onDel= async(selinr)=>{
			const rtnmsg = await Api.post('elsinf/del',{ params: {selinr} })
			if(rtnmsg.retcod == SUCCESS)
			{
				Notification.success({message:'删除成功!'})
				this.model.infgrp_inflst = rtnmsg.data.infgrp_inflst
			}
			else{
				Notification.error({message:'服务端请求失败!'})
			}
		}

		onSel= async()=>{
			const rtnmsg = await Api.post('elsinf/sel',{data:this.model})
			if(rtnmsg.retcod == SUCCESS)
			{
				this.model.infgrp_inflst = rtnmsg.data.infgrp_inflst
			}
			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 style={{marginTop:20}}>
							<Col span={24}>
								历史公告
								<Table  
									rowKey="inr"
                  columns={this.infgrp_inflstHeader}
                  dataSource={this.model.infgrp_inflst}
									pagination={{hideOnSinglePage:true}}
									style={{marginTop:15}}
                />
							</Col>
						</Row>

						<Row style={{marginTop:60}}>
							<Col span={12}>
								发布新公告
								<ConfirmButton
                  type="primary"
                  message="确定发布？"
									onOK={this.onSav}
									loading={this.saving}
									style={{ position:'absolute',right:'0',top:'0' }}
                >
                  <Label itext="发布" />
                </ConfirmButton>
							</Col>
						</Row>

						<Row style={{marginTop:20}}>
							<Col span={12}>
								<TextAreaItem InputProps={bind("infmsg")} rows={8} style={{ resize: "none" }} formBlur={this.formBlur}/>
							</Col>
						</Row>

						<Button style={{ position:'absolute',right:'3em',top:'0em' }}  type="primary" size="small" icon="search" onClick={()=>{this.onSel()}}>
            	<Label itext="查询" />
          	</Button>

					</div>
				</Card>
			)
	}
}
