import { StatusTag } from '../vehicle-management/components/StatusTag';

var DEPT_ROLE_OPTIONS = [
	{ value: 'biz', label: '客户服务组（全量）' },
	{ value: 'energy', label: '能源组' },
	{ value: 'ops', label: '运维部' },
	{ value: 'safety', label: '安全部' }
];

var DEPT_SECTIONS = [
	{ key: 'customer', title: '客户服务', role: 'biz' },
	{ key: 'energy', title: '能源组', role: 'energy' },
	{ key: 'ops', title: '运维组', role: 'ops' },
	{ key: 'safety', title: '安全组', role: 'safety' }
];

function readDeptRole() {
	try {
		var role = new URLSearchParams(window.location.search).get('dept') || 'biz';
		if (['biz', 'energy', 'ops', 'safety'].indexOf(role) >= 0) return role;
	} catch (e) { /* noop */ }
	return 'biz';
}

function writeDeptRole(role) {
	try {
		var url = new URL(window.location.href);
		url.searchParams.set('dept', role);
		window.history.replaceState({}, '', url.toString());
	} catch (e) { /* noop */ }
}

function approvalTone(status) {
	switch (status) {
		case '审批完成': return 'green';
		case '审批中': return 'blue';
		case '待提交': return 'amber';
		case '审批驳回': return 'red';
		default: return 'gray';
	}
}

function fmtMoney(v) {
	var n = typeof v === 'number' ? v : parseFloat(v);
	if (isNaN(n)) return '0.00';
	return n.toFixed(2);
}

function fmtYMDHM(v) {
	if (!v) return '—';
	var s = String(v).trim();
	if (/^\d{4}-\d{2}-\d{2}\s+\d{2}:\d{2}/.test(s)) return s.slice(0, 16);
	if (/^\d{4}-\d{2}-\d{2}$/.test(s)) return s + ' 00:00';
	return s;
}

function buildVehicleFromRow(row) {
	var r = row || {};
	return {
		key: 'v1',
		plateNo: r.plateNo || '粤AGP3628',
		contractCode: r.contractCode || 'LNZLHT2025082502',
		projectName: r.projectName || '荣达餐饮试-租赁帕力安4.5T',
		customerName: r.customerName || '荣达餐饮(广东)集团有限公司',
		deliveryTime: r.deliveryTime || '2025-08-26 15:56',
		returnTime: r.returnTime || '2026-07-09 09:38',
		deliveryMileage: '368.00',
		returnMileage: '25326.00',
		fragileInsurance: '否',
		tireInsurance: '否',
		maintenanceInsurance: '否'
	};
}

