/**
 * 徐立
 * 2019年9月30日
 * 三次封装用户通过,拒绝状态
 * affairOk 需要外部传入,进行请求相关
 */
import React, { Component } from 'react';
import Btn from '../pagesBtn';
import MyModal from '../Modal';
import styles from './styles.less';
import { Input, Row, Col, Modal } from 'antd';
const { TextArea } = Input;
export default class userButton extends Component {
	constructor() {
		super();
		this.state = {
			// 路由位置
			visibleOk: false, // 通过模态框状态
			value: '', // 文本域输入
			user: '', // 用于保存用户点击了对应按钮
			returnText: '', //
		};
	}
	/**
	 * 通过按钮点击事件
	 */
	showModal = (str) => {
		switch (str) {
			case '通过':
				this.setState({
					returnText: '已通过该申请！',
				});
				break;
			case '驳回':
				this.setState({
					returnText: '已驳回该申请！',
				});
				break;
		}
		this.setState({
			user: str,
			visibleOk: true,
		});
	};
	/**
	 * 审核状态,返回对应样式html
	 */
	getUser = () => {
		let { user } = this.state;
		switch (user) {
			case '通过':
				return <span style={{ color: '#31C93F' }}>{user}</span>;
			case '驳回':
				return <span style={{ color: '#FF9B00' }}>{user}</span>;
		}
	};
	/**
	 * 通过按钮模态框取消状态
	 */
	handleCancelOk = () => {
		this.setState({
			visibleOk: false,
		});
	};
	/**
	 * 文本域同步
	 */
	onChange = ({ target: { value } }) => {
		this.setState({ value });
	};
	render() {
		let { btnList, visibleOk, value, user, returnText } = this.state;
		let { affairOk } = this.props;
		return (
			<>
				<Btn
					get="5"
					btnOne={() => {
						this.showModal('驳回');
					}}
					btnTwo={() => {
						this.showModal('通过');
					}}
				/>
				<MyModal
					visible={visibleOk}
					title="通过审批"
					width={600}
					handleCancel={this.handleCancelOk}>
					<div className={styles.is_ok}>
						<p className={styles.header}>
							<span>审批结果</span>
							{this.getUser()}
						</p>
						<div className={styles.body}>
							<span>审批说明</span>
							<span>
								<TextArea
									value={value}
									onChange={this.onChange}
									placeholder="请输入审批理由"
									style={{ width: 380, height: 120, color: '#7F8B95' }}
								/>
							</span>
						</div>
						<div>
							<Btn
								get="4"
								btnOne={this.handleCancelOk}
								btnTwo={() => {
									affairOk(user, returnText, value);
								}}
							/>
						</div>
					</div>
				</MyModal>
			</>
		);
	}
}