import React, { Component, Fragment } from 'react'
import {
	Page, Validator, Notification, FormItem, BottomBtn,
	InputItem, Input, Bind, SelectItem, Button, Label, DatePickerItem, Section, Table, TextArea, ConfirmButton, Steps,AmountLabel
} from '@/components/Common-Library'
import Api from '@/service/api'
import CodeTableFactory from '@/components/CodeTable'
import "./index.less"
import { inject, observer } from 'mobx-react'
import { action, observable } from 'mobx'
import { Row, Col, Popconfirm, Modal,Spin } from 'antd';
import { ButtonModal, ModalTest } from '@/components/Business-Library'
import { Link, withRouter } from 'react-router-dom'
import { height } from 'window-size';
import Business from '@/views/Public/Business'
import { TableExpansion } from '@/components/Business-Library'



const { Pre, Next, StepWrapper } = Steps
const CodeTable = CodeTableFactory.getInstance()
const confirm = Modal.confirm

@withRouter
@inject('UserContext')
@inject('i18n')
@observer
export default class FeeScreen extends Page {
	@observable
  formBlur = false
  
	constructor(props) {
		super(props)
		this.model = props.model
		this.bind = Bind.bind(this)
	}

	async componentWillMount() {
  }
  
	componentWillUnmount() {

	}

	onTabFocus = async () => {
    this.com.wrappedInstance.wrappedInstance.onRecal();
	}

	onTabFocus1 = async () => {
		this.com.wrappedInstance.wrappedInstance.onRecal1();
  }
  
  //选择费用名称的同时自动选择对应的费用代码
  onAfterChange = (row)=>{
    // console.log(row)
    let text = ""
    if(row.feetxt){
      let item = CodeTable.feecod.find(item => item.value == row.feetxt)
      if(item){
        text = item.dsp
      }
    }
    row.feecod = text
  }