function buildDeptData() {
	return {
		customer: {
			total: '1005.00',
			submitter: '何苗苗',
			status: '审批中',
			rows: [
				{ key: 'c1', seq: 1, feeItem: 'ETC-客户未缴费用', amount: '0.00', remark: '', updatedAt: '2026-07-09 10:06:50' },
				{ key: 'c2', seq: 2, feeItem: 'ETC卡缺损费', amount: '0.00', remark: '', updatedAt: '2026-07-09 10:06:50' },
				{ key: 'c3', seq: 3, feeItem: 'ETC设备缺损费', amount: '0.00', remark: '', updatedAt: '2026-07-09 10:06:50' },
				{ key: 'c4', seq: 4, feeItem: '租金', amount: '1005.00', remark: '', updatedAt: '2026-07-09 10:06:50' }
			]
		},
		energy: {
			total: '34.94',
			submitter: '许诗琪',
			status: '待提交',
			fields: [
				{ label: '氢量差补缴金额', value: '34.94' },
				{ label: '交车氢量', value: '—' },
				{ label: '还车氢量', value: '—' },
				{ label: '退还车氢气单价', value: '—' },
				{ label: '能源账户退费金额', value: '0.00' }
			],
			prepayBalance: '13523.20'
		},
		ops: {
			total: '2173.40',
			submitter: '邱陈佳',
			status: '待提交',
			rows: [
				{ key: 'o1', seq: 1, feeItem: '清洗费', amount: '0.00', discount: '—', updatedAt: '2026-07-09 10:04:40' },
				{ key: 'o2', seq: 2, feeItem: '未结算保养', amount: '372.50', discount: '0.00', updatedAt: '2026-07-09 10:04:40' },
				{ key: 'o3', seq: 3, feeItem: '未结算维修', amount: '0.00', discount: '0.00', updatedAt: '2026-07-09 10:04:40' },
				{ key: 'o4', seq: 4, feeItem: '车损费用', amount: '0.00', discount: '—', updatedAt: '2026-07-09 10:04:40' },
				{ key: 'o5', seq: 5, feeItem: '工具损坏丢失费用', amount: '0.00', discount: '—', updatedAt: '2026-07-09 10:04:40' },
				{ key: 'o6', seq: 6, feeItem: '证件丢失费用', amount: '0.00', discount: '—', updatedAt: '2026-07-09 10:04:40' },
				{ key: 'o7', seq: 7, feeItem: '广告损坏丢失费用', amount: '0.00', discount: '—', updatedAt: '2026-07-09 10:04:40' },
				{ key: 'o8', seq: 8, feeItem: '送车服务费', amount: '0.00', discount: '—', updatedAt: '2026-07-09 10:04:40' },
				{ key: 'o9', seq: 9, feeItem: '接车服务费', amount: '0.00', discount: '—', updatedAt: '2026-07-09 10:04:40' },
				{ key: 'o10', seq: 10, feeItem: '轮胎磨损费用', amount: '1800.90', discount: '0.00', updatedAt: '2026-07-09 10:04:40' }
			]
		},
		safety: {
			total: '0.00',
			submitter: '罗日可',
			status: '待提交',
			feeRows: [
				{ key: 's1', seq: 1, feeItem: '违章处理违约金', amount: '0.00', updatedAt: '2026-07-09 10:04:40' },
				{ key: 's2', seq: 2, feeItem: '保险上浮', amount: '0.00', updatedAt: '2026-07-09 10:04:40' },
				{ key: 's3', seq: 3, feeItem: '其他违规费用', amount: '0.00', updatedAt: '2026-07-09 10:04:40' }
			],
			violations: [
				{ key: 'v1', code: 'WZ-2026061511180585', plateNo: '粤AGP3628', act: '超速20%-50%', time: '2025-12-18 06:31:00', fine: '150.00', status: '已缴费', points: '3', handled: '已处理' },
				{ key: 'v2', code: 'WZ-2026061511180604', plateNo: '粤AGP3628', act: '超速20%-50%', time: '2025-12-09 06:45:00', fine: '150.00', status: '已缴费', points: '3', handled: '已处理' }
			],
			accidents: []
		}
	};
}

