/**
 * 审核按钮封装
 * 徐立
 * 2020-3-28
 * data 为 'affair/getIdFormDetail' 接口请求到的数据
 * callback 提交完成后执行回调函数
 * form form表单控件
 */
import React, { useState } from 'react';
import { preHandle } from '@/webPublic/one_stop_public/utils/myutils';
import { connect } from 'dva';
import Btn from './pagesBtn';
import styles from './styles.less';
import ModalDiy from '@/baseComponent/ModalDiy';

function AuditButton(props) {
	const [visible, setVisible] = useState(false);
	const [modalContent, setModalContent] = useState('');
	const [isSubmitLoading, setSubmitLoading] = useState(false);
	const [affairOkParams, setAffairParams] = useState({});

	function affairOk() {
		// 有taskIds属性时，是批量审核，
		const { dispatch, callback, data, form, taskIds } = props;
		const { oldKey, btnValue } = affairOkParams;

		form.validateFieldsAndScroll((err, values) => {
			if (err) return;
			setSubmitLoading(true);
			preHandle(values);
			dispatch({
				type: 'affair/getExamineProcess',
				payload: {
					taskIds: taskIds || [data.taskId], // 接口里面的taskId 任务Id
					code: taskIds ? undefined : data.code,
					// 审核相关内容
					examineMap: JSON.stringify({
						[oldKey]: btnValue, // 每个配置按钮对应的对象内容 oldkey = 接口中 key btnValue = 接口中 value
						// reason: value, // 审批理由
						code: taskIds ? undefined : data.code,
					}),
					taskForm: JSON.stringify(values), // 审批表单的参数值
				},
				callback: (val) => {
					setSubmitLoading(false);
					setVisible(false);
					if (callback) {
						callback(val);
					}
				},
			});
		});
	}

	function hideModal() {
		setVisible(false);
	}

	/**
	 * 根据不同值,返回对应样式
	 */
	function getStyle(key, value) {
		if (key === 'examine') {
			switch (value) {
				case 1:
					return [`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_reject}`].join(' ');
				case 2:
					return [`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_no}`].join(' ');
				case 0:
					return 'deafalut';
				case '1':
					return [`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_reject}`].join(' ');
				case '2':
					return [`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_no}`].join(' ');
				case '0':
					return 'deafalut';
				default:
					return 'deafalut';
			}
		} else {
			return 'deafalut';
		}
	}

	function showModal(str, key, value) {
		setModalContent(`确定${str}吗？`);
		setAffairParams({ oldKey: key, btnValue: value });
		setVisible(true);
	}

	const {
		data: { isHandle, btns },
	} = props;
	if (!isHandle || !Array.isArray(btns) || btns.length < 1) return null;
	return (
		<>
			<div className={styles.btn_page}>
				{btns.map((item) => (
					<Btn
						get="8"
						key={item.value}
						btnOne={() => {
							showModal(item.name, item.key, item.value);
						}}
						text={item.name}
						style={getStyle(item.key, item.value)}
					/>
				))}
			</div>
			<ModalDiy
				visible={visible}
				title="提示"
				handleCancel={hideModal}
				handleOk={affairOk}
				confirmLoading={isSubmitLoading}>
				<div style={{ fontSize: 16, textAlign: 'center', height: 150, lineHeight: '150px' }}>
					{modalContent}
				</div>
			</ModalDiy>
		</>
	);
}

export default connect()(AuditButton);