	feslstHeader = [
		{
			title: <Label i18nId="TRNDOC_TH004773" />,
			dataIndex: "rol",
			key: "rol",
			width: 60,
			render:(val, row, index)=>{
    			let text = val
    			let em = CodeTable.rol.find(item=>item.value==val)
    			if(em)
    				text= em.label
    			return text
			},
			type: {
				// edit: { type: 'select',code:CodeTable.rol },
				add: { type: 'select',code:CodeTable.rol },
			}
		},
		{
			title: <Label i18nId="SETMOD_TH001606" />,
			dataIndex: "feecod",
			key: "feecod",
      width: 60,
      isDisabled:true,
		},
		{
			title: <Label i18nId="SETMOD_TH001620" />,
			dataIndex: "feetxt",
			key: "feetxt",
      width: 140,
      type: {
				add: { type: 'select',code:CodeTable.feecod },
      },
      onAfterChange:(row)=>this.onAfterChange(row)
		},
		{
			title: <Label i18nId="SETMOD_TH001608" />,
			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
			},
			type: {
				// edit: { type: 'select',code:CodeTable.curtxt },
				add: { type: 'select',code:CodeTable.curtxt },
			}
		},
		{
			title: <Label i18nId="SETMOD_TH001605" />,
			dataIndex: "basamt",
			key: "basamt",
			width: 100,/*
			type: {
				edit: { type: 'input' }
			}*/
			render: (val, row, index) => {
				// let str = (Math.floor(val * 100)) + "";
				// let strindex = str.length - 2;
				// return str.slice(0, strindex) + "." + str.slice(strindex, str.length);
				return <AmountLabel cur={row.cur} amt={val} />
			},
		},
		{
			title: <Label i18nId="SETMOD_TH001609" />,
			dataIndex: "amt",
			key: "amt",
			width: 100,
			// render: (val, row, index) => {
			// 	// let str = (Math.floor(val * 100)) + "";
			// 	// let strindex = str.length - 2;
			// 	// return str.slice(0, strindex) + "." + str.slice(strindex, str.length);
			// 	return <AmountLabel cur={row.cur} amt={val} />
			// },
			type: {
				edit: { type: 'input' }
			}
		},
		{
			title: <Label i18nId="SETMOD_TH001611" />,
			dataIndex: "dsp",
			key: "dsp",
			width: 100,
			render: (val, row, index) => {
				let text = val
				let em = CodeTable.dsp.find(item => item.value == val)
				if (em)
					text = em.label
				return text
			},
			type: {
				edit: { type: 'select',code:CodeTable.dsp },
				add: { type: 'select',code:CodeTable.dsp },
			}
		},
		{
			title: <Label i18nId="SETMOD_TH001610" />,
			dataIndex: "payflg",
			key: "payflg",
			width: 100,
			render: (val, row, index) => {
				let text = val
				let em = CodeTable.payflg.find(item => item.value == val)
				if (em)
					text = em.label
				return text
			},
			type: {
				// edit选项是某些栏位才拥有
				// edit: { type: 'select', code: CodeTable.payflg },
				// add选项是所有栏位都要有
				add: { type: 'select', code: CodeTable.payflg },
			},
		},
	]
	glslstHeader = [
		{
			title: <Label i18nId="SETMOD_TH001613" />,
			dataIndex: "debcdtflg",
			key: "debcdtflg",
			width: 40,
			render: (val, row, index) => {
				let text = val
				let em = CodeTable.debcdtflg.find(item => item.value == val)
				if (em)
					text = em.label
				return text
			}
		},
		{
			title: <Label i18nId="SETMOD_TH001614" />,
			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
			},
			type: {
				// edit: { type: 'select',code:CodeTable.curtxt },
				add: { type: 'select',code:CodeTable.curtxt },
      },
		},
		{
			title: <Label i18nId="SETMOD_TH001615" />,
			dataIndex: "amt",
			key: "amt",
			width: 100,
			render: (val, row, index) => {
				// let str = (Math.floor(val * 100)) + "";
				// let strindex = str.length - 2;
				// return str.slice(0, strindex) + "." + str.slice(strindex, str.length);
				return <AmountLabel cur={row.cur} amt={val} />
			},
		},
		{
			title: <Label i18nId="SETMOD_TH001616" />,
			dataIndex: "dsp",
			key: "dsp",
			width: 100,
			render: (val, row, index) => {
				let text = val
				let em = CodeTable.dsp2.find(item => item.value == val)
				if (em)
					text = em.label
				return text
			}
		},
		{
			title: <Label i18nId="SETMOD_TH001617" />,
			dataIndex: "act",
			key: "act",
      width: 160,
      type:{
        edit: { type: 'input' },
      }
		},
		{
			title: <Label i18nId="SETMOD_TH001612" />,
			dataIndex: "acccur",
			key: "acccur",
			width: 100,
		},
		{
			title: <Label i18nId="SETMOD_TH001618" />,
			dataIndex: "accamt",
			key: "accamt",
			width: 100,
			render: (val, row, index) => {
				// let str = (Math.floor(val * 100)) + "";
				// let strindex = str.length - 2;
				// return str.slice(0, strindex) + "." + str.slice(strindex, str.length);
				return <AmountLabel cur={row.cur} amt={val} />
			},
		},
		{
			title: <Label i18nId="SETMOD_TH001619" />,
			dataIndex: "rat",
			key: "rat",
			width: 100,
		},
	]


	//交易内实现
	renderPage() {
		const bind = this.bind
		const { i18n } = this.props
		if (this.props.flag && this.props.flag == true) {
			return <Spin style={{ width: "100%", justifyContent: "center" }} spinning={this.props.flag} />
		}
		return (
			<div style={{ position: 'relative' }}>
				<Business wrappedComponentRef={ref => (this.com = ref)}  steps={this.props.steps}  extra={this.props.extra} model={this.model} />
				{/* 表格 */}
				<Row>
					<Col>
						<Row>
							<Label i18nId={"SETMOD_LT001603"} />
							<TableExpansion
								pagination={{ pageSize: 10, hideOnSinglePage: true }}
								delete={true}
								onChange={(val) => { this.model.fegmod_feslst = val;this.onTabFocus1() }}
								scroll={{ x: 700 }}
								rowKey="inr"
								columns={this.feslstHeader}
								model={this.model}
								dataSource={this.model.fegmod_feslst || []}

								path="/fegmod_feslst" />

						</Row>
						<br/>
						<br/>
						<Row>
							<Label i18nId={"SETMOD_LT001604"} />
							<TableExpansion pagination={{ pageSize: 10, hideOnSinglePage: true }} 
							  // onChange={(val) => { this.model.glgmod_glslst = val ;this.onTabFocus1()}}
							  onChange={(val) => { this.model.glgmod_glslst = val}}
                rowKey="inr" scroll={{ x: 800 }} 
                columns={this.glslstHeader} 
                dataSource={this.model.glgmod_glslst} />
						</Row>
					</Col>
				</Row>
				<br />
				{/* 底部按钮 */}
        <BottomBtn _this={this} />
			</div >
		)
	}
}