const Component = function (props) {
	var useState = React.useState;
	var useMemo = React.useMemo;
	var antd = window.antd;
	var App = antd.App;
	var Table = antd.Table;
	var Button = antd.Button;
	var Select = antd.Select;
	var message = antd.message;

	var _role = useState(readDeptRole());
	var role = _role[0];
	var setRole = _role[1];
	var vehicle = useMemo(function () { return buildVehicleFromRow(props && props.row); }, [props && props.row]);
	var deptData = useMemo(buildDeptData, []);
	var stats = useMemo(function () {
		return {
			deposit: '10000.00',
			pending: '3213.34',
			refund: '6786.66',
			pay: '0.00'
		};
	}, []);

	function handleRoleChange(next) {
		setRole(next);
		writeDeptRole(next);
	}

	function canSeeSection(sectionKey) {
		if (role === 'biz') return true;
		if (sectionKey === 'customer') return false;
		return sectionKey === role;
	}

	function canSeeKpi() {
		return role === 'biz';
	}

	function canSeeVehicleTable() {
		return role === 'biz';
	}

	var vehicleColumns = [
		{ title: '车牌号', dataIndex: 'plateNo', key: 'plateNo', width: 110 },
		{ title: '合同编码', dataIndex: 'contractCode', key: 'contractCode', width: 168 },
		{ title: '项目名称', dataIndex: 'projectName', key: 'projectName', width: 180, ellipsis: true },
		{ title: '客户名称', dataIndex: 'customerName', key: 'customerName', width: 200, ellipsis: true },
		{ title: '交车时间', dataIndex: 'deliveryTime', key: 'deliveryTime', width: 148, render: fmtYMDHM },
		{ title: '还车时间', dataIndex: 'returnTime', key: 'returnTime', width: 148, render: fmtYMDHM },
		{ title: '交车里程(km)', dataIndex: 'deliveryMileage', key: 'deliveryMileage', width: 120, className: 'tabular-nums' },
		{ title: '还车里程(km)', dataIndex: 'returnMileage', key: 'returnMileage', width: 120, className: 'tabular-nums' },
		{ title: '易损保', dataIndex: 'fragileInsurance', key: 'fragileInsurance', width: 72 },
		{ title: '轮胎保', dataIndex: 'tireInsurance', key: 'tireInsurance', width: 72 },
		{ title: '养护保', dataIndex: 'maintenanceInsurance', key: 'maintenanceInsurance', width: 72 }
	];

	function renderDeptHeader(dept) {
		return React.createElement('div', { className: 'vrs-handle-dept-head' },
			React.createElement('div', { className: 'vrs-handle-dept-head__title' }, dept.title),
			React.createElement('div', { className: 'vrs-handle-dept-head__meta' },
				React.createElement('span', { className: 'tabular-nums' }, '总金额：', React.createElement('strong', null, dept.total), ' 元'),
				React.createElement('span', null, '提交人：', dept.submitter || '—'),
				React.createElement(StatusTag, { label: dept.status, tone: approvalTone(dept.status) })
			)
		);
	}

	function renderCustomerSection() {
		var d = deptData.customer;
		return React.createElement('section', { className: 'vm-table-card vrs-handle-dept-card', key: 'customer' },
			renderDeptHeader({ title: '客户服务', total: d.total, submitter: d.submitter, status: d.status }),
			React.createElement('div', { className: 'vm-table-wrap' },
				React.createElement(Table, {
					className: 'vm-list-table',
					rowKey: 'key',
					size: 'small',
					pagination: false,
					dataSource: d.rows,
					columns: [
						{ title: '序号', dataIndex: 'seq', key: 'seq', width: 56 },
						{ title: '费用项', dataIndex: 'feeItem', key: 'feeItem', width: 160 },
						{ title: '金额', dataIndex: 'amount', key: 'amount', width: 100, className: 'tabular-nums' },
						{ title: '备注', dataIndex: 'remark', key: 'remark', width: 120 },
						{ title: '最后更新时间', dataIndex: 'updatedAt', key: 'updatedAt', width: 148, className: 'tabular-nums' }
					]
				})
			)
		);
	}

	function renderEnergySection() {
		var d = deptData.energy;
		return React.createElement('section', { className: 'vm-table-card vrs-handle-dept-card', key: 'energy' },
			renderDeptHeader({ title: '能源组', total: d.total, submitter: d.submitter, status: d.status }),
			React.createElement('div', { className: 'vrs-handle-field-grid' },
				d.fields.map(function (f) {
					return React.createElement('div', { key: f.label, className: 'vrs-handle-field' },
						React.createElement('span', { className: 'vrs-handle-field__label' }, f.label),
						React.createElement('span', { className: 'vrs-handle-field__value tabular-nums' }, f.value, f.label.indexOf('金额') >= 0 ? ' 元' : '')
					);
				}),
				React.createElement('div', { className: 'vrs-handle-field vrs-handle-field--full' },
					React.createElement('span', { className: 'vrs-handle-field__label' }, '项目预充值余额'),
					React.createElement('span', { className: 'vrs-handle-field__value tabular-nums' }, d.prepayBalance, ' 元')
				)
			),
			React.createElement('div', { className: 'vrs-handle-dept-actions' },
				React.createElement(Button, { size: 'small' }, '保存'),
				React.createElement(Button, { type: 'primary', size: 'small' }, '提交')
			)
		);
	}

	function renderOpsSection() {
		var d = deptData.ops;
		return React.createElement('section', { className: 'vm-table-card vrs-handle-dept-card', key: 'ops' },
			renderDeptHeader({ title: '运维组', total: d.total, submitter: d.submitter, status: d.status }),
			React.createElement('div', { className: 'vm-table-wrap' },
				React.createElement(Table, {
					className: 'vm-list-table',
					rowKey: 'key',
					size: 'small',
					pagination: false,
					scroll: { x: 900 },
					dataSource: d.rows,
					columns: [
						{ title: '序号', dataIndex: 'seq', key: 'seq', width: 56 },
						{ title: '费用项', dataIndex: 'feeItem', key: 'feeItem', width: 140 },
						{ title: '金额', dataIndex: 'amount', key: 'amount', width: 96, className: 'tabular-nums' },
						{ title: '无忧包减免', dataIndex: 'discount', key: 'discount', width: 96, className: 'tabular-nums' },
						{ title: '最后更新时间', dataIndex: 'updatedAt', key: 'updatedAt', width: 148, className: 'tabular-nums' }
					]
				})
			),
			React.createElement('div', { className: 'vrs-handle-dept-actions' },
				React.createElement(Button, { size: 'small' }, '保存'),
				React.createElement(Button, { type: 'primary', size: 'small' }, '提交')
			)
		);
	}

	function renderSafetySection() {
		var d = deptData.safety;
		return React.createElement('section', { className: 'vm-table-card vrs-handle-dept-card', key: 'safety' },
			renderDeptHeader({ title: '安全组', total: d.total, submitter: d.submitter, status: d.status }),
			React.createElement('div', { className: 'vm-table-wrap' },
				React.createElement(Table, {
					className: 'vm-list-table',
					rowKey: 'key',
					size: 'small',
					pagination: false,
					dataSource: d.feeRows,
					columns: [
						{ title: '序号', dataIndex: 'seq', key: 'seq', width: 56 },
						{ title: '费用项', dataIndex: 'feeItem', key: 'feeItem', width: 140 },
						{ title: '金额', dataIndex: 'amount', key: 'amount', width: 96, className: 'tabular-nums' },
						{ title: '最后更新时间', dataIndex: 'updatedAt', key: 'updatedAt', width: 148, className: 'tabular-nums' }
					]
				})
			),
			React.createElement('h3', { className: 'vrs-handle-subtitle' }, '违章清单'),
			React.createElement('div', { className: 'vm-table-wrap' },
				React.createElement(Table, {
					className: 'vm-list-table',
					rowKey: 'key',
					size: 'small',
					pagination: false,
					scroll: { x: 1100 },
					dataSource: d.violations,
					columns: [
						{ title: '违章编码', dataIndex: 'code', key: 'code', width: 160 },
						{ title: '车牌号', dataIndex: 'plateNo', key: 'plateNo', width: 100 },
						{ title: '违法行为', dataIndex: 'act', key: 'act', width: 220, ellipsis: true },
						{ title: '违法时间', dataIndex: 'time', key: 'time', width: 148, className: 'tabular-nums' },
						{ title: '罚款金额', dataIndex: 'fine', key: 'fine', width: 96, className: 'tabular-nums' },
						{ title: '缴费状态', dataIndex: 'status', key: 'status', width: 88 },
						{ title: '记分值', dataIndex: 'points', key: 'points', width: 72 },
						{ title: '是否处理', dataIndex: 'handled', key: 'handled', width: 88 }
					]
				})
			),
			React.createElement('h3', { className: 'vrs-handle-subtitle' }, '事故清单'),
			React.createElement('div', { className: 'vrs-handle-empty' }, '暂无事故记录'),
			React.createElement('div', { className: 'vrs-handle-dept-actions' },
				React.createElement(Button, { size: 'small' }, '保存'),
				React.createElement(Button, { type: 'primary', size: 'small' }, '提交')
			)
		);
	}

	function renderKpiCards() {
		var cards = [
			{ key: 'deposit', label: '保证金总额', value: stats.deposit, tone: 'neutral' },
			{ key: 'pending', label: '待结算总额', value: stats.pending, tone: 'warn', hint: '点击查看明细' },
			{ key: 'refund', label: '应退还总额', value: stats.refund, tone: 'good', hint: '点击查看明细' },
			{ key: 'pay', label: '应补缴总额', value: stats.pay, tone: 'danger', hint: '点击查看明细' }
		];
		return React.createElement('div', { className: 'vrs-handle-kpi-row' },
			cards.map(function (c) {
				return React.createElement('div', { key: c.key, className: 'vrs-handle-kpi-card vrs-handle-kpi-card--' + c.tone },
					React.createElement('div', { className: 'vrs-handle-kpi-card__label' },
						c.label,
						c.hint ? React.createElement('span', { className: 'vrs-handle-kpi-card__hint' }, c.hint) : null
					),
					React.createElement('div', { className: 'vrs-handle-kpi-card__value tabular-nums' },
						c.value,
						React.createElement('span', { className: 'vrs-handle-kpi-card__unit' }, '元')
					)
				);
			})
		);
	}

	function renderCompactVehicle() {
		return React.createElement('div', { className: 'vrs-handle-vehicle-compact' },
			React.createElement('span', { className: 'vrs-handle-vehicle-compact__plate' }, vehicle.plateNo),
			React.createElement('span', null, vehicle.contractCode),
			React.createElement('span', null, vehicle.customerName)
		);
	}

	return React.createElement(App, null,
		React.createElement('div', { className: 'vm-page lc-page vrs-page vrs-handle-page' },
			React.createElement('header', { className: 'vrs-handle-topbar' },
				React.createElement('div', { className: 'vrs-handle-topbar__left' },
					React.createElement('button', {
						type: 'button',
						className: 'vm-btn vm-btn-back',
						onClick: function () { if (props && props.onBack) props.onBack(); }
					}, '返回列表'),
					React.createElement('h1', { className: 'vrs-handle-title' }, '还车应结款详情')
				),
				React.createElement('div', { className: 'vrs-handle-role-switch' },
					React.createElement('span', { className: 'vrs-handle-role-switch__label' }, '预览角色'),
					React.createElement(Select, {
						value: role,
						style: { width: 200 },
						options: DEPT_ROLE_OPTIONS,
						onChange: handleRoleChange
					})
				)
			),

			canSeeVehicleTable()
				? React.createElement('section', { className: 'vm-table-card vrs-handle-section' },
					React.createElement('header', { className: 'vrs-handle-section__title' }, '还车车辆明细'),
					React.createElement('div', { className: 'vm-table-wrap' },
						React.createElement(Table, {
							className: 'vm-list-table',
							rowKey: 'key',
							size: 'small',
							pagination: false,
							scroll: { x: 1280 },
							dataSource: [vehicle],
							columns: vehicleColumns
						})
					)
				)
				: React.createElement('section', { className: 'vm-filter-card ldb-filter-card vrs-handle-vehicle-banner' },
					renderCompactVehicle()
				),

			React.createElement('section', { className: 'vrs-handle-fee-section' },
				React.createElement('header', { className: 'vrs-handle-section__title' }, '还车费用明细'),
				canSeeKpi() ? renderKpiCards() : null,
				canSeeSection('customer') ? renderCustomerSection() : null,
				canSeeSection('energy') ? renderEnergySection() : null,
				canSeeSection('ops') ? renderOpsSection() : null,
				canSeeSection('safety') ? renderSafetySection() : null
			),

			React.createElement('footer', { className: 'vrs-handle-footer' },
				React.createElement(Button, { onClick: function () { if (props && props.onBack) props.onBack(); } }, '取消'),
				role === 'biz'
					? React.createElement(Button, { type: 'primary', disabled: true }, '14天12小时后可提交审核')
					: null
			)
		)
	);
};

export default Component;
