// 【重要】必须使用 const Component 作为组件变量名
// 运维管理 - 车辆数据 - 车辆详情（只读展示）

const Component = function () {
	var useState = React.useState;

	var antd = window.antd;
	var Breadcrumb = antd.Breadcrumb;
	var Card = antd.Card;
	var Tabs = antd.Tabs;
	var Table = antd.Table;
	var Tag = antd.Tag;
	var Button = antd.Button;
	var Tooltip = antd.Tooltip;

	// 顶部概览 mock 数据（与图片一致）
	var overview = {
		plateNo: '浙F06900F',
		plateTag: '租赁',
		vin: 'LA9HE60A0NBAF4031',
		vehicleNo: '22FHD0007',
		owner: '浙江羚牛氢能科技有限公司',
		contractNo: 'LNZLHTSH2023071301',
		outStatus: '租赁交车',
		licenseStatus: '正常',
		location: '浙江省嘉兴市平湖市XXXXXXXXXXX街道XXXXXXXXXXX号XXXXXXXx',
		bodyColor: '白色',
		purchaseDate: '2026-09-09',
		warehouseStatus: '已交付车-租赁服务',
		customerName: '上海迅杰物流有限公司',
		prepStatus: '正常',
		scrapStatus: '无',
		gpsLastTime: '2026-09-09 10:50',
		resourceCategory: 'XXXXXXXXXX',
		manufactureYear: '2025',
		parkingPlace: '-',
		bizDept: '业务三部',
		lastPrepTime: '2026-09-09',
		assetRating: 'XXXXXXXXXX',
		ratingTime: '2027-09-09',
		forceScrapDate: '2026-09-09',
		nextInspectionTime: '2026-09-09',
		bizManager: '金可鹏',
		maintainStatus: '正常',
		preemptStatus: '无',
		transferStatus: '无'
	};

	// 型号参数 tab 数据
	var modelParams = {
		brand: '苏龙',
		model: '海格牌KLQ5180XYKFCEV',
		vehicleType: '18吨双飞翼货车',
		fuelType: '氢',
		cabinColor: '绿牌',
		wholeSize: '5995mm x 2145mm x 3130mm'
	};
	var tireInfo = { tireCount: '8', tireSpec: '15/80R22.5' };
	var electricSystem = {
		batteryType: '磷酸铁锂',
		batteryVendor: 'xxxxxxxxxxxxx企业名称',
		capacity: '100000 kWh',
		range: '200 KM'
	};
	var hydrogenSystem = {
		vendor: '某某供氢系统科技有限公司',
		cylinderCapacity: 'xxx L',
		gaugeMode: 'MPa',
		range: '1000 KM'
	};
	var otherSystem = {
		coldMachineVendor: 'xxxxxxxx企业',
		stackVendor: 'XXXXXXXX企业'
	};
	var maintenanceList = [
		{ key: '1', item: '变速器油', kmCycle: '60000', monthCycle: '24', laborCost: '0', materialCost: '571', total: '571', lastKm: '' },
		{ key: '2', item: '变速器油', kmCycle: '60000', monthCycle: '24', laborCost: '0', materialCost: '571', total: '571', lastKm: '' },
		{ key: '3', item: '变速器油', kmCycle: '60000', monthCycle: '24', laborCost: '0', materialCost: '571', total: '571', lastKm: '5000' },
		{ key: '4', item: '变速器油', kmCycle: '60000', monthCycle: '24', laborCost: '0', materialCost: '571', total: '571', lastKm: '5000' },
		{ key: '5', item: '变速器油', kmCycle: '60000', monthCycle: '24', laborCost: '0', materialCost: '571', total: '571', lastKm: '5000' }
	];

	var activeTab = useState('model');

	var styles = {
		page: { padding: '16px 24px 40px', backgroundColor: '#f5f5f5', minHeight: '100vh', fontSize: 14 },
		breadcrumb: { marginBottom: 16, color: '#666' },
		breadcrumbSep: { margin: '0 8px', color: '#999' },
		card: { backgroundColor: '#fff', borderRadius: 8, marginBottom: 16, boxShadow: '0 1px 2px rgba(0,0,0,0.05)', overflow: 'hidden' },
		cardBody: { padding: '20px 24px' },
		overviewHeader: { display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20, flexWrap: 'wrap' },
		plateNo: { fontSize: 18, fontWeight: 600, color: '#333' },
		overviewGrid: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '12px 24px' },
		overviewItem: { display: 'flex', gap: 8, minWidth: 0 },
		overviewLabel: { color: '#666', flex: '0 0 110px' },
		overviewValue: { color: '#333', flex: 1 },
		cardTitleBar: { display: 'flex', alignItems: 'center', marginBottom: 16, fontSize: 15, fontWeight: 500 },
		cardTitleBarLine: { width: 4, height: 16, backgroundColor: '#1890ff', marginRight: 8, borderRadius: 2 },
		infoGrid: { display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '12px 24px', marginBottom: 20 },
		infoItem: { display: 'flex', gap: 8 },
		infoLabel: { color: '#666', flex: '0 0 100px' },
		infoValue: { color: '#333' }
	};

	function InfoRow(props) {
		var val = props.value || '-';
		var valueNode = props.ellipsisWithTooltip
			? React.createElement(Tooltip, { title: val },
				React.createElement('span', {
					style: Object.assign({}, styles.overviewValue, { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', display: 'block' })
				}, val)
			)
			: React.createElement('span', { style: styles.overviewValue }, val);
		return React.createElement('div', { style: styles.overviewItem },
			React.createElement('span', { style: styles.overviewLabel }, props.label + '：'),
			valueNode
		);
	}

	function CardTitleWithBar(props) {
		return React.createElement('div', { style: styles.cardTitleBar },
			React.createElement('span', { style: styles.cardTitleBarLine }),
			props.title
		);
	}

	var tabItems = [
		{
			key: 'model',
			label: '型号参数',
			children: React.createElement('div', { style: { padding: '0 4px' } },
				React.createElement(Card, { size: 'small', style: { marginBottom: 16 } },
					React.createElement(CardTitleWithBar, { title: '型号参数' }),
					React.createElement('div', { style: styles.infoGrid },
						React.createElement('div', { style: styles.infoItem }, React.createElement('span', { style: styles.infoLabel }, '品牌：'), React.createElement('span', { style: styles.infoValue }, modelParams.brand)),
						React.createElement('div', { style: styles.infoItem }, React.createElement('span', { style: styles.infoLabel }, '型号：'), React.createElement('span', { style: styles.infoValue }, modelParams.model)),
						React.createElement('div', { style: styles.infoItem }, React.createElement('span', { style: styles.infoLabel }, '车辆类型：'), React.createElement('span', { style: styles.infoValue }, modelParams.vehicleType)),
						React.createElement('div', { style: styles.infoItem }, React.createElement('span', { style: styles.infoLabel }, '燃料种类：'), React.createElement('span', { style: styles.infoValue }, modelParams.fuelType)),
						React.createElement('div', { style: styles.infoItem }, React.createElement('span', { style: styles.infoLabel }, '车厢颜色：'), React.createElement('span', { style: styles.infoValue }, modelParams.cabinColor)),
						React.createElement('div', { style: styles.infoItem }, React.createElement('span', { style: styles.infoLabel }, '整车尺寸：'), React.createElement('span', { style: styles.infoValue }, modelParams.wholeSize))
					)
				),
				React.createElement(Card, { size: 'small', style: { marginBottom: 16 } },
					React.createElement(CardTitleWithBar, { title: '轮胎情况' }),
					React.createElement('div', { style: styles.infoGrid },
						React.createElement('div', { style: styles.infoItem }, React.createElement('span', { style: styles.infoLabel }, '轮胎数量：'), React.createElement('span', { style: styles.infoValue }, tireInfo.tireCount)),
						React.createElement('div', { style: styles.infoItem }, React.createElement('span', { style: styles.infoLabel }, '轮胎规格：'), React.createElement('span', { style: styles.infoValue }, tireInfo.tireSpec))
					)
				),
				React.createElement(Card, { size: 'small', style: { marginBottom: 16 } },
					React.createElement(CardTitleWithBar, { title: '电气系统' }),
					React.createElement('div', { style: styles.infoGrid },
						React.createElement('div', { style: styles.infoItem }, React.createElement('span', { style: styles.infoLabel }, '电池类型：'), React.createElement('span', { style: styles.infoValue }, electricSystem.batteryType)),
						React.createElement('div', { style: styles.infoItem }, React.createElement('span', { style: styles.infoLabel }, '电池厂家：'), React.createElement('span', { style: styles.infoValue }, electricSystem.batteryVendor)),
						React.createElement('div', { style: styles.infoItem }, React.createElement('span', { style: styles.infoLabel }, '储电量：'), React.createElement('span', { style: styles.infoValue }, electricSystem.capacity)),
						React.createElement('div', { style: styles.infoItem }, React.createElement('span', { style: styles.infoLabel }, '续航里程：'), React.createElement('span', { style: styles.infoValue }, electricSystem.range))
					)
				),
				React.createElement(Card, { size: 'small', style: { marginBottom: 16 } },
					React.createElement(CardTitleWithBar, { title: '供氢系统' }),
					React.createElement('div', { style: styles.infoGrid },
						React.createElement('div', { style: styles.infoItem }, React.createElement('span', { style: styles.infoLabel }, '供氢系统厂家：'), React.createElement('span', { style: styles.infoValue }, hydrogenSystem.vendor)),
						React.createElement('div', { style: styles.infoItem }, React.createElement('span', { style: styles.infoLabel }, '氢瓶容量：'), React.createElement('span', { style: styles.infoValue }, hydrogenSystem.cylinderCapacity)),
						React.createElement('div', { style: styles.infoItem }, React.createElement('span', { style: styles.infoLabel }, '仪表盘模式：'), React.createElement('span', { style: styles.infoValue }, hydrogenSystem.gaugeMode)),
						React.createElement('div', { style: styles.infoItem }, React.createElement('span', { style: styles.infoLabel }, '续航里程：'), React.createElement('span', { style: styles.infoValue }, hydrogenSystem.range))
					)
				),
				React.createElement(Card, { size: 'small', style: { marginBottom: 16 } },
					React.createElement(CardTitleWithBar, { title: '其他系统' }),
					React.createElement('div', { style: styles.infoGrid },
						React.createElement('div', { style: styles.infoItem }, React.createElement('span', { style: styles.infoLabel }, '冷机生产企业：'), React.createElement('span', { style: styles.infoValue }, otherSystem.coldMachineVendor)),
						React.createElement('div', { style: styles.infoItem }, React.createElement('span', { style: styles.infoLabel }, '电堆生产企业：'), React.createElement('span', { style: styles.infoValue }, otherSystem.stackVendor))
					)
				),
				React.createElement(Card, { size: 'small' },
					React.createElement(CardTitleWithBar, { title: '保养参数' }),
					React.createElement(Table, {
						dataSource: maintenanceList,
						columns: [
							{ title: '序号', dataIndex: 'key', key: 'key', width: 60, render: function (_, __, i) { return i + 1; } },
							{ title: '养护项目', dataIndex: 'item', key: 'item', width: 120 },
							{ title: '保养公里周期(km)', dataIndex: 'kmCycle', key: 'kmCycle', width: 140 },
							{ title: '保养时间周期(月)', dataIndex: 'monthCycle', key: 'monthCycle', width: 140 },
							{ title: '工时费(元)', dataIndex: 'laborCost', key: 'laborCost', width: 100 },
							{ title: '材料费(元)', dataIndex: 'materialCost', key: 'materialCost', width: 100 },
							{ title: '合计', dataIndex: 'total', key: 'total', width: 80 },
							{ title: '上次保养公里数(KM)', dataIndex: 'lastKm', key: 'lastKm', render: function (v) { return v || '—'; } }
						],
						pagination: false,
						size: 'small',
						bordered: true
					})
				)
			)
		},
		{ key: 'equip', label: '后装设备', children: React.createElement('div', { style: { padding: 24, color: '#999' } }, '暂无数据') },
		{ key: 'license', label: '证照信息', children: React.createElement('div', { style: { padding: 24, color: '#999' } }, '暂无数据') },
		{ key: 'lease', label: '租赁记录', children: React.createElement('div', { style: { padding: 24, color: '#999' } }, '暂无数据') },
		{ key: 'insurance', label: '保险记录', children: React.createElement('div', { style: { padding: 24, color: '#999' } }, '暂无数据') },
		{ key: 'repair', label: '维修记录', children: React.createElement('div', { style: { padding: 24, color: '#999' } }, '暂无数据') },
		{ key: 'maintain', label: '保养记录', children: React.createElement('div', { style: { padding: 24, color: '#999' } }, '暂无数据') },
		{ key: 'accident', label: '事故记录', children: React.createElement('div', { style: { padding: 24, color: '#999' } }, '暂无数据') },
		{ key: 'fault', label: '故障记录', children: React.createElement('div', { style: { padding: 24, color: '#999' } }, '暂无数据') },
		{ key: 'violation', label: '违章记录', children: React.createElement('div', { style: { padding: 24, color: '#999' } }, '暂无数据') },
		{ key: 'change', label: '异动记录', children: React.createElement('div', { style: { padding: 24, color: '#999' } }, '暂无数据') },
		{ key: 'transfer', label: '调拨记录', children: React.createElement('div', { style: { padding: 24, color: '#999' } }, '暂无数据') },
		{ key: 'prep', label: '整备记录', children: React.createElement('div', { style: { padding: 24, color: '#999' } }, '暂无数据') },
		{ key: 'inspect', label: '抽检记录', children: React.createElement('div', { style: { padding: 24, color: '#999' } }, '暂无数据') }
	];

	var breadcrumbNodes = [
		React.createElement('span', { key: '1' }, '车辆管理'),
		React.createElement('span', { key: '2', style: styles.breadcrumbSep }, ' / '),
		React.createElement('span', { key: '3' }, '车辆数据'),
		React.createElement('span', { key: '4', style: styles.breadcrumbSep }, ' / '),
		React.createElement('span', { key: '5', style: { color: '#1890ff' } }, '详情')
	];

	return React.createElement('div', { style: styles.page },
		React.createElement('div', { style: styles.breadcrumb }, breadcrumbNodes),
		React.createElement('div', { style: styles.card },
			React.createElement('div', { style: styles.cardBody },
				React.createElement('div', { style: styles.overviewHeader },
					React.createElement('span', { style: styles.plateNo }, overview.plateNo),
					React.createElement(Tag, { color: 'blue' }, overview.plateTag),
					React.createElement(Button, { type: 'link', size: 'small', style: { padding: 0 } }, '1')
				),
				React.createElement('div', { style: styles.overviewGrid },
					React.createElement(InfoRow, { label: '车架号', value: overview.vin }),
					React.createElement(InfoRow, { label: '车辆编号', value: overview.vehicleNo }),
					React.createElement(InfoRow, { label: '登记所有权', value: overview.owner }),
					React.createElement(InfoRow, { label: '合同编号', value: overview.contractNo }),
					React.createElement(InfoRow, { label: '出库状态', value: overview.outStatus }),
					React.createElement(InfoRow, { label: '证照状态', value: overview.licenseStatus }),
					React.createElement(InfoRow, { label: '车辆当前位置', value: overview.location, ellipsisWithTooltip: true }),
					React.createElement(InfoRow, { label: '车身颜色', value: overview.bodyColor }),
					React.createElement(InfoRow, { label: '采购入库日期', value: overview.purchaseDate }),
					React.createElement(InfoRow, { label: '库位状态', value: overview.warehouseStatus }),
					React.createElement(InfoRow, { label: '客户名称', value: overview.customerName }),
					React.createElement(InfoRow, { label: '整备状态', value: overview.prepStatus }),
					React.createElement(InfoRow, { label: '报废状态', value: overview.scrapStatus }),
					React.createElement(InfoRow, { label: 'GPS最后上传', value: overview.gpsLastTime }),
					React.createElement(InfoRow, { label: '资源分类', value: overview.resourceCategory }),
					React.createElement(InfoRow, { label: '出厂年份', value: overview.manufactureYear }),
					React.createElement(InfoRow, { label: '停车位置', value: overview.parkingPlace }),
					React.createElement(InfoRow, { label: '业务部门', value: overview.bizDept }),
					React.createElement(InfoRow, { label: '上次整备时间', value: overview.lastPrepTime }),
					React.createElement(InfoRow, { label: '资产评级', value: overview.assetRating }),
					React.createElement(InfoRow, { label: '等评时间', value: overview.ratingTime }),
					React.createElement(InfoRow, { label: '强制报废期', value: overview.forceScrapDate }),
					React.createElement(InfoRow, { label: '下次年检时间', value: overview.nextInspectionTime }),
					React.createElement(InfoRow, { label: '业务负责人', value: overview.bizManager }),
					React.createElement(InfoRow, { label: '维修状态', value: overview.maintainStatus }),
					React.createElement(InfoRow, { label: '预占状态', value: overview.preemptStatus }),
					React.createElement(InfoRow, { label: '过户状态', value: overview.transferStatus })
				)
			)
		),
		React.createElement('div', { style: Object.assign({}, styles.card, { marginBottom: 0 }) },
			React.createElement('div', { style: styles.cardBody },
				React.createElement(Tabs, {
					activeKey: activeTab[0],
					onChange: function (key) { activeTab[1](key); },
					items: tabItems,
					type: 'line'
				})
			)
		)
	);
};

if (typeof window !== 'undefined') {
	window.Component = Component;
	if (document.readyState === 'loading') {
		document.addEventListener('DOMContentLoaded', function () {
			var rootEl = document.getElementById('root');
			if (rootEl && window.ReactDOM && window.React) {
				var root = ReactDOM.createRoot(rootEl);
				root.render(React.createElement(Component));
			}
		});
	} else {
		var rootEl = document.getElementById('root');
		if (rootEl && window.ReactDOM && window.React) {
			var root = ReactDOM.createRoot(rootEl);
			root.render(React.createElement(Component));
		}
	}
}