hospital-rescue-app-v2/pages/warehouse/device-detail.uvue

<template>
	<hr-page page-bg="#F3F4F6" status-bg="#FFFFFF" nav-title="设备详情" :xloading="true" @right-click="onMore">
		<template v-slot:right>
			<x-icon name="more-fill" color="#6B7280" font-size="18"></x-icon>
		</template>

		<view class="hr-body">

			<!-- ============ 概览 ============ -->
			<hr-card>
				<view class="hr-row">
					<view class="hr-avt hr-avt-lg dd-avt">
						<text>{{ device.icon }}</text>
					</view>
					<view class="hr-flex1">
						<text class="dd-name">{{ device.name }}</text>
						<text class="dd-meta">{{ device.meta }}</text>
						<view style="margin-top:7px">
							<hr-pc :level="2" :text="device.status"></hr-pc>
						</view>
					</view>
				</view>
			</hr-card>

			<!-- ============ 借用前自检 ============ -->
			<hr-sec :title="'借用前自检（5 项缺一不可）'" :more="checkedCount + ' / 5'"></hr-sec>
			<hr-card variant="list">
				<view v-for="(c, i) in checks" :key="i" :class="c.checked ? 'dd-ck dd-ck-on' : 'dd-ck'"
					@click="toggleCheck(i)">
					<view :class="c.checked ? 'dd-ck-box dd-ck-box-on' : 'dd-ck-box'">
						<x-icon v-if="c.checked" name="check-line" color="#FFFFFF" font-size="14"></x-icon>
					</view>
					<view class="hr-flex1">
						<text class="dd-ck-t">{{ c.title }}</text>
						<text class="dd-ck-s">{{ c.sub }}</text>
					</view>
				</view>
			</hr-card>

			<!-- ============ 维护记录 ============ -->
			<hr-sec title="维护记录" :first="false"></hr-sec>
			<hr-card>
				<hr-timeline :nodes="device.maintain"></hr-timeline>
			</hr-card>

			<hr-tip style="margin-top:14px" theme="warn" icon="⚠"
				text="发现设备异常可直接一键报修，系统将自动流转至设备科并暂停借出。"></hr-tip>

			<view style="height:14px"></view>
		</view>

		<template v-slot:footer>
			<view class="hr-fixedbar">
				<view class="hr-btn hr-btn-ghost dd-foot-report" @click="onReport">
					<x-icon name="error-warning-line" color="#1F2937" font-size="16"></x-icon>
					<text class="dd-foot-t">报修</text>
				</view>
				<view :class="allChecked ? 'hr-btn hr-btn-primary' : 'hr-btn hr-btn-disabled'" style="flex:1"
					@click="onBorrow">
					<text :class="allChecked ? 'dd-foot-t2' : 'dd-foot-t3'">
						{{ allChecked ? '确认自检并借用' : '请完成 5 项自检' }}
					</text>
				</view>
			</view>
		</template>
	</hr-page>
</template>

<script lang="uts" setup>
	import { ref, computed } from 'vue'
	import { deviceDetail } from '@/mock/index.uts'
	import { HrDeviceCheck } from '@/mock/types.uts'
	import { navBack } from '@/utils/nav.uts'

	/**
	 * s32 设备详情
	 * 借用前 5 项自检缺一不可，全部确认后才可借出。
	 */
	const device = deviceDetail
	const checks = ref<HrDeviceCheck[]>([])

	// 深拷贝一份，避免污染 mock 数据
	const arr : HrDeviceCheck[] = []
	for (let i = 0; i < device.checkList.length; i++) {
		const c = device.checkList[i]
		arr.push({ title: c.title, sub: c.sub, checked: c.checked } as HrDeviceCheck)
	}
	checks.value = arr

	const checkedCount = computed(() : number => {
		let n = 0
		for (let i = 0; i < checks.value.length; i++) {
			if (checks.value[i].checked) { n++ }
		}
		return n
	})

	const allChecked = computed(() : boolean => {
		return checkedCount.value == checks.value.length
	})

	function toggleCheck(i : number) : void {
		const list : HrDeviceCheck[] = []
		for (let k = 0; k < checks.value.length; k++) {
			const c = checks.value[k]
			list.push({
				title: c.title, sub: c.sub, checked: k == i ? !c.checked : c.checked
			} as HrDeviceCheck)
		}
		checks.value = list
	}

	function onBorrow() : void {
		if (!allChecked.value) {
			uni.showToast({ title: '请先完成 5 项自检', icon: 'none' })
			return
		}
		uni.showLoading({ title: '提交中' })
		setTimeout(() => {
			uni.hideLoading()
			uni.showModal({
				title: '借用成功',
				content: `${device.name}\n预计归还时间：3 天后（09-27）\n已生成借用单，逾期将自动提醒。`,
				showCancel: false,
				success: (res) => {
					navBack()
				}
			})
		}, 700)
	}

	function onReport() : void {
		uni.showModal({
			title: '一键报修',
			editable: true,
			placeholderText: '请描述设备异常，如：屏幕无法点亮',
			success: (res) => {
				if (res.confirm) {
					uni.showToast({ title: '已流转至设备科', icon: 'success' })
				}
			}
		})
	}

	function onMore() : void {
		uni.showToast({ title: '设备档案 / 借还记录', icon: 'none' })
	}
</script>

<style>
	.dd-avt {
		margin-right: 26rpx;
		background-color: #2563EB;
	}

	.dd-name {
		font-size: 33.6rpx;
		font-weight: bold;
		color: #1F2937;
	}

	.dd-meta {
		font-size: 25.8rpx;
		color: #6B7280;
		margin-top: 10rpx;
	}

	.dd-ck {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-top: 22rpx;
		padding-bottom: 22rpx;
		border-bottom: 2rpx solid #F3F4F6;
	}

	.dd-ck-on {
		/* 选中态体现在勾选框 */
	}

	.dd-ck-box {
		width: 44rpx;
		height: 44rpx;
		border-radius: 14rpx;
		border: 3rpx solid #D1D5DB;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-right: 22rpx;
	}

	.dd-ck-box-on {
		border: 3rpx solid #10B981;
		background-color: #10B981;
	}

	.dd-ck-t {
		font-size: 30.2rpx;
		font-weight: bold;
		color: #1F2937;
	}

	.dd-ck-s {
		font-size: 23.6rpx;
		color: #9CA3AF;
		margin-top: 4rpx;
	}

	.dd-foot-report {
		flex: 0 0 220rpx;
		margin-right: 18rpx;
	}

	.dd-foot-t {
		font-size: 31.4rpx;
		font-weight: bold;
		color: #1F2937;
		margin-left: 10rpx;
	}

	.dd-foot-t2 {
		font-size: 32.4rpx;
		font-weight: bold;
		color: #FFFFFF;
	}

	.dd-foot-t3 {
		font-size: 32.4rpx;
		font-weight: bold;
		color: #9CA3AF;
	}
</style>