// 角色管理
import React from 'react';
import { Row, Col, Table, Input, Button, message, Popconfirm, Tabs, Spin } from 'antd';
import store from '../../store';
import { $http } from '../../containers/config/https';
// 基本信息组件
import AddInvoiceMaintenance from './AddInvoiceMaintenance.jsx';
import InvTypeRelatedPersonTypeMenu from './InvTypeRelatedPersonTypeMenu.jsx';
import InvTypeRelatedPerson from './InvTypeRelatedPerson.jsx';
const TabPane = Tabs.TabPane;

  
export default class InvoiceMaintenance extends React.Component {
	constructor() {
		super();
		this.state = {
			visible: false,
			// 列表数据
			data: [],
			// 选中的行数据
			rowData: [],
			userInfo: {},
			flag: '',
			title: '1新增发票信息',
			// tab页签
			key: '1',
			// 选中行ID
			rowId: '',
			//发票代码
			code: '',
            // 发票描述
			describe: '',
			//是否选中了第2部的数据
			RelatedFlag:1,
			invTypeRlatedPersonTypeID:'',
            // 主菜单分页数据
            total: 0,
            page: 1,
            pageSize: 15,
			// 赋值数据给授权页面
			authorizationId: '',
			// 是否显示loading
			showLoading: true,
			// 左侧表格loading
			loading: true
		};
		this.columns = [
            {
                title: '发票类型ID',
                dataIndex: 'ID',
                width: 150,
                align: "center"
            },
            {
                title: '代码',
                dataIndex: 'Code',
                width: 60,
                align: "center"
            },
            {
                title: '发票类型描述',
                dataIndex: 'Descripts',
                width: 200,
                align: "center"
            },
            {
                title: '打印模板',
                dataIndex: 'PrintTemplet',
                width: 200,
                align: "center"
            },
            {
                title: '生效日期',
                dataIndex: 'StartDate',
                width: 200,
                align: "center"
            },
            {
                title: '失效日期',
                dataIndex: 'StopDate',
                width: 200,
                align: "center"
            },
            {
                title: '更新人',
                dataIndex: 'CreateUserName',
                width: 200,
                align: "center"
            },
            {
                title: '创建日期',
                dataIndex: 'CreateDate',
                width: 200,
                align: "center"
            },
            {
                title: '是否走号',
                dataIndex: 'IfAssignInvNo',
                width: 200,
                align: "center"
            },
            {
                title: '是否打印',
                dataIndex: 'IfPrint',
                width: 200,
                align: "center"
            },
        ];
    }
	// 设置为新增基本信息
	handleSetTitle = () => {
		this.setState({title: '1新增发票信息', rowData: []})
	}
	//获取查询框的值
	onChangeInvCode=(e)=>{
		this.setState({
			code:e.target.value

		})

	}
	onChangeInvDesc=(e)=>{
		this.setState({
			describe:e.target.value

		})

	}
	// 查询
    handleQuery = () => {
        let {code, describe, page, pageSize} = this.state;
        let data = {}
        if (code || describe) {
            data = {
                params: [{
                    code: code,
                    descripts: describe
                }],
                pagination:[{
                    pageSize: 10,
                    currentPage: 1,
                    sortColumn: "Code",
                    sortOrder: "asc"
                }]
            }
        } else {
            data = {
                params: [{
                    code: code,
                    descripts: describe
                }],
                pagination:[{
                    pageSize: pageSize,
                    currentPage: page,
                    sortColumn: "Code",
                    sortOrder: "asc"
                }]
            }
        }
        $http.post('urlS', this, {
          code: '5001',
          data: data,
          success: function (res) {
            if (+res.errorCode === 0 && res.invType) {
              for(var i = 0; i < res.invType.length; i++) {
                res.invType[i].key = i;
              }
              this.setState({data: res.invType, total: res.invType.length, loading:false})
            } else {
                setTimeout(() => {
                    this.setState({data: [], total: 0, loading: false})
                }, 3000)
            }
          }
        })
    }
  
	// 调用子组件的连接事件
	onRef = (ref) => {
		this.child = ref
	}

	// 复制
	handleAdd = () => {
		if (this.state.rowData.length >= 1) {
			this.child.resetFields()
			this.setState({userInfo: this.state.rowData[0], flag: 'add', title: '1新增发票信息', rowId: '', rowData: [], key: '1'})
		} else {
			message.info('请选择需要操作的数据');
		}
	}

	// 编辑
	handleCompile = () => {
		if (this.state.rowData.length >= 1) {
			this.child.resetFields();
			this.setState({userInfo: this.state.rowData[0], flag: 'compile', title: '1编辑发票信息', key: '1'});
		} else {
			message.info('请选择需要操作的数据');
		}
	}

	// 重置userInfo
	resetUserInfo() {
		this.setState({userInfo: {}})
	}

	// 删除
	handleDelete = () => {
		if (this.state.rowData.length >= 1) {
			let data = {
				params: [{
					id: this.state.rowData[0].ID,
                    updateUserDr:this.state.rowData[0].CreateUserName
				}]
			}
			$http.post('urlADS', this, {
					code: '5004',
					data: data,
					success: function (res) { 
						if (+res.errorCode === 0) {
							message.success('删除成功');
							// 刷新列表数据
							this.handleQuery();
							// 重置表单
							this.resetUserInfo();
							this.handleSetTitle()
						}
					}
			})
		} else {
			message.info('请选择需要操作的数据');
		}
	}


     



