import React, { useState, useEffect } from 'react';
import {
	PageHeader,
	Table,
	Button,
	Drawer,
	Descriptions,
	Space,
	Modal,
	Form,
	Radio,
	message,
} from 'antd';
import { useAccessControllerList } from '../../hooks/accessController';
import { ColumnProps } from 'antd/lib/table';
import { usPutDevice } from '../../hooks/device';

export { ColumnProps } from 'antd/lib/table';

const STATUS_CONFIG = {
	0: '待确认',
	1: '通过',
	2: '不通过',
};
const STATE_CONFIG = {
	0: '离线',
	1: '在线',
};
const colums: ColumnProps<any>[] = [
	{
		title: '供应商',
		dataIndex: 'provider_name',
		key: 'provider_name',
	},
	{
		title: '设备名',
		dataIndex: 'name',
		key: 'name',
	},
	{
		title: '批次',
		dataIndex: 'batch',
		key: 'batch',
	},
	{
		title: '设备唯一编码',
		dataIndex: 'sn',
		key: 'sn',
	},
	{
		title: '状态',
		dataIndex: 'state',
		key: 'state',
		render: (state) => (!!state ? '在线' : '离线'),
	},
	{
		title: '确认状态',
		dataIndex: 'status',
		key: 'status',
		render: (status) => STATUS_CONFIG[status],
	},
];
const DETAILE_CONGIGS = [
	{
		title: '设备信息',
		infos: [
			{ label: '设备名', dataKey: 'name' },
			{ label: '申请时间', dataKey: 'created_time' },
			{ label: '生产批次', dataKey: 'batch' },
			{ label: '生产厂商', dataKey: 'manufacturer' },
			{ label: '设备型号', dataKey: 'model' },
			{ label: '联系人', dataKey: 'person' },
			{ label: '联系电话', dataKey: 'phone' },
			{ label: '供应商名', dataKey: 'provider_name' },
			{
				label: '设备状态',
				dataKey: 'state',
				render: (state) => STATE_CONFIG[state],
			},
			{ label: '设备类型编码', dataKey: 'type_code' },
			{ label: '设备类型名称', dataKey: 'type_name' },
			{ label: '设备唯一编码', dataKey: 'sn' },
			{ label: '供应商社会信用码', dataKey: 'social_code' },
			{ label: '对接单位', dataKey: 'unit' },
			{ label: '实名制设备类型', dataKey: 'kind' },
			{ label: '实名制设备类别', dataKey: 'sub_kind' },
			{ label: '项目名', dataKey: 'project_name' },
			{ label: '项目安检备案号', dataKey: 'safety_record_no' },
		],
	},
	{
		title: '审批信息',
		infos: [
			{ label: '审批时间', dataKey: 'approve_time' },
			{
				label: '审核状态',
				dataKey: 'status',
				render: (status) => STATUS_CONFIG[status],
			},
		],
	},
];

const accessController: React.FC = () => {
	const [form] = Form.useForm();
	const [searchState, changeSearchState] = useState({ page: 1 });
	const [modalState, changeModalState] = useState<{
		visible: boolean;
		values?: any;
	}>({
		visible: false,
	});
	const [detailModalState, changedetailModalState] = useState<{
		visible: boolean;
		values?: any;
	}>({
		visible: false,
	});
	const { state: listState, request: requestList } = useAccessControllerList();
	const { state: putState, request: requestPut } = usPutDevice();
	useEffect(() => {
		requestList(searchState);
	}, [searchState]);
	const tableColums = colums.concat({
		title: '操作',
		render: (record) => {
			return (
				<Space>
					<Button
						disabled={record.status !== 0}
						onClick={() => changeModalState({ visible: true, values: record })}>
						审批
					</Button>
					<Button
						type='primary'
						onClick={() => {
							changedetailModalState({ visible: true, values: record });
						}}>
						详情
					</Button>
				</Space>
			);
		},
	});
	const handlePostOk = async () => {
		const data: any = await form.validateFields();
		requestPut({
			...data,
			id: modalState.values?.id,
			device_code: modalState.values?.type_code,
		})
			.then(() => {
				message.success('审批成功');
				form.resetFields();
				changeModalState({
					visible: false,
				});
				requestList(searchState);
			})
			.catch((error) => {
				message.error(error.message);
			});
	};
	const drawerProps = {
		visible: detailModalState.visible,
		title: '详情',
		width: 800,
		column: {
			xs: 2,
			xxl: 2,
		},
	};
	return (
		<div>
			<PageHeader title='实名制'></PageHeader>
			<Table
				columns={tableColums}
				loading={listState.loading}
				dataSource={listState.dataSource}
				pagination={{
					current: listState.page,
					total: listState.total,
					hideOnSinglePage: true,
					showQuickJumper: false,
					showLessItems: false,
					onChange: (page) =>
						changeSearchState((preState) => ({ ...preState, page })),
				}}></Table>
			{detailModalState.values &&
			Object.keys(detailModalState.values).length ? (
				<Drawer
					{...drawerProps}
					onClose={() => {
						changedetailModalState({ visible: false });
					}}>
					{DETAILE_CONGIGS.map((item) => {
						return (
							<Descriptions title={item.title}>
								{item.infos.map((element) => {
									return (
										<Descriptions.Item label={element.label}>
											{element.render
												? element.render(
														detailModalState.values[element.dataKey]
												  )
												: detailModalState.values[element.dataKey]}
										</Descriptions.Item>
									);
								})}
							</Descriptions>
						);
					})}
				</Drawer>
			) : null}
			<Modal
				title='审批'
				visible={modalState.visible}
				onOk={handlePostOk}
				onCancel={() => {
					form.resetFields();
					changeModalState({ visible: false });
				}}>
				<Form form={form}>
					<Form.Item
						name='status'
						label='确认是否为当前项目设备：'
						required
						rules={[
							{
								required: true,
								message: '请确认设备状态',
							},
						]}>
						<Radio.Group>
							<Radio value={true}>是</Radio>
							<Radio value={false}>否</Radio>
						</Radio.Group>
					</Form.Item>
				</Form>
			</Modal>
		</div>
	);
};
export default accessController;