	// 点击切换tabs的回调
	callback = (activeKey) => {
		// 当点击切换为菜单授权必须选中一条数据
		if (+activeKey === 2) {
			if (this.state.rowData.length >= 1) {
				this.setState({key: '2'})
			} else {
				message.info('请选择需要操作的第1步数据');
			}
			
		} else if(+activeKey === 3) {
			if (this.state.invTypeRlatedPersonTypeID!= "") {
				this.setState({key: '3'})
			} else {
				message.info('请选择需要操作的第2步数据');
			}
		}else {
			this.setState({key: activeKey})
		}
		
		
	}

	// 获取子组件属性
	getBackData= (relatedID) => {
		console.log("relatedID"+relatedID);
		this.setState({invTypeRlatedPersonTypeID: relatedID});
	}

	// 设置行属性
	onClickRow = (record) => {
		return {
			// 单击行选中
			
			onClick: () => {
				
				if (this.state.rowId === '') {
					// 保存行数据以及ID
					this.setState({rowData: [record],rowId: record.ID})
				} else {
					this.setState({rowData: [record],rowId: record.ID})
					
				}

			},
			// 双击行编辑
			onDoubleClick: () => {
				this.dblclickRowCompile(record)
			},
		}
	}

	// 双击行编辑
	dblclickRowCompile = (record) => {
		console.log(2222);
		console.log(record);
		setTimeout(() => {
			this.child.resetFields()
			this.setState({
				userInfo: record,
				flag: 'compile',
				rowId: record.ID,
				rowData: [record],
				title: '1编辑发票信息',
				authorizationId: record.ID
			})
		}, 0)
	}

	// 表格行的类名
	setRowClassName = (record) => {
        return record.ID === this.state.rowId ? 'clickRowStyle' : '';
	}
	
	componentDidMount() {
		this.handleQuery();
		// 数据异步请求，请求成功之后setState
		this.setState({
			showLoading: false
		})
	}

	render() {
		let rightWidth = document.getElementById('content-row') ? document.getElementById('content-row').clientWidth - 24*2 - 500 - 54 + 'px' : '';
		return (
			<Spin tip="加载中..." spinning={this.state.showLoading}>
				<div style={{ padding: 24 }} id="content-row">
					<Row>
						<Col style={{width: '480px', float: 'left'}}>
							<Row style={{height: 102}}>
								<Col style={{height: '50%', borderBottom: '1px solid #e8e8e8'}}>
									<Row style={{height: '100%', lineHeight: '51px', borderRight: '1px solid #e8e8e8',}}>
									    发票类型代码：<Input placeholder="请输入"  value={this.state.code} style={{width: '100px'}} onChange={this.onChangeInvCode} />
										发票类型名称：<Input placeholder="请输入"  value={this.state.describe}  style={{width: '100px'}} onChange={this.onChangeInvDesc}/>
										<Button size="small" type="primary" onClick={this.handleQuery} style={{marginLeft: '10px'}}>查询</Button>
									</Row>
								</Col>
								<Col style={{height: '50%'}}>
									<Row style={{height: '100%', lineHeight: '51px', borderRight: '1px solid #e8e8e8' }}>
										<Button size="small" type="ghost" onClick={this.handleAdd} style={{marginRight: '10px'}}>复制</Button>
										<Button size="small" type="dashed" onClick={this.handleCompile} style={{marginRight: '10px'}}>编辑</Button>
										<Popconfirm title="删除不可恢复，你确定要删除吗?" onConfirm={this.handleDelete} >
											<Button size="small" type="danger" style={{marginRight: '10px'}}>删除</Button>
										</Popconfirm>
									</Row>
								</Col>
							</Row>
							<Row>
								<Col>
									<Table
										rowClassName={this.setRowClassName}
										onRow={this.onClickRow}
										pagination={false}
										columns={this.columns}
										dataSource={this.state.data}
										scroll={{ x: 1300, y: store.getState().tableHeight.y + 40 }}
										bordered
										loading={this.state.loading}
									/>
								</Col>
							</Row>
						</Col>
						<Col style={{width: rightWidth, float: 'left', marginLeft: '20px'}}>
							<Tabs activeKey={this.state.key} onChange={this.callback} type="card">
								<TabPane tab={this.state.title} key="1" style={{padding: '24px', height: store.getState().tableHeight.y + 130, overflow: 'auto'}}>
									<AddInvoiceMaintenance userInfo={this.state.userInfo} onRef={this.onRef} handelThis={this} flag={this.state.flag} />
								</TabPane>
								<TabPane forceRender tab="2发票类型和人员类型对照" key="2" style={{height: store.getState().tableHeight.y + 130, overflow: 'auto'}}>
									<InvTypeRelatedPersonTypeMenu invoiceTypeID={this.state.rowId} rowData={this.state.rowData} handelThis={this}/>
								</TabPane>
								<TabPane tab="3人员和发票类型关联" key="3" style={{height: store.getState().tableHeight.y + 1530, overflow: 'auto'}}>
								<InvTypeRelatedPerson roleId={this.state.rowId} rowData={this.state.rowData} handelThis={this}/>
								</TabPane>
							</Tabs>
						</Col>
					</Row>
				</div>
			</Spin>
		)
	}
